XPath and CSS selectors are indispensable tools for web developers, testers, and anyone working with web automation. They allow precise targeting of elements within a webpage's DOM (Document Object Model), which is crucial for tasks like scraping, testing, and styling. This guide will walk you through the basics, provide a side-by-side comparison of XPath and CSS selectors, and include practical examples for quick reference.

How to Copy an XPath Selector from Chrome Dev Tools

  1. Open Chrome Dev Tools: Press F12 or right-click on a webpage and select "Inspect".
  2. Highlight the Element: Use the element selector tool to pinpoint the element you want to target.
  3. Copy the XPath:
    • Right-click on the highlighted element in the Dev Tools panel.
    • Select "Copy" > "Copy XPath".
  4. Paste the XPath: Use it directly in your code or scripts.

XPath and CSS Cheat Sheet

Node Selection

Node selection allows you to target elements based on their tag names, attributes, or their relationship within the DOM hierarchy.

CSS Selector XPath Selector Description 
element
 
//element
 Selects all nodes with the given tag name in the document. 
/element
 
/element
 Selects the root element with the given tag name. 
parent element
 
//parent/element
 Selects all child nodes of a specific parent node. 
*
 
//*
 Selects all elements in the document.

Example: To select all div elements in a document:

  • CSS: div
  • XPath: //div

Position-based Selection

Position-based selection allows you to choose elements based on their order among siblings or their position within their parent.

CSS XPath Description 
:first-of-type
 
[1]
 Selects the first element of its type among its siblings. 
:nth-of-type(n)
 
[n]
 Selects the nth element of its type among its siblings. 
:last-of-type
 
[last()]
 Selects the last element of its type among its siblings. 
:first-child
 
//*[1]
 Selects the first child element of its parent. 
:last-child
 
//*[last()]
 Selects the last child element of its parent.

Example: To select the first p element:

  • CSS: p:first-of-type
  • XPath: //p[1]

Attribute Selection

Attribute selection targets elements based on the presence or specific values of their attributes.

CSS XPath Description 
[attribute]
 
//*[@attribute]
 Selects all elements with the specified attribute. 
element[attribute]
 
//element[@attribute]
 Selects all elements of a specific tag with the specified attribute. 
[attribute="value"]
 
//*[@attribute="value"]
 Selects all elements where the attribute equals a specific value. 
element[attribute="value"]
 
//element[@attribute="value"]
 Selects specific elements where the attribute equals a specific value.

Example: To select all elements with a class of example:

  • CSS: [class="example"]
  • XPath: //*[@class="example"]

Attribute Value Matching

Attribute value matching allows you to select elements based on partial matches of attribute values.

CSS XPath Description 
[attribute^="value"]
 
[starts-with(@attribute, "value")]
 Selects elements where the attribute value starts with a specific string. 
[attribute$="value"]
 
[ends-with(@attribute, "value")]
 Selects elements where the attribute value ends with a specific string. 
[attribute*="value"]
 
[contains(@attribute, "value")]
 Selects elements where the attribute value contains a specific string.

Example: To select elements with a class that starts with btn:

  • CSS: [class^="btn"]
  • XPath: [starts-with(@class, "btn")]

XPath Axes

Axes in XPath allow you to navigate the document structure relative to the current node.

Axis XPath Example Description 
ancestor
 
//div/ancestor::*
 Selects all ancestors (parent, grandparent, etc.) of the current node. 
ancestor-or-self
 
//div/ancestor-or-self::*
 Selects the current node and all of its ancestors. 
child
 
//div/child::*
 Selects all children of the current node. 
descendant
 
//div/descendant::*
 Selects all descendants (children, grandchildren, etc.) of the current node. 
following
 
//div/following::*
 Selects all nodes that appear after the current node in the document. 
following-sibling
 
//div/following-sibling::*
 Selects all siblings that appear after the current node. 
preceding
 
//div/preceding::*
 Selects all nodes that appear before the current node in the document. 
preceding-sibling
 
//div/preceding-sibling::*
 Selects all siblings that appear before the current node. 
self
 
//div/self::*
 Selects the current node itself.

Example: To select all children of a div element:

  • XPath: //div/child::*

XPath Operators & Functions

XPath provides various operators and functions to manipulate and evaluate node sets, strings, and more.

Category Syntax Description
Comparison Operators 
= != < > <= >=
 Used for comparing values in predicates.
Logical Operators 
and or not()
 Combine or negate conditions in predicates.
Node Set Functions 
count(node-set)
 Returns the number of nodes in the node-set.
  
position()
 Returns the position of the current node in the node list.
String Functions 
contains(string1, string2)
 Checks if string1 contains string2.
  
starts-with(string1, string2)
 Checks if string1 starts with string2.
  
ends-with(string1, string2)
 Checks if string1 ends with string2.
  
substring(string, start, length)
 Extracts a substring from string.
  
string-length(string)
 Returns the length of string.
  
concat(string1, string2, ...)
 Concatenates strings.

Example: To check if a string attribute contains the value example:

  • XPath: [contains(@attribute, "example")]

 

Conclusion

This guide should serve as a quick reference for anyone looking to improve their use of XPath and CSS selectors. By mastering these techniques, you'll be able to interact with and manipulate web content more effectively, whether you're styling a page, extracting data, or automating interactions. Keep this guide handy as you work, and happy coding!