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. |
Created By
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets