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/p/demo1.html");
 WebElement search = driver.findElement(By.id("alert"));
 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"));
   }
}

OutPut:

Font Weight 700
Font Size 12px
Text Color rgba(82, 120, 129, 1)
Width: 83px
Height: 29px

Note: Font Weight 700 means Bold text