Selenium WebDriver get border color

Question

Hi all i am trying to get border color of an extjs 4.2 form control text field using getCssValue method. But i am not able to fetch it. it is returning me blank. Below is my code snippet u can try this as is.

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class TestClass 
{
    public static void main(String[] args) throws InterruptedException
    {
        WebDriver driver=new FirefoxDriver();
        Thread.sleep(2000);
        driver.get("http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/form/dynamic.html");
        Thread.sleep(2000);
        WebElement element=driver.findElement(By.xpath(".//input[@name='first']"));
        Thread.sleep(2000);
        element.sendKeys("");
        element.sendKeys(Keys.TAB);
        Thread.sleep(2000);
        System.out.println("'"+element.getCssValue("border-color")+"'");
    }
}

Webdriver version 2.33 (Java binding)

FF 22

Solution 1

How to get border color or other css values look in Computed there are all values that you can get:

getCssValue("border-bottom-color")

returns rgba(209, 219, 223, 1) and need to clear it (this will work for rgba and rgb):

String rgb[] = driver.findElement(By.name("login[email]")).getCssValue("border-bottom-color").replaceAll("(rgba)|(rgb)|(\\()|(\\s)|(\\))","").split(",");

Now our rgb is in array using this method to parse it

String hex = String.format("#%s%s%s", toBrowserHexValue(Integer.parseInt(rgb[0])), toBrowserHexValue(Integer.parseInt(rgb[1])), toBrowserHexValue(Integer.parseInt(rgb[2])));

private static String toBrowserHexValue(int number) {
        StringBuilder builder = new StringBuilder(Integer.toHexString(number & 0xff));
        while (builder.length() < 2) {
            builder.append("0");
        }
        return builder.toString().toUpperCase();
    }

From this rgba(209, 219, 223, 1) we got this #D1DBDF

P.S. Source of parsing int rgb to hex

Solution 2

There seems to be an issue with element.getCssValue("border-color") using a Firefox Driver. This is due to Shorthand CSS properties (e.g. margin, background, border) not been supported.

For Firefox you will need to enter

System.out.println("'"+element.getCssValue("border-top-color")+"'");

The code will print out 'rgba(207, 76, 53, 1)'

Using a ChromeDriver to get your value.

Your current code will print out 'rgb(207, 76, 53)'

To set the ChromeDriver you might need to add this line before you declare your driver

System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver.exe");
WebDriver driver=new ChromeDriver();

You can download the ChromeDriver from here http://chromedriver.storage.googleapis.com/index.html

Comments

[Mrunal Gosar]

hi Lt_Shade we are not even considering chrome for testing. so i cannot accept this answer. if u have ne workarounds for firefox then do let me know. TIA!!

[Mrunal Gosar]

Thanks @Andrian. But can i know why we are not able to get the original border-color property just for my knowledge?

[Andrian Durlestean]

Here is your answer: selenium.googlecode.com/svn/trunk/docs/api/java/org/openqa/… I don't know why they chose to return rgb, but they chose this standard.