When we don't have an option to choose Id or Name, we should prefer using CSS locators as the best alternative. Show Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Visit to know more W3.Org Css selectors
Click here to view examples compared with xpath and css Syntax:
In CSS there are two special characters which has important role to play.1. dot(.) refers to class.
For example if the below is the html for a sign button
In the above html there are multiple classes used for the single button. How to work in such a situation???? The CSS class selector matches elements based on the contents of their class attribute. In the below example
The above can be written like below in selenium
Hash(#) refers to IdExample:
The above one can be re-written as
CSS locator Examples using ID and Class attributes /* below syntax will find "input" tag node which contains "id=email" attribute */
In selenium we can write it as
You can make use of Selenium IDE to verify if the identifier is working fine or not. If the element has identified, it will highlight the field and html code in Yellow color. Below syntax will find "input" tag which contains
Below is the syntax for using input Tag and class attribute: It will find input tag which contains "submitButton" class attribute.
Please find the below screen shot with example: Using CSS locators, we can also locate elements with sub-strings. Which are really help full when there are dynamically generated ids in webpage There are there important special characters in css selectors: CSS Locators for Sub-string matches(Start, end and containing text) in selenium
If you remove the symbol an try to find the element with same sub-string, it will display error as "locator not found". We can observe the error in the below screen shot. one with error and the other with success /*It will find input tag which contains 'id' attribute ending with 'ail' text. Email ends with 'mail' */
/* It will find input tag which contains 'id' attribute containing 'mai' text. Email contains 'mai' */
CSS Element locator using child Selectors /* First it will find Form tag following remaining path to locate child node.*/
CSS Element locator using adjacent selectors
CSS selector to select first element We can do this in two ways : - First using Let us see an example on this using html.
To select the first element with class 'red', css selector should be CSS selector to select last element Using
In the above example, if we want to select ' hello test example3', css selector should be How do I select CSS in Selenium?Type “css=input[type='submit']” (locator value) in Selenium IDE. Click on the Find Button. The “Sign in” button will be highlighted, verifying the locator value. Attribute: Used to create the CSS Selector.
What is limitation of CSS selector in Selenium?One of the major drawbacks of the CSS selectors in Selenium is traversing the DOM is not possible with CSS as that of XPath. We can navigate from child to parent and parent to child using XPath. But we can only navigate from parent to child by CSS Selectors in Selenium.
Should I use XPath or CSS selector?CSS selectors tend to perform better, faster, and more reliably than XPath in most browsers. They are much shorter and easier to read and understand.
Which is better XPath and CSS selector in Selenium?In terms of performance, css is better and faster, while xpath is on a slower side. An xpath can be of two types – absolute which starts from the root node and relative does not require to be started from the root. To traverse to the nth element, we have to mention [n] in the xpath, where n is the index number.
|