Inspect Styling with getCssValue()

Retrieve computed CSS properties like color, font-size, and background.

Concept

In Selenium, locators find the element, and getCssValue() tells you how that element is styled on screen.

getCssValue(propertyName) returns the computed CSS value of a WebElement after all styles are applied.

What it does

getCssValue("background-color") → Returns final color as rgba(...)
getCssValue("font-size") → Returns size like "16px"
getCssValue("display") → Returns layout value

When to use it

Validate visual states (error → red)
Verify disabled states (button → grey)
Check visibility logic via styling

Best-practice notes

Colors return as rgba(), not hex
Focus on business-critical styles
Use for behavioral checks, not full visual regression

Interactive Practice

Practice Area

Elements:

Primary Button: id="style-btn" (blue background, white text)
Inspect Button: id="inspect-css" (shows computed CSS values)

Click "Inspect CSS" to see the computed values that Selenium would read!

How a student would interact manually

Look at the Styled Button and guess its color and font size.
Click Inspect CSS to reveal what the browser computes.
Compare: Does the actual color match the design spec?

Java Code Example

GetCssValue.java

1
2
3
4
5
6
7
8
9
WebElement button = driver.findElement(By.id("style-btn"));

String bgColor = button.getCssValue("background-color");
System.out.println("Background: " + bgColor);

String fontSize = button.getCssValue("font-size");
System.out.println("Font Size: " + fontSize);

driver.quit();

Code Breakdown

driver.findElement(By.id("style-btn")): Locates the Styled Button using its id attribute.
button.getCssValue("background-color"): Reads the computed background color, typically returned as "rgba(37, 99, 235, 1)".
button.getCssValue("font-size"): Reads the font size currently applied to the button (e.g. "16px").

Pro Tip

Expect RGBA

Even if CSS uses hex, Selenium returns rgba(). Compare logically, not by exact string match.

Don't over-assert styling

Focus on checks that reflect a state (error vs success) rather than every cosmetic detail.

Keep locators simple

Use id for styling checks instead of complex CSS/XPath.