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