🏠Quick Reference for XPath + CSS
What are the different approaches to using XPath and CSS Selector?
| Description | XPath | CSS Selector |
|---|---|---|
Whole WebPage | /html | html |
Whole WebPage body | /html/body | body |
Image element | //img | img |
Link | //a[@href = 'url'] | a[href = 'url'] |
Direct Child | //div/a | div > a |
Id | //tagName[@id=’idValue’] | tagName#idValue |
Class | //tagName[@class=’classValue’] | tagName.Value of Class attribute |
Attribute | //tagname[@attribute-name=’value1′] | tagName[attribute=Value of attribute] |
Multiple Attributes | //input[@type='submit' and @name='btnLogin'] | tagname[attribute1='value1'][attribute2='value2'] |
Contains | //*[contains(@type,'sub')] | tagname[attribute*=substring] |
Starts with | //tagname[starts-with(@attribute, ‘Start value’)] | tagname[attribute^=prefix of the String] |
Ends with | //tagname[ends-with(@attribute, ‘End value’)] | tagname[attribute$=suffix of the String] |
Matches | //*[matches(@type,'value')] | N/A |
First Child | //ul[@id=’list’]/li[1] | ul#list li:first-child |
Last Child | //ul[@id=’list’]/li[last()] | ul#list li:last-child |
nth Child | //ul[@id=’list’]/li[3] | ul#list li:nth-child(3) |
Text Value | //td[text()=‘textname'] | N/A |
Element preceding some sibling | E2/preceding-sibling::E1 | N/A |
Sibling element immediately preceding | E/preceding-sibling::*[1] | N/A |
User interface element that is disabled | E[@disabled] | E:disabled |
Checkbox (or radio button) that is checked | //*[@checked] | *:checked |
Text Value | //td[text()=‘textname'] | N/A |
What are the differences between XPath and CSS locators?
Traversal:
❎ XPath allows bidirectional traversal.
➡️ CSS only moves forward.
👉 So XPath has more powerful traversal.
Performance:
✅ CSS selectors are faster since browsers optimize CSS.
Readability:
✅ CSS locators are more concise and readable.
Last updated