getCssValue() method in Selenium Java with Examples

getCssValue() is used to get the value of the CSS properties like color, font-size etc. This post will discuss the getCssValue() method of the WebElement interface in detail.

  • Method declaration – String getCssValue(String propertyName)
  • What does it do? It will return the value of the CSS property passed in the argument.
    • One catch here is that color values would be returned as RGBA strings. E.g. If “background-color” property is set as “green” in the HTML source, then getCssValue(“background-color”) would return rgba(0, 255, 0, 1) instead of “green“.
Code Example

We will get the font-weight CSS property of one of the labels on this page. As we can see, the font-weight property value is 700 and now let’s see whether the getCssValue() method gives us the same value or not.

button lable css property
public class CodekruTest {

	@Test
	public void test() {

		// pass the path of the chromedriver location in the second argument
		System.setProperty("webdriver.chrome.driver", "/usr/local/bin/chromedriver");
		WebDriver driver = new ChromeDriver();

		// opening the url
		driver.get("https://testkru.com/Elements/Buttons");

		WebElement element = driver.findElement(By.id("leftClickButtonLabel"));
		System.out.println("Value of font-weight css property: " + element.getCssValue("font-weight"));
	}
}

Output –

Value of font-weight css property: 700

We got the font-weight CSS property value as 700.

Getting color of an element using getCssValue() method

Now, let’s try getting the color and background-color property of a button present on the same page. We will get color in RGBA strings instead of the color name or HEX values. The below example will further clarify things.

Actual button css property
public class CodekruTest {

	@Test
	public void test() {

		// pass the path of the chromedriver location in the second argument
		System.setProperty("webdriver.chrome.driver", "/usr/local/bin/chromedriver");
		WebDriver driver = new ChromeDriver();

		// opening the url
		driver.get("https://testkru.com/Elements/Buttons");

		WebElement element = driver.findElement(By.id("leftClick"));
		System.out.println("Value of color css property: " + element.getCssValue("color"));
		System.out.println("Value of background-color css property: " + element.getCssValue("background-color"));
	}
}

Output –

Value of color css property: rgba(0, 0, 0, 1)
Value of background-color css property: rgba(255, 186, 0, 1)

We can see that we got the color value as rgba(0, 0, 0, 1) instead of the value black. So, this is how the getCssValue() function would behave in the case of color CSS properties.

The What If scenarios

Q- What if we use a CSS property that doesn’t exist?

If we use a CSS property that doesn’t exist for that element, then the getCssValue() method will return an empty string.

public class CodekruTest {

	@Test
	public void test() {

		// pass the path of the chromedriver location in the second argument
		System.setProperty("webdriver.chrome.driver", "C:\\Users\\MEHUL\\OneDrive\\Desktop\\chromedriver.exe");
		WebDriver driver = new ChromeDriver();

		// opening the url
		driver.get("https://testkru.com/Elements/Buttons");

		WebElement element = driver.findElement(By.id("leftClick"));
		System.out.println("Value of abc css property: " + element.getCssValue("abc"));
		System.out.println("Is it empty: "+element.getCssValue("abc").isEmpty());
	}
}

Output –

Value of abc css property: 
Is it empty: true
Q- What if we pass null as an argument in the getCssValue() method?

We will get a NullPointerException as illustrated by the below program.

public class CodekruTest {

	@Test
	public void test() {

		// pass the path of the chromedriver location in the second argument
		System.setProperty("webdriver.chrome.driver", "C:\\Users\\MEHUL\\OneDrive\\Desktop\\chromedriver.exe");
		WebDriver driver = new ChromeDriver();

		// opening the url
		driver.get("https://testkru.com/Elements/Buttons");

		WebElement element = driver.findElement(By.id("leftClick"));
		System.out.println("Value of null css property: " + element.getCssValue(null));
	}
}

Output –

java.lang.NullPointerException: null value in entry: propertyName=null
	at com.google.common.collect.CollectPreconditions.checkEntryNotNull(CollectPreconditions.java:32)
	at com.google.common.collect.ImmutableMap.entryOf(ImmutableMap.java:176)
	at com.google.common.collect.ImmutableMap.of(ImmutableMap.java:133)
	at org.openqa.selenium.remote.RemoteWebElement.getCssValue(RemoteWebElement.java:172)

Please visit this link to learn more about WebElement and its methods.

We hope that you have liked the article. If you have any doubts or concerns, please feel free to write us in the comments or mail us at [email protected]

Liked the article? Share this on

Leave a Comment

Your email address will not be published.