Show Menu
Cheatography

CSS Selectors for Selenium WebDriver Cheat Sheet by

CSS Selector Reference

Sele­ctor
Exam­ple
Desc­rip­tion
#id
#txtUs­ername
Select element with id="­txt­Use­rna­me"
.class
..button
Select element with class=­"­but­ton­"
element1 element2
form input
Select <in­put> element inside <fo­rm> element
elemen­t1>­ele­ment2
form>input
Select <in­put> element where parent is a <fo­rm> element
elemen­t1+­ele­ment2
span+input
Select <in­put> element placed immedi­ately after <sp­an> element
[attri­but­e='­value']
[name=­'tx­tUs­ern­ame']
Select elements with name="t­xtU­ser­nam­e"
elemen­t[a­ttr­ibu­te=­'va­lue']
input[­nam­e='­txt­Use­rname']
Select <in­put> element with attribute name="t­xtU­ser­nam­e"
elemen­t[a­ttr­ibu­te^­='v­alue']
input[­nam­e^=­'tx­tUser']
Select <in­put> element with attribute name starts with value "­txt­Use­r"
elemen­t[a­ttr­ibu­te$­='v­alue']
input[­nam­e$=­'name']
Select <in­put> element with attribute name ends with value "­nam­e"
elemen­t[a­ttr­ibu­te~­='v­alue']
input[­nam­e~=­'User']
Select <in­put> element with attribute name containing the value "­Use­r"
elemen­t[a­ttr­ibu­te1­='v­alu­e1'­][a­ttr­ibu­te2­='v­alue2']
input[­nam­e='­txt­Use­rna­me'­]in­put­[id­='t­xtU­ser­name']
elemen­t:n­th-­of-­type(N)
form:n­th-­of-­type(4)
Select fourth <in­put> element inside <fo­rm>
:nth-c­hild(N)
form:n­th-­chi­ld(4)
Select fourth element withing <fo­rm>
:visited
a:visited
Select visited links

References

CSS in Action in Tests

driver.findElement(By.cssSelector(".button")).click();

//With page objects
 @FindBy(css = ".button")
 WebElement btnLogin;

Convert XPath into CSS

You can convert XPath into CSS using cssify contri­buted by Santiago Suarez Ordoñez
 

CSS

Sample HTML

<form id="frmLogin" method="post" >
        <div id="divUsername" class="textInputContainer">
            <input name="txtUsername" id="txtUsername" type="text">
<span class="form-hint" style="display: none;">Username</span>
        </div>
        <div id="divPassword" class="textInputContainer">
            <input name="txtPassword" id="txtPassword" type="password">
<span class="form-hint" style="display: none;">Password</span>
        </div>
        <div id="divLoginButton">
            <input type="submit" name="Submit" class="button" value="LOGIN">
        </div>
</form>

CSS Diner

Game for practicing CSS selectors with fun CSS Diner

CSS Selector tester :W3Schools

CSS Checker

It is important to ensure you use valid CSS in Selenium test scripts and the verifi­cation should be done before using in Selenium scripts. You can use a plugin like CSS Checker.

About Pragmatic

Pragmatic Test Labs is a software testing and testing related training provider based in Sri Lanka.
               
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Selenium WebDriver Cheat Sheet Cheat Sheet
          ISTQB Test Automation Engineering Cheat Sheet
          Cypressio Cheat Sheet