Method 2: getCssValue() : What, When and How to use?

Hello Folks,

In last post, we have seen about getAttribute(). In this post we will learn about getCssValue() method. This post covers:

1. What is getCssValue() method?
2. Why we use getCssValue() method?
3. How to use getCssValue() method?
4. What is difference between getAttribute() and getCssValue() methods.

Let’s start with basics.

What is CSS:

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. It describes how HTML elements are to be displayed on screen, paper, or in other media. It describes look and feel of HTML elements(font size, width, height etc) i.e. how should it be displayed. It provides special and easy ways to specify various properties to HTML element. We can specify several style properties for a HTML element.

Example: 

Hey, There!!

In above example, “style” attribute is way of declaring CSS properties of any HTML element. Each attribute has a name and a value, separated by a colon (:). Each property declaration is  separated by a semi-colon (;). In above example, bold texts are CSS properties. For more details read my old post here.

Why we need getCssValue() method?

By using getAttribute() method we can retrieve value of attributes which are written as:

attributeName=”attributeValue”

So, getAttribute() can give you all css properties defined for html element at once but not individually. For example, if you want to retrieve only font size or color, you can not retrieve through getAttribute() method.

Take example of Search box available on Google:

CSS properties are defined from Styles pan as well. To understand how CSS properties are defined, refer this link.

JAVA program to retrieve all CSS properties through getAttribute() method:

package MakeSeleniumEasy;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class GetCSSAttribute {

        public static void main(String[] args) {
                
                System.setProperty("webdriver.chrome.driver", "./exefiles/chromedriver.exe");
                WebDriver driver= new ChromeDriver();
                driver.manage().window().maximize();
                driver.get("https://www.google.com");
                WebElement searchTextBox= driver.findElement(By.id("lst-ib"));
                String allCssProperties= searchTextBox.getAttribute("style");
                System.out.println("CSS Properties: "+allCssProperties);

        }
}

Output:
CSS Properties: border: none; padding: 0px; margin: 0px; height: auto; width: 100%; background: url(“data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D”) transparent; position: absolute; z-index: 6; left: 0px; outline: none;

But if you want to retrieve value of particular CSS property, you need to use getCssValue() method.

What is getCssValue() method?

It gets the value of a given CSS property.

Syntax:

java.lang.String getCssValue(java.lang.String propertyName)

There are predefined CSS properties which you can see here.

Note:

1. Color values should be returned as rgba strings, so, for example if the “background-color” property is set as “green” in the HTML source, the returned value will be “rgba(0, 255, 0, 1)”.
2. Shorthand CSS properties (e.g. background, font, border, border-top, margin, margin-top, padding, padding-top, list-style, outline, pause, cue) are not returned, in accordance with the DOM CSS2 specification .You should directly access the longhand properties (e.g. background-color) to access the desired values.

How to use getCssValue() method?

We can use getCssValue() method by passing longhand css property name.

JAVA CODE:

package MakeSeleniumEasy;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class GetCSSAttribute {

        public static void main(String[] args) {
                
                System.setProperty("webdriver.chrome.driver", "./exefiles/chromedriver.exe");
                WebDriver driver= new ChromeDriver();
                driver.manage().window().maximize();
                driver.get("https://www.google.com");
                WebElement searchTextBox= driver.findElement(By.id("lst-ib"));
                String color= searchTextBox.getCssValue("background-color");
                System.out.println("Color is : "+color);
                String font= searchTextBox.getCssValue("font-size");
                System.out.println("Font is : "+font);
                driver.quit();
                
                
                

        }
}

Output: Color is : rgba(255, 255, 255, 1)

Font is : 16px