Mastering CSS Selectors in Selenium by Janesh Kodikara
Mastering CSS Selectors in Selenium by Janesh Kodikara, @Pragmatic. TLabs
Location Strategies Available ID, Name Link. Text, Partial. Link. Text Class. Name Tag. Name Xpath CSS
Good Locators Are Unique Descriptive Unlikely Efficient Simple to change
CSS vs XPath Both are popular, widely used and powerful location strategies CSS more readable (simpler) CSS is faster (especially in IE) XPath can traverse up and down the DOM
Locating Elements by ID “#” is used to locate elements by its ID. <input id=”txt. Username” type=”text” name=”txt. Username”> CSS Locator Xpath Locator 1. input# txt. Username 2. #txt. Username //input [@id=‘txt. Username']
Locating Elements by Class “. ” is used to locate elements by its CSS Class <button class=“btn-primary btn-block” type=“submit”>Sign in</button>
Locating Elements by an Attribute <input id=“txt. Username” type=“text” name=“txt. Username”> input[id=’txt. Username’] input[name=’txt. Username’] input[type=’text’]
Locating Elements by Multiple Attributes <input id=“txt. Username” type=“text” name=“txt. Username”> input[id=’txt. Username’][name=’txt. Username’][type=’text’]
Locating Elements by Class and Attributes <button class=“primary-btn” type=“submit”>Log in</button> button. primary-btn[type=’submit’]
Locating Child Elements <div> <div id=“div. Username” class=“text. Input. Container”> <label for=“txt. Username”>User Name</label> <input id=“txt. Username” type=“text” name=“txt. Username”> </div> Direct Child – “>” is used to identify Direct Child div#div. Username>label Sub Child – “space” is used to identify Sub Child div#div. Username input
Locating Child Elements – Nth Child This is useful when there’s multiple elements of same type without any unique id or attribute. <ul id=“drinks. List”> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> ul#drinks. List li: nth-child(2)
Locating Child Elements – First Child This is useful to find the first child element of a given type <ul id=“drinks. List”> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> ul#drinks. List li: first-child
Locating Child Elements – Last Child This is useful to find the last child element of a given type <ul id=“drinks. List”> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> ul#drinks. List li: last-child
Locating Elements by Prefix of an Attribute value Use “^” to indicate a prefix <input id=”txt. Username” type=”text” name=”txt. Username” class=’user. Name’ > input[id^=’txt. User’] input[name^=’txt. User’]
Locating Elements by Suffix of an Attribute value Use “$” to indicate a suffix <input id=”txt. Username” type=”text” name=”txt. Username” class=’user. Name’ > input[id$=’Username’] input[name$=’name’] *[id$=’Username’] *[name$=’name’]
Locating Elements by Partial Attribute Value Use “*” to indicate a partial match <input id=”txt. Username” type=”text” name=”txt. Username” class=’user. Name’ > input[id*=’User’] input[name*=’User’]
Locating Next Sibling of a Known Element Use “+” to indicate next sibling <div id=”frm. Login”> <input id=”txt. Username” type=”text” name=”txt. Username”> <input name=”txt. Password” id=”txt. Password” type=”password”> <input name=”Submit” class=”button” id=”btn. Login” value=”LOGIN” type=”submit”> </div> Locate the Password field input#txt. Username + input
Locating Element by Partial Inner Text Use “contains” method <a href=”/index. php/auth/logout”>Logout</a> a: contains(‘Logout’)
Locating Element Not Having a Given CSS Class Use “not” method <div> <div class="class 1 class 2 class 3"></div> <div class="class 1 class 2 class 3"></div> div: not(. class 2)
Combining CSS selectors You can combine multiple CSS selectors with commas “, ” #txt. Username, . user. Name This could be useful in Selenium context when you know one of the CSS will be available at the time of test execution
Locating Elements by Attributes with Case Sensitivity Use “i” at the end of the selector to indicate case sensitivity Eg: - element. Name[attribute. Name=‘value’ i] <input id=“txt. Username” type=“text” name=“txt. Username”> input[id=‘txtusername’ i] input[name=‘txtusername’ i]
Tools Verify the CSS syntax before using in scripts Popular Tools Fire. Bug Fire. Path Fire. Finder Chrome Developer Tools
Practice and Master CSS
Game for Practicing CSS A nicely designed little game to help you learn CSS selectors http: //flukeout. github. io/
Migrating from XPath Converting the exsiting XPath Tools for converting XPath http: //cssify. appspot. com/
References https: //saucelabs. com/resources/articles/selenium-tips-css-selectors http: //pragmatictestlabs. com/2016/09/30/mastering-css-forselenium-test-automation/ Other referenced available in our blogpost
Questions and Answers
THANK YOU !
- Slides: 29