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 !