Retrieve the border color using Selenium WebDriver

Question

Retrieve the border color using Selenium WebDriver

Hey everyone, I'm currently trying to retrieve the border color of an extjs 4.2 form control text field using the getCssValue method. However, I'm having trouble getting the value as it's coming back blank. Below is a sample of my code that you can test out:

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")+"'");
    }
}

https://i.stack.imgur.com/PCLbp.jpg

WebDriver version 2.33 (Java binding)

Firefox 22

java css extjs selenium selenium-webdriver

Answer 1

Answer №1

Learn how to retrieve and convert CSS values like border color in the Computed section, where all available values are displayed:

getCssValue("border-bottom-color")

When this code is executed, it returns rgba(209, 219, 223, 1) which may need to be converted (applicable for both rgba and rgb):

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

Now that we have our rgb values stored in an array, use the following method to parse them:

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();
    }

Converting from rgba(209, 219, 223, 1) gives us #D1DBDF

P.S. Refer to this source for more information on converting int rgb values to hex

Answer 2

Learn how to retrieve and convert CSS values like border color in the Computed section, where all available values are displayed:

getCssValue("border-bottom-color")

When this code is executed, it returns rgba(209, 219, 223, 1) which may need to be converted (applicable for both rgba and rgb):

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

Now that we have our rgb values stored in an array, use the following method to parse them:

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();
    }

Converting from rgba(209, 219, 223, 1) gives us #D1DBDF

P.S. Refer to this source for more information on converting int rgb values to hex

Answer 3

Answer №2

Encountering a problem with element.getCssValue("border-color") while using a Firefox Driver is not uncommon. This issue arises from Shorthand CSS properties (such as margin, background, border) that are not supported.

For Firefox, the solution involves:

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

The above code snippet will output 'rgba(207, 76, 53, 1)'

If you switch to using a ChromeDriver to retrieve the value, your existing code would yield 'rgb(207, 76, 53)'

To configure ChromeDriver, you may need to include this line before initializing your driver:

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

You can obtain the ChromeDriver by downloading it from this link http://chromedriver.storage.googleapis.com/index.html

Answer 4

Encountering a problem with element.getCssValue("border-color") while using a Firefox Driver is not uncommon. This issue arises from Shorthand CSS properties (such as margin, background, border) that are not supported.

For Firefox, the solution involves:

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

The above code snippet will output 'rgba(207, 76, 53, 1)'

If you switch to using a ChromeDriver to retrieve the value, your existing code would yield 'rgb(207, 76, 53)'

To configure ChromeDriver, you may need to include this line before initializing your driver:

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

You can obtain the ChromeDriver by downloading it from this link http://chromedriver.storage.googleapis.com/index.html

Retrieve the border color using Selenium WebDriver

Answer №1

Answer №2

Similar questions

What could be causing the issue where my Android device is unable to receive string messages from a Winsock C++

What is the best way to responsively center an after pseudo-element above its parent?

CSS Animation: Smoothly transition out of a class

Issues with JQuery OnClick Function Detected

Having difficulty accessing object property using Chunk Template Engine

Error encountered: Unrecognized media in CSS validation and parsing issue

The input field within the mat-form has been styled to match the background of the page using CSS

"Create sleek and stylish forms with Bootstrap's horizontal

Is organizing a table into separate sections helpful?

What is the method of communication between Selenium RC and the browser?

Utilize Bootstrap columns to maximize vertical space efficiency

Material UI Card shadow effect getting cropped

What steps should I take to address a situation in which a Protractor test becomes stuck indefinitely?

Height specification in Tailwind Grid

"Discovering the Selenium version using the webdriver: A step-by-step

moving the symbol across the badge

modify the appearance of HTML controls in real time with C#

Is it possible to bind browser keyboard scrolling to a div without explicit instructions?

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

What is the process for invoking a Java function in Android from JavaScript when using Vue?