Cheatography
https://cheatography.com
CSS Selector Reference
Selector |
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 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 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 Checker
It 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 Pragmatic
Pragmatic 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