What is XPath?
XPath (XML Path Language) is a query language for navigating and selecting nodes within XML and HTML documents. It uses a path-based syntax similar to file system paths to traverse the document tree and locate specific elements, attributes, or text content.
XPath Syntax Basics
XPath expressions describe a path through the document tree:
//div — Select all <div> elements anywhere in the document//div[@class="product"] — Select divs with a specific class//table/tbody/tr[position() > 1] — Select table rows, skipping the header//a[contains(text(), "Next")] — Select links containing the text "Next"//input[@type="email"]/parent::div — Select the parent div of an email inputXPath vs. CSS Selectors
XPath offers capabilities that CSS selectors lack:
parent::, ancestor::)contains(text(), "..."))However, CSS selectors are generally preferred in browser automation for their simplicity and slightly better performance. XPath is most valuable when you need to locate elements relative to their text content or navigate upward in the DOM tree.
XPath in Browser Automation
Most automation frameworks including Playwright and Selenium support XPath alongside CSS selectors. XPath is particularly useful when elements lack unique IDs or class names but have distinctive text content, or when you need to find an element based on its relationship to a sibling or parent element.
なぜ重要か
XPath provides an alternative to CSS selectors that can handle complex element selection scenarios, particularly when elements need to be located by their text content or relative position to other elements in the DOM tree.
Autonolyのソリューション
Autonoly's AI agent can use both CSS selectors and XPath expressions to locate elements, choosing the most appropriate method based on the page structure. When CSS selectors prove too fragile, the agent can fall back to text-based XPath queries for more resilient element targeting.
詳しく見る例
Using `//button[contains(text(), 'Submit')]` to find a submit button by its visible text
Selecting `//td[text()='Total']/following-sibling::td` to extract the value next to a 'Total' label
Targeting `//div[@data-testid='results']//a` to find all links within a results container
よくある質問
Should I use XPath or CSS selectors for browser automation?
CSS selectors are generally preferred for their simplicity and performance. Use XPath when you need capabilities CSS lacks — selecting elements by text content, navigating to parent elements, or writing complex conditional queries. Many experienced automation engineers use CSS selectors as their default and switch to XPath only when CSS cannot express the needed selection.
How do I find the XPath of an element in Chrome DevTools?
Right-click the element in Chrome DevTools' Elements panel, select Copy, then choose 'Copy XPath' or 'Copy full XPath'. The copied XPath will work for automation but may be overly specific. Consider simplifying it by using attributes or text content rather than positional paths.