How to use CSS Selector to locate web elements in Cypress Scripts:

CSS Stands for Cascading Style Sheets. It is basically a stylesheet wherein you can define how your HTML elements are going to look on-screen. You can change the position, colour, margin, padding and many other properties of your HTML elements.

CSS Selector:

Selectors are used to identifying the element that you want to locate on a web page from all the other HTML elements.

Various Types of Selectors:

• ID
• Class
• Attribute
• Sub-String
• Inner-Text

1. Creating CSS selector with Id:

Let's see the picture below:

HTML <label id="password">Password</label>, It has Id = password which means id is password and to create CSS selector out of it, we need to provide # in front of the value which we have gotten that is #password.

and to access it in cypress, we will state this as cy.get('#password').type('pass')

2. Creating CSS selector with Class:

In this example, the script will access the first name checkbox that appears below the login form:

Here, HTML is <label class="firstName">First name</label>. It has class as firstName and to create CSS selector we need to provide .(a period) in front of the value we have gotten that is .firstName

and to access it in cypress, we have to state this as cy.get('.firstName').type('Mandy')

3. Attribute

The syntax to define css attribute selector is : tagName[attribute='value']

Here , HTML is <input type="email" placeholder="eg., [email protected]">

It has type as email and to create CSS selector we need to provide the above syntax as input[type = 'email']

and to access it in cypress, we simply say cy.get("input[type='email']").type('[email protected]')

4. Sub-String

Create a CSS selector for dynamic elements and attribute values. It allows the matching of a partial strings, strings begin and end text.

• [attribute*=value] input[type*='mail']

Selects every <input> element whose type attribute value contains the substring "email", this will partially select the text.

• [attribute^=value] input[type^='pass']

Selects every <input> element whose type attribute value starts with "pass"

• [attribute$=value]. input[type$='word']

Selects every <input> element whose type attribute value ends with "word". Highlighting the value as the password

5. Inner Text

Using inner text helps identify and create CSS Selectors by utilizing a string pattern that the HTML Tag display on the web page. HTML labels are sometimes don't have given id, name, or class attributes. So, how do we fetch them?

Syntax : tag:contains("inner text")

and in cypress this goes as cy.get("button:contains('Submit')")

We can even use chain filters to be more specific with our selectors.

input[type='email'][placeholder='eg.,[email protected]'] and this certainly highlighting the email type box.

Let's try some other ways to create a CSS Selector:

• tag#id : input#password : cy.get(input#password)
• tag.class : input.firstName
• Cascading Classes : Class class = .class.class

Next Sibling:

This is useful for navigating lists of elements, such as forms or ul items.

.lastName + input

It will find the next adjacent element on the page that’s inside the same parent.

HTML as below:

<label class="lastName">Last name</label>

<input type="text" placeholder="eg., Smith">

It will highlight the type box, placeholder e.g, Smith

Choosing a Specific Match with nth-child

<ul id = "testCypress">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>

Now to select the third li element in this list, we can write like this :

#testCypress li::nth-child(3)

Gauging up, providing the selector list to explore all kind of selectors and create beautiful customised selectors out of it :