Get Css values using Webdriver

When ever we are testing the applications, we may require css value of the element. Say now we need to check the scenario of a button color/state getting changed or not when we do mouse hover.

To check this, we can check the css values that are changing when we perform mouse hover on the element.

Now let us take an example of ‘Google Search’ button in google home page.

In the below example, ‘getCssValue_ButtonColor’ test, we are getting the button color before mouse hover and after mouse hover. When we get the color value, it will always return color in ‘ RGB (Red, Green and Blue). These values ranges from 0 to 255 gives a total of more than 16 million different colors with (256 x 256 x 256). You can check different color mixes here

Below image shows the css values for the ‘Google Search’ button
css values webdriver

In ‘getCssValue_ButtonFontSize’ test, we are getting the button font size which will return ’11px’. And

In ‘getCssValue_ButtonFontWeight’ test, we are getting the font-weight of the button. It will return 400 for font-weight : normal, and 700 for font-weight : bold. Numeric font weights for fonts that provide more than normal and bold. You can find more details Numeric fonts here.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

public class GetCssValues {

public WebDriver driver;
private By bySearchButton = By.name(“btnK”);

@BeforeClass
public void setUp() {
driver = new FirefoxDriver();
driver.get(“http://www.google.com”);
}

@Test(priority=1)
public void getCssValue_ButtonColor() {
WebElement googleSearchBtn = driver.findElement(bySearchButton);
System.out.println(“Color of a button before mouse hover: ” + googleSearchBtn.getCssValue(“color”));
Actions action = new Actions(driver);
action.moveToElement(googleSearchBtn).perform();
System.out.println(“Color of a button after mouse hover : ” + googleSearchBtn.getCssValue(“color”));
}

@Test(priority=2)
public void getCssValue_ButtonFontSize() {
WebElement googleSearchBtn = driver.findElement(bySearchButton);
System.out.println(“Font Size of a button ” + googleSearchBtn.getCssValue(“font-size”));
}

@Test(priority=3)
public void getCssValue_ButtonFontWeight(){
WebElement googleSearchBtn = driver.findElement(bySearchButton);
System.out.println(“Font Weight of a button ” +getFontWeight(googleSearchBtn) );
}

public String getFontWeight(WebElement element) {
//Output will return as 400 for font-weight : normal, and 700 for font-weight : bold
return element.getCssValue(“font-weight”);
}

@AfterClass
public void tearDown() {
driver.quit();
}
}
The output will come as below:

Color of a button before mouse hover: rgba(68, 68, 68, 1)
Color of a button after mouse hover : rgba(34, 34, 34, 1)
Font Size of a button 11px
Font Weight of a button 700
PASSED: getCssValue_ButtonColor
PASSED: getCssValue_ButtonFontSize
PASSED: getCssValue_ButtonFontWeight

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s