Selenium web element locating strategy using css selector.

Common css selector

  • Direct child using “>”
<div>
  <a>...</a>
</div>
css=div > a
  • Child or subchild using whitespace
<div>
  ...
    ...
      <a>...</a>
    ...
  ...
</div>
css=div a
  • Id using “#”
<div id='foo'>
  ...
    <a>...</a>
  ...
</div>
css=div#foo a
  • Class using “.”
<div class="foo">
  ...
    <a>...</a>
  ...
</div>
css=div.foo a
  • All elements using “*”
<div id="foo">
  ...
</div>
css=div#foo > *
  • Next sibling using “+”
<form>
  <input id="username"></input>
  <input>...</input>
</form>
css=input#username + input
  • Following sibling using “~”
<form>
  <input id="username"></input>
  ...
  <input>...</input>
</form>
css=input#username ~ input
  • Attribute values using key=value
<form>
  <input name="username" type="text"></input>
  <input name="submit" type="button"></input>
</form>
css=input[name='username']
css=input[name='submit'][type='button']
  • Index of child using nth-xxx(n)
css=ul#foo li:nth-of-type(3)
css=ul#foo li:first-of-type
css=ul#foo li:last-of-type
css=ul#foo li:nth-last-of-type(3)
css=ul#foo li:nth-last-child(3)
css=ul#foo li:nth-child(3)
css=ul#foo *:nth-child(3)
css=ul#foo li:first-child
css=ul#foo li:last-child
css=ul#foo li:only-child
css=ul#foo li:only-of-type
css=ul#foo li:empty
css=ul#foo li:nth(2) # sizzle
  • Sub-string using special chars
1) start with:
css=div[id^='prefix']
2) ends with:
css=div[id$='suffix']
3) contains:
css=div[id*='substring'] #containing substring
css=div[id~='word']      #containing word
  • Inner text using contains
<div>
  <a>Log Out!</a>
</div>
css=div a:contains('Log Out') # sizzle
  • Negative using not (sizzle)
css=a.confirmation_link:not(.hidden)
css=.confirmation_link:not(div)
css=.submit_button:not(#clear_button)
css=input[type=button]:not(p#not_this_input > input)

References

BACK TO TOP
Post tagged with: css, selenium, webdriver, automation