Xpath and css selector in selenium
|
This article will discuss and describe, with examples, how one can use CSS selectors in order to identify web elements in Selenium tests. It will also depict CSS selectors’ syntax in Selenium. Show It is recommended to gain a deeper understanding of locators in Selenium before narrowing it down to CSS selectors in particular. What is a CSS Selector?Essentially, the CSS Selector combines an element selector and a selector value that can identify particular elements on a web page. Like XPath, CSS selector can be used to locate web elements without ID, class, or Name. Types of CSS Selectors (with examples)There are 5 types of CSS Selectors in Selenium tests-
1. IDIn this example, the script will access the Email text box on the login form at Gmail.com The text box carries an ID attribute with the value “Email”. In this case, the ID attribute and its value are utilized to create a CSS selector that allows access to the text box. How to create the Selenium CSS Selector for the web element Locate the web element – Email textbox. The HTML tag here is “input” and the value of the ID attribute is “Email”. Combined, they refer to the Email textbox. This is the data required to create the CSS selector.  Image source Verify locator value Type “css=input#Email”(locator value) in Selenium IDE. Click on the Find button. The Email text box is highlighted, verifying the locator value. Image source Syntax css=<#>
When specifying CSS Selector in the target text box of Selenium IDE, ensure that it is preceded by “css=”. Note: If multiple web elements have the same HTML tag and attribute value, it is the first element marked in the page source that will be identified. 2. ClassIn this example, the script will access the “Stay signed in” checkbox that appears below the login form at Gmail.com. The checkbox carries a Class attribute with the value “remember”. This Class attribute and value can be utilized to create a CSS selector that accesses the selected web element. Here’s how to create a CSS Selector for the web element Locate the web element – “Stay signed in” checkbox. The HTML tag, in this case, is “label” and the value of the ID attribute is “remember”. Combined, they refer to the “Stay signed in” checkbox. Verify locator value Type “css=label.remember”(locator value) in Selenium IDE. Click on the Find Button. The “Stay signed in” checkbox is highlighted, verifying the locator value. Image source Syntax css=<.>
Popular among Readers: How to handle Action class in Selenium 3. AttributeIn this example, the script will access the “Sign in” button located beneath the login form at Gmail.com. The “Sign in” button carries a type attribute with the value “submit”. This type attribute and its value can be utilized to create a CSS Selector that will access the preferred web element. Here’s how to create a CSS Selector in Selenium for the web element Locate the web element – “Sign in” button. The HTML tag, in this case, is “input”, the attribute is type and value of the attribute is “submit”. Combined, they refer to the “Sign in” button. Verify locator value 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. Image source Syntax css=<[attribute=Value of attribute]>
Pro Tip: Want to dive deeper into Selenium implementation on BrowserStack with free interactive courses and lab exercises? Visit Test University 4. Sub-stringIn Selenium, CSS allows the matching of a partial string which, offers a way to create CSS selectors utilizing sub-strings. This can be done in three ways. Types of mechanisms use to match sub-strings
Match a prefix The purpose of this is to correspond to the string by using a matching prefix. Syntax css=<[attribute^=prefix of the string]>
If one intends to identify the “Password textbox”, the CSS Selector, in this case, would be: css=input#Passwd[name^='Pass'] Match a suffix The purpose of this is to correspond to the string by using a matching suffix. Syntax css=<[attribute$=suffix of the string]>
Again, if one intends to identify the “Password textbox”, the CSS Selector, in this case would be: css=input#Passwd[name$='wd'] Match a substring The purpose of this is to correspond to the string by using a matching substring. Syntax css=<[attribute*=sub string]>
Again, if one intends to identify the “Password textbox”, the corresponding CSS Selector would be: css=input#Passwd[name$='wd'] Read Tutorial: Steps for Login Automation using Selenium WebDriver 5. Inner textUsing inner text helps identify and create CSS Selectors in Selenium WebDriver by utilizing a string pattern that the HTML Tag manifests on the web page. This mechanism is used most frequently to locate web elements on account of its simplified syntax. In this example, focus on the “Forgot email?” hyperlink present beneath the login form at Gmail.com. The anchor tag that represents this hyperlink has some text within it. This text can be used to create a CSS Selector that locates the required web element. Syntax css=<:>
It is a useful skill to find an element by CSS selectors, especially because it is used by advanced developers and testers. By mastering it, one is able to use Selenium to its full potential, thus optimizing its abilities for automated Selenium testing. Run Automated Selenium Test for Free What is XPath and css selector?Essentially, the CSS Selector combines an element selector and a selector value that can identify particular elements on a web page. Like XPath, CSS selector can be used to locate web elements without ID, class, or Name.
Which is faster XPath or css in Selenium?Css has better performance and speed than xpath. Xpath allows identification with the help of visible text appearing on screen with the help of text() function. Css does not have this feature. Customized css can be created directly with the help of attributes id and class.
What is a css selector Selenium?What are CSS Selectors in Selenium? CSS Selectors are one of the locator strategies offered by Selenium to identify the web elements. The CSS Selectors mainly use the character sequence pattern, which identifies the web elements based on their HTML structure.
Why css selector is faster than XPath?CSS selectors perform far better than Xpath and it is well documented in Selenium community. Here are some reasons, Xpath engines are different in each browser, hence make them inconsistent. IE does not have a native xpath engine, therefore selenium injects its own xpath engine for compatibility of its API.
|
