To get css values of any locator, we will create java script function with the use of “getDefaultComputedStyle”function. We will execute java script function using webdriver and fetch css properties value.
getDefaultComputedStyle () gives default computed value of all css properties of an element.
Here I have created a sample example in which I am verifying Google home page menu bar css properties color, height and width.
package
com.test;
import
java.util.concurrent.TimeUnit;
import
org.openqa.selenium.JavascriptExecutor;
import
org.openqa.selenium.WebDriver;
import
org.openqa.selenium.firefox.FirefoxDriver;
import
org.testng.Assert;
import
org.testng.annotations.AfterSuite;
import
org.testng.annotations.BeforeSuite;
import
org.testng.annotations.Test;
public class
WebdriverCSSValue {
private WebDriver driver;
private String baseUrl;
@BeforeSuite
public void setUp() throws Exception {
driver = new FirefoxDriver();
baseUrl =
"https://www.google.co.in/";
driver.manage().timeouts().implicitlyWait(30,
TimeUnit.SECONDS);
}
@Test
public void testCSSvalueVerifying() {
driver.get(baseUrl +
"/");
// js scripts
String js = "return
window.document.defaultView.getComputedStyle(" +
"window.document.getElementById('gbx3'))";
String jsColor =
js+".getPropertyValue('color')";
String jsHeight =
js+".getPropertyValue('height')";
String jswidth =
js+".getPropertyValue('width')";
// execution of js scripts to
fetch css values
JavascriptExecutor jsexecuter =
(JavascriptExecutor) driver;
String color = (String)
jsexecuter.executeScript(jsColor);
String height = (String)
jsexecuter.executeScript(jsHeight);
String width = (String)
jsexecuter.executeScript(jswidth);
//assertion
Assert.assertTrue(color.equals("rgb(34,
34, 34)"));
Assert.assertTrue(width.equals("986px"));
Assert.assertTrue(height.equals("29px"));
// print css values
System.out.println(color);
System.out.println(height);
System.out.println(width);
}
@AfterSuite
public void tearDown() throws Exception {
driver.quit();
}