Writing Selenium CSS Selectors for object locating alone cannot improve script execution performance. Additionally you need to write performant CSS Selectors. Copying and pasting CSS Selectors that are suggested by any plugin or browser is not a right approach. You should be able to construct your own CSS Selectors or should possess strong knowledge of auto generated selectors.
In this blog article, you will learn the basics of Selenium CSS Selectors. If you are familiar with XPath and CSS Selector construction on your own, then creating robust automated test suite will be a cake walk.
By ID
If you have ID for an element on which you are going to perform action, then you can go with ID selector instead of CSS Selector. However, if you want to identify parent node in the CSS Selector, then you should be familiar with selecting an element using ID.
HTML
<input type=”text” id=”txt1″/>
Selector
#txt1
Direct Child
You can use the below CSS Selector to select a direct child under a parent node.
HTML
<div>
<input type=”text” />
</div>
Selector
div>input
Adjacent Sibling
Once you select a node, you can also jump to an adjacent sibling using the below selector.
Selector
div > input + input
Starts With
Using starts with to match attribute value.
HTML
<input type=”text” id=”txt4″ class=”textbox-st”/>
Selector
input[class^=’text’]
Sub String Match
Matching a sub string in an attribute value.
HTML
<input type=”text” id=”txt4″ class=”textbox-st”/>
Selector
input[class*=’box’]
Ends With
Using ends with to match attribute value.
HTML
<input type=”text” id=”txt4″ class=”textbox-st”/>
Selector
div>input[class$=’st’]
nth-child
Selecting an element using its index
Selector
tr:nth-child(4)
In Conclusion
Basics of Selenium CSS Selector and XPath is a mandatory skill for a test automation engineer. As a software testing services provider, we train all our new recruits on object locating techniques. When your team is well versed in XPath & CSS Selector, they will be able to produce robust test automation suites.
Comments(0)