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:
Locate Locator Value:
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 Syntax
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: