Identifying Web Elements using CSS Selector in Selenium Scripts

 

Introduction:

In this series of Selenium tutorial we had already discussed about Selenium Commands, Selenese, Responsibilities of a Selenium Tester, as a continuation this part explains about Identifying Web Elements using CSS Selectors in Selenium Scripts.

Learn Selenium from Experts

Do follow all these Free Selenium Tutorials and Training for detailed understanding

CSS Selector in Selenium Scripts

CSS Selector as a Locator:

  • CSS Selector is used to identify the web elements in a web page.

How it works?

Actually this CSS Selector is a combination of both element selector and selector value which is used to identify the web elements.

This combination of element selector and selector value is also know as Selector Pattern.

Primitive types of CSS Selectors:

          The Primitive types of CSS Selectors that we going to discuss here is as follows,

  • CSS Selector: ID
  • CSS Selector: Class
  • CSS Selector: Attribute
  • CSS Selector: ID/Class Attribute
  • CSS Selector: Sub-string
  • CSS Selector: Inner Text

CSS Selector: ID

Email Text Box: Here is an sample about accessing the Gmail.com Email Text box,

The ID attribute and the value in the text box is used to create the CSS Selector.

Locate Inspect Web Element:

CSS Selector in Selenium Scripts

Locate Locator Value:

CSS Selector in Selenium Scripts

 

Note down the Syntax here:

  • css=<HTML tag><#><Value of ID attribute>

    CSS Selector: Class

          In this case let’s move on to signed in check box which is present in gmail.com

It consists of a Class attribute and the value, These two together combines to form a web element.

It works the same as the Class ID where the difference lies in SyntaxCSS Selector in Selenium Scripts

Note down the Syntax here:

  • css=<HTML tag><.><Value of Class attribute>

 

The remaining CSS Selectors will be explained in the Upcoming article.

Most Viewed Selenium Tutorial: