Show Menu

CSS Selectors for Selenium WebDriver Cheat Sheet by

css     testing     selenium     webdriver     locators

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

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.

Download the CSS Selectors for Selenium WebDriver Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/janesh_css-selectors-for-selenium-webdriver.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

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