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.
- General Sibling Selector (~): Selects all elements that follow a specific element, not necessarily immediately.
- Adjacent Sibling Combinator (>): Selects direct children that immediately follow a specific parent element.
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.