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

Encountered a hiccup when trying to operate Appium through the Windows command

What is the best way to apply CSS hover effects to specific cells within a table?

Guide on making a persistent sidebar using CSS and JavaScript

I am encountering an issue while developing a JavaScript filtering system

The JavaScript and CSS properties are not functioning properly with the HTML text field

Determining the height of a Bootstrap column in relation to another element

encountered net::ERR_EMPTY_RESPONSE while attempting to locate a CSS file within an AngularJS directive

Testing the functionality of an Android application through the use of the Selenium

Troubleshooting Problems with Adjusting Left Margin Using JQuery

What steps can I take to resolve the TypeError in next js where I am unable to set properties of undefined for 'className'?

Enhancing Test Automation Efficiency with Python and Selenium: Executing Tests Concurrently

Tips for choosing an attribute within a list with a CSS selector and Selenium

Accordion Element using HTML and CSS

Alter the color of the text within the `<li>` element when it is clicked on

What is the best way to choose all initial elements within a single row using CSS?

Tips for creating the appearance of a resizable element

The mysterious behavior of CSS3 transforms on intricate rotations

The website lacks accessibility features such as a text size swapper, but the contrast swapper is not functioning properly

Python tutorial: Extracting data from dynamic charts using Selenium and BeautifulSoup

Scroll to the end of the main div's horizontal position instead of using offset().left