Cheatography
https://cheatography.com
CSS Selector ReferenceSelector | Example | Description | #id | #txtUsername | Select element with id="txtUsername" | .class | ..button | Select element with class="button" | element1 element2 | form input | Select <input> element inside <form> element | element1>element2 | form>input | Select <input> element where parent is a <form> element | element1+element2 | span+input | Select <input> element placed immediately after <span> element | [attribute='value'] | [name='txtUsername'] | Select elements with name="txtUsername" | element[attribute='value'] | input[name='txtUsername'] | Select <input> element with attribute name="txtUsername" | element[attribute^='value'] | input[name^='txtUser'] | Select <input> element with attribute name starts with value "txtUser" | element[attribute$='value'] | input[name$='name'] | Select <input> element with attribute name ends with value "name" | element[attribute~='value'] | input[name~='User'] | Select <input> element with attribute name containing the value "User" | element[attribute1='value1'][attribute2='value2'] | input[name='txtUsername']input[id='txtUsername'] | element:nth-of-type(N) | form:nth-of-type(4) | Select fourth <input> element inside <form> | :nth-child(N) | form:nth-child(4) | Select fourth element withing <form> | :visited | a:visited | Select visited links |
CSS in Action in Testsdriver.findElement(By.cssSelector(".button")).click();
//With page objects
@FindBy(css = ".button")
WebElement btnLogin; |
Convert XPath into CSSYou can convert XPath into CSS using cssify contributed by Santiago Suarez Ordoñez |
| | 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 CheckerIt is important to ensure you use valid CSS in Selenium test scripts and the verification should be done before using in Selenium scripts. You can use a plugin like CSS Checker. About PragmaticPragmatic Test Labs is a software testing and testing related training provider based in Sri Lanka. |
Help Us Go Positive!
We offset our carbon usage with Ecologi. Click the link below to help us!
Created By
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets