Get the css value of an web element using selenium

GUI testing is the basic validation we do mostly in browser applications…
this may be the text font, text size, text color, background color, placements like margin / padding,
These all above attributes for a web element, mostly we combine it in a file called *.css

Selenium has the flexibility to get the css styling of a particular web element, so we can compare the same thing in different browsers to make sure it is same everywhere.

Let’s see how we can get the css style of a web element.

For an example, let’s take a text box with the following css values and then we will get their values using code:

package testPkg;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class CssValue {

public static void main(String[] args) {
 WebDriver driver = new FirefoxDriver();
 driver.get("http://www.qavalidation.com/demo");
 WebElement search = driver.findElement(By.id("username"));

 System.out.println("Font Weight "+search.getCssValue("font-weight"));
 System.out.println("Font Size "+search.getCssValue("font-size"));
 System.out.println("Text Color "+search.getCssValue("color"));
 System.out.println("Width: "+search.getCssValue("width"));
 System.out.println("Height: "+search.getCssValue("height"));
   }
}

Font Weight 400
Font Size 14px
Text Color rgba(119, 119, 119)
Width: 168px
Height: 36px