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:

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:

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

 

Author: Amod Mahajan

My name is Amod Mahajan and I am an IT employee with 4+ years of experience in Software testing and staying in Bengaluru. My area of interest is Automation testing. I started from basics and went throw so many selenium tutorials. Thanks to Mukesh Otwani as his tutorials are easy and cover basics to advance. I have habit of exploring concepts by deep diving. I used to make notes. I thought of sharing my knowledge through posts and now I am here. #KeepLearning #ShareLearning