CSS Selector in Selenium

Basically, the CSS Selector joins a component selector and selector esteem that can distinguish specific components on a site page. Like XPath, a CSS selector can be utilized to find web components without ID, class, or Name.

Type of CSS Selector

Below are the five different types of a CSS selector.

1) ID: In this CSS selector id attribute is used to select elements in DOM.

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

For example: ul#primary-menu-single

Here UI is tag and it has id(primary-menu-single)

ID Css Selector

2) Class: In this CSS selector class attribute is used to select elements in DOM.

Syntax css=<HTML tag><.><Value of class attribute>

For example: i.fab.fa-facebook-f

Here i is HTML Tag , fab.fa-facebook-f value of class

Class - Css Selector

3) Attribute: In this CSS selector attribute is used to select elements in DOM.

Syntax css=<HTML tag><[attribute=Value of attribute]>

For example: input[type=submit]

Here the input is HTML Tag, type is an attribute, and submit is value.

Attribute - css selector

4) Substring: In Selenium, CSS permits the matching of a halfway string which, offers a method for making CSS selectors using sub-strings. This should be possible in three ways.

  • Match a prefix
  • Matching a suffix
  • Matching a substring

Match a Prefix: The reason for this is to relate to the string by utilizing a matching prefix.

Syntax: css=<HTML tag><[attribute^=prefix of the string]>

For example: input[name^=’your’]

Here the input is HTML Tag, name attributes and ‘your’ is the prefix value of the string.

Substring - css selector

Match a Suffix: The reason for this is to relate to the string by utilizing a matching suffix.

Syntax: css=<HTML tag><[attribute$=suffix of the string]>

For example: input[name$=’your’]

Here the input is HTML Tag, name is attribute and ‘your’ is the suffix value of the string.

Suffix - css selector

Match a Substring: The motivation behind this is to compare to the string by utilizing a matching substring.

Syntax: css=<HTML tag><[attribute*=sub string]>

For example: input[name*=’your’]

Here the input is HTML Tag, name is attribute and ‘your’ is the substring value of the string.

Match a substring - css selector

5) Inner Text: Utilizing inner text distinguishes and makes CSS Selectors in Selenium WebDriver by using a string design that the HTML Tag appears on the site page. This instrument is utilized most often to find web components by virtue of its improved sentence structure.

Syntax: css=<HTML tag><:><contains><(text)>

Basic Commands

1) Absolute Path CSS Selector: In this selector (>) sign is used to reach til element.

For example:

Example: form>div>div>span>input locate form first element.

Absolute Path CSS Selector

2) Non-Absolute Path CSS Selector: This white space between tags can be used to reach the till element.

Example: form .col-sm-6 locate form first element.

Non Absolute path css selector

3) Tag Name CSS Selector:

In this tag, a name can be used to locate elements on a Web page.

Example: form can locate the form on a web page
Tag Name CSS Selector

4) Containing Text of attribute: This attribute value can be used to locate elements on a web page.

Example: input[type=submit] locate submit element on page
Containing Text of attribute

5) Starting text of Attribute: In this starting text attribute value is used to locate elements on a web page.

Example: input[name^=’your’] is used to locate Name textbox on web page.

Starting text of Attribute

Read Also:

1) Locators in Selenium Webdriver

2) Selenium 4 Relative Locators

3) Selenium 4 features

4) Selenium 3 Vs Selenium 4 – Difference

Pallavi Singh

Pallavi works as a QA Automation Engineer at QACraft. She is a computer science engineer with a degree and has 4+ years of experience in Manual testing as well as Automation testing. In her free time, she loves to dance.

https://qacraft.com/author/pallavi-singh/