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
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
Comments
Nice tutorial. Really helpful
Nice tutorial. Really helpful.
Get Css values using Webdriver
But i want the color name text what are possible ways to get color name
Add new comment