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: <p style=”color:green;font-size:24px;“>Hey, There!!</p>

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

Note: This post is also covering frequently asked interview question ,”What is difference between getAttribute() and getCssValue() method?”. Hope, you will be able to answer this question.

That’s it guys. Hope you have enjoyed reading this post. For any queries, doubt please comment.

If you like my posts, kindly like, share, subscribe and comment. Feedback and suggestions are always welcomed.

#HappyLearning

 

8 thoughts on “Method 2: getCssValue() : What, When and How to use?

  1. Hi, i have a query regarding locating element using css property. I have some screenshots and there is no option to upload them here. Need your email or you can send me a test mail.

  2. Thanks was able to implement it successfully. Some of the attributes gives different values

    height: auto; width: 100%;

    if we take the value of height & width , instead of auto, it gives us the actual height

    height = 34px
    width = 403px

    what if we want original values to be printed auto and 100%

    1. auto is default values calculated by browser based on screen size, window size etc. You will be getting style pan in developer tool. Refer that.

Leave a Reply to Amod Mahajan Cancel reply

Your email address will not be published. Required fields are marked *