1. What is Selenium CSS Selector?

It is one of the locators in selenium using which we identify web elements on the web page. CSS stands for Cascading Style Sheets, which is used for styling the different elements of an HTML webpage. CSS Selector locator is always the best way to locate elements on the web page. CSS is always the same irrespective of browsers.

2. Benefits of CSS Selector

  • It is faster compared to other selectors
  • More readable
  • Most offenly used

3. Syntax of CSS Selector

 

CSS Selector Syntax

  • HTML Tag: It is the tag used to denote the web element.
  • #: The # sign is used to symbolize the ID attribute. It is mandatory to use the # sign when using ID attribute.
  • Value of ID attribute: It is the value of an ID attribute which is being accessed. The value of ID attribute is always preceded by a # sign.

4. Commonly used CSS Selector Formats

Below are some of the mainly used formats of CSS Selectors.

  • Tag and ID
  • Tag and Class
  • Tag and Attribute
  • Tag, Class, and Attribute
  • Sub-String Matches
    • Starts With (^)
    • Ends With ($)
    • Contains (*)
  • Child Elements
    • Direct Child
    • Sub-child
    • nth-child

4.1) HTML Tag and ID

Example:

    1. Open Chrome browser and navigate to Gmail web application.
    2. Right-click Email or phone input box and select Inspect.

 

Email Inspect

    1. Below screenshot shows Tag and ID of Email or phone element.

Value to be added in the By.cssSelector method:

4.2) HTML Tag and Class

If multiple elements have same HTML tag and class, then selenium will recognize first one.

Syntax: css=tag.class

Example:

    1. Open Chrome browser and navigate to Facebook application.
    2. Right-click Email or phone input box and select Inspect.

 

Email Inspect Facebook

    1. Below screenshot shows Tag and Class of Email or phone element.

Value to be added in the By.cssSelector method:

4.3) HTML Tag and Attribute

If multiple elements have the same HTML tag and attribute, then selenium will recognize the first one.

Syntax:

Example:

    1. Open Chrome browser and navigate to Gmail application.
    2. Right-click Email or phone input box and select Inspect.

Inspect Email CSS

    1. Below screenshot shows Tag and Attribute of Email or phone element.

Value to be added in the By.cssSelector method:

4.4) HTML Tag, Class and Attribute

Syntax:

Example:

    1. Open Chrome browser and navigate to Facebook application.
    2. Right-click Email or phone input box and select Inspect.
    3. Below screenshot shows Tag, Class, and Attribute of Email or phone element.

 

Email Attribute

Value to be added in the By.cssSelector method:

5. Substring Matches

There are some special CSS selectors to match partial values of the attributes like ^, $, and *.

5.1) Starts with (^)

In order to select the element that starts with something, we use ^ which means ‘starts with’.

Syntax:

Value to be added in the By.cssSelector method:

In the script add the below step to find the element and write a text as “journaldev”

5.2) Ends with ($)

In order to select the element that ends with something, we use $ which means ‘ends with’.

Syntax:

Value to be added in the By.cssSelector method:

5.3) Contains (*)

In order to select the element that contains a substring, we use * which means ‘sub-string’.

Syntax:

Example:

We can also use the contains() method.

6. Locating Child Elements (Direct Child)

Syntax: parentLocator>childLocator

Example:

For the Sample HTML:

CSS Locator: div#buttonDiv>button

Description: ‘div#buttonDiv>button’ will first go to div element with id ‘buttonDiv’ and then it will select its child element – ‘button’.

7. Locating elements inside other elements (child or sub-child)

Syntax: parentLocator>locator1 locator2

CSS Locator: div#buttonDiv button

Description: ‘div#buttonDiv button’ will go first to div element with id ‘buttonDiv’ and then it will select ‘button’ element inside it (which may be its child or sub child).

8. Locating nth Child

Example:

For the Sample HTML:

CSS Locator: #testingTypes li:nth-child(2)

Description:: ‘#testingTypes li:nth-child(2)’ will select the element with id ‘testingTypes’ and then locate the 2nd child of type li i.e. ‘Security Testing’ list item.

9. Conclusion

Selenium CSS Selector is one of the most frequently used strategies to locate web element because of its simplified syntax.

By admin

Leave a Reply

%d bloggers like this: