CSS and XPath Selectors Cheat Sheet

button	Element Selector
button.btn-primary	Button with a class
#myId	Exact match of id
button#saveButton	Button with an id
[id*="myId"]	Contains the id
.myClass	Has class
[class*="myClass"]	Contains class
[data-testid="myTestId"]	Match attribute
[data-testid*="myTestId"]	Contains attribute
td[data-testid='Customer'][data-testid='list-item'] > div	Contains attribute with child
[data-testid^="save"]	Starts with
[data-testid$="button"]	Ends with
button[data-testid="save-button"]	Button with attribute
#customerForm input	Id with all descendants
.customer-container input	Class with all descendants
[data-testid="customer-form"] input	Attribute with all descendants
#customerForm > button	Direct child with >
#saveButton + button	Sibling with +
w3schools CSS Selectors	Reference

$("button.btn-primary")	Testing CSS Selector
$x("//button[contains(@class,'myClass')]")	Testing XPath Selector

Ranorex Selecity

Ortoni Studio

SelectorsHub

//button	Element selector
//button[contains(@class,'btn-primary')]	Button with a class
/*[@id='myId']	Exact match of id
//button[@id='saveButton']	Button with an id
//*[contains(@id,'myId')]	Contains the id
//*[contains(@class,'myClass')]	Has class
//*[@data-testid='myTestId']	Match attribute
//*[contains(@data-testid,'myTestId')]	Contains attribute
//td[contains(@data-testid,'Customer') and contains(@data-testid, 'list-item')]/div	Contains attribute with child
//*[starts-with(@data-testid,'save')]	Starts with
//*[substring(@data-testid, string-length(@data-testid) - string-length('button') + 1) = 'button']	Ends with
//button[@data-testid='save-button']	Button with attribute
//*[@id='customerForm']//input	Id with all descendants
//*[contains(@class,'customer-container')]//input	Class with all descendants
//*[@data-testid='customer-form']//input	Attribute with all descendants
//*[@id='customerForm']/button	Direct child
//[@id='saveButton']/following-sibling::[1][self::button]	Sibling
//button[.//span[normalize-space(.)='Close Modal']]	Button that has span with text
//button[contains(normalize-space(.), 'CONTINUE')]	Button that has any text inside
(//div[contains(@class,'list-item')])[2]	Select the second matching div
w3schools xPath	Reference

Download the CSS and XPath Selectors Cheat Sheet

1 Page

Add a Comment

Related Cheat Sheets

Selenium WebDriver Cheat Sheet Cheat Sheet

Cypressio Cheat Sheet

ISTQB Test Automation Engineering Cheat Sheet

CSS and XPath Selectors Cheat Sheet by GregFinzer