CSS Selectors

Introduction

In this article, we will learn about how to write CSS Selectors for the web elements in the webpage.

CSS Selector

A CSS selector is a pattern or rule that is used to select specific HTML elements on a web page. It allows you to target and apply styles or perform actions on those selected elements. CSS selectors play a crucial role in determining which elements should be affected by a particular set of styles.

Selectors are used in CSS rules to define how certain elements should be styled. The selector portion of a CSS rule identifies the HTML elements to which the styles should be applied.

p {
  color: blue;
}

In automation testing, we can locate elements using 8 locators

  • Id
  • Link Text
  • Partial Link Text
  • Xpath
  • Classname
  • Name
  • CSS selector
  • Tagname

Advantages of Using CSS Selector

  • Faster than XPath.
  • Much easier to learn and implement.
  • Compatible with most browsers to date.

The disadvantage of CSS Selector

We can navigate from child to parent and parent to child using XPath. But we can only navigate from parent to child by using CSS Selectors.

We are going to understand the different ways we can write css selectors for a particular web element.

1. If a webelement contains an id attribute, use # followed by idattribute.

CSS Selector syntax

#idattribute

Example

#password

2. If a webelement contains an id attribute, use a dot followed by classname.

CSS Selector syntax

.classname

Example

.finalResult

3.We can write with combination of tagname plus id and tagname pluss classname

CSS Selector syntax

tagname#id

tagname.classname

Example

input#test

input.form-control

4. If the webelement contains multiple classname, then put a dot between each classname.

CSS Selector syntax

.classnameone.classnametwo

Example

.test-form.bottom.finalresult

We can also use tagname infront of them.

CSS Selector syntax

tagname.classnameone.classnametwo

Example

input.test-form.bottom

5. A combination of id and classname

CSS Selector syntax

tagname#id.classname

tagname#id.classnameone.classnametwo

6. We can write css selectors with syntax attributed to their attributevalue.

CSS Selector syntax

tagname[attributename='attributevalue']

Example

input[id='password']

If the webelement has two attributes.

CSS Selector syntax

tagname[attributename='attributevalue'][attributename='attributevalue']

Example

input[id='password'][name='testing']

7. contains: if the part of the id or classname changes, then use *

CSS Selector syntax

input[id*='pass']

8. starts: If the classname or id starts with value, then use ^; we dont need to specify the full classname or id if you use to start.

CSS Selector syntax

input[id^='pass']

input[class^='form']

9. if you want to write css with the ending value of classname or id, then use the $ sign.

CSS Selector syntax

input[class$='form']

input[class$='m-bottom-3']

input[id$='m-bottom-3']

10. first of type: The:first-of-type CSS pseudo-class selector allows you to target the first element of a specific type within its parent container.

Example: selects the first li element

ul>li:first-of-type

11. last of type: The :last-of-type CSS pseudo-class selector allows you to target the last element of a specific type within its parent container.

Example: selects the last li element

ul>li:last-of-type

12. nth of type: The :nth-of-type() CSS pseudo-class selector allows you to target elements based on their position within a parent container,

Example: selects the third li element.

ul>li:nth-of-type(3)

13. Sibling selectors are used to select elements based on their relationship to other elements within the same parent container.

  • Adjacent Sibling Selector (+): Selects the element immediately following another specific element.
    • Example: h2 + p
  • General Sibling Selector (~): Selects all elements that follow a specific element, not necessarily immediately.
    • Example: h2 ~ p
  • Adjacent Sibling Combinator (>): Selects direct children that immediately follow a specific parent element.
    • Example: div > p

Summary

I hope this article will be helpful in understanding how to write css selectors for the webelements in the webpage while you are working on Test Automation.

Thanks, Happy learning.