CSS and XPath Selectors to be used with Selenium, Cypress, or Playwright
|
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 +
|
|
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
|
|
Reference
|
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
