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.
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: 700We 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.
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: trueQ- 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 write to us in the comments or mail us at admin@codekru.com.