Automation TestingCypressSeleniumTesting

Selenium tips and tricks for CSS selector.

selenium tips for css selector

This page explains some useful tips on CSS selector and some example code will help you to understand how to make CSS path locator.

It will be more easy to understand if we will compare XPATH with CSS selector:

DIRECT CHILD

Direct child in XPATH is defined by ” / “ and in CSS is ” > “ and these expressions search for the immediate child node it is also known as Absolute path.

SUBCHILD

Subchild in XPATH is defined by ” // “ and in CSS is just by white space ” “ . these expressions search for immediate and next level child nodes it is also known as Relative path.

ID

An element’s id in XPATH is defined by using “[@id=’xyz’]” and in CSS is ” # “ but id should be unique in DOM.

CLASS

An element class is more similar to element id an element’s class in XPATH is defined by using “[@class=’xyz’]” and in CSS is just by ” . “

NEXT SIBLING

This is one of the useful element selection way. This will tell the selenium or any other automation tool to find the next adjacent element on the page that is inside the same parent.

Sample code

Now write the CSS selector and XPATH for above code.

ATTRIBUTE VALUE

Before moving to attribute value first you must know what is attribute.

From above code name=”log” where name is attribute same as in second line code where name=”pwd” where name is attribute.

From above code we can easily select the “log” element without using class, id of the element.

We can use more attribute to filter element.

Here we are using and expression, for AND operator both conditions should be true to find the element.

SPECIFIC POSITION

XPATH and CSS both are allowed to move direct specific position in DOM.

If we want to select the third li element (tata) in this list, we can use the nth-of-type, which will find the third li in the list.

On the other hand, if we want to get the third element only if it is a li element, we can use a filtered nth-child which will select (tata) in this case.

If u don’t specify a child type (either it is a li,tr,td etc) than you can find the element using * sing.

SUB-STRING MATCHES

CSS has some very good feature of allowing partial string matches using ^=, $=, or *=. let’s see the magic of it with example of each:

^= Match a prefix

Attribute Begins with Selector

It selects an element based on what an attribute value begins with.

$= Match a suffix

Attribute Ends with Selector

The ends with attribute selector uses the dollar sign $. Using the dollar sign denotes that the attribute value needs to end with the stated value.

*= Match a substring

Attribute Contains Selector

When looking to find an element based on part of an attribute value, but not an exact match, the asterisk character, *, may be used within the square brackets of a selector. 

~= Match a substring

Attribute Spaced Selector

In this values may be spaced separated, in which only one of the words needs to be matched in order to make a selection.

|= Match a substring

Attribute Hyphenated Selector

Leave a reply

Your email address will not be published. Required fields are marked *