In modern practice, XPath is also widely used to locate elements in HTML (DOM) structures<\/strong>, especially in automation testing and web scraping<\/strong>, where precise element identification is required.<\/p>\n\n\n\n XPath was designed to describe paths to elements inside an XML document<\/strong>, similar to how file paths work in an operating system, making it easy to traverse structured data.<\/p>\n\n\n\n In this guide, we will dive into creating XPath expressions with multiple conditions<\/strong>, so you can handle dynamic web pages confidently and efficiently.<\/p>\n\n\n\n Before you start writing an XPath, it is crucial to understand the HTML structure of the webpage<\/strong> you are working with.<\/p>\n\n\n\n Every webpage is made up of a hierarchy of HTML elements \u2014 tags like For example, consider this snippet:<\/p>\n\n\n\n In the above HTML Structure,<\/p>\n\n\n\n For instance, locating the email input based on its label instead of its ID:<\/p>\n\n\n\n This approach ensures your XPath works even if dynamic IDs or classes change<\/strong>, making your automation more robust.<\/p>\n\n\n\n in 2026, XPath continues to play a crucial role due to its accuracy, flexibility, and broad industry adoption<\/strong>, especially in test automation and enterprise applications where dynamic UI structures are common.<\/p>\n\n\n\n XPath remains a primary locator strategy in popular automation tools such as Selenium, Playwright, Cypress (via plugins), and Appium<\/strong>. When unique IDs or stable CSS selectors are unavailable in dynamic applications, XPath provides the most reliable way to locate elements.<\/p>\n\n\n\n XPath excels in handling modern web applications where element attributes change frequently<\/strong> or DOM structures are deeply nested. It allows testers to navigate parent, child, sibling, and ancestor relationships<\/strong> with precision, making it ideal for complex UI testing scenarios.<\/p>\n\n\n\n Example:<\/p>\n\n\n\n Unlike CSS selectors, XPath supports text-based matching<\/strong>, partial attribute matching<\/strong>, and upward DOM traversal<\/strong>. This makes XPath indispensable when element identification depends on visible text or contextual hierarchy.<\/p>\n\n\n\n Example:<\/p>\n\n\n\n For web scraping complex and dynamic websites, XPath enables precise data extraction<\/strong> and works seamlessly with tools like Scrapy, BeautifulSoup (lxml), and Puppeteer<\/strong>, making it a preferred choice for structured data parsing.<\/p>\n\n\n\n Although XPath was originally designed for XML documents<\/strong>, it is widely used today to locate HTML elements<\/strong> in modern web applications.<\/p>\n\n\n\n XPath helps identify elements based on attributes, text, and DOM relationships when building automation scripts or debugging UI behavior.<\/p>\n\n\n\n XPath can locate an element using one unique or stable attribute.<\/p>\n\n\n\n This method is simple and easy to maintain.<\/p>\n\n\n\n Use this approach when the attribute value does not change across builds.<\/p>\n\n\n\n Using a unique and stable attribute like When a single attribute is not reliable, multiple attributes can be combined using This improves accuracy and reduces false matches.<\/p>\n\n\n\n Combining multiple attributes improves accuracy:<\/p>\n\n\n\n Text-based XPath allows elements to be located using visible text.<\/p>\n\n\n\n This is useful for buttons, links, and labels.<\/p>\n\n\n\n This approach matches how users interact with the UI.<\/p>\n\n\n\n The above specific input element does not contain visible text<\/strong>, so text-based XPath is not applicable here<\/strong>.<\/p>\n\n\n\n The It matches a portion of the attribute or text.<\/p>\n\n\n\n Use This is commonly used in modern UI frameworks.<\/p>\n\n\n\n The It works well for auto-generated IDs.<\/p>\n\n\n\n If IDs or classes are generated with a prefix:<\/p>\n\n\n\n XPath can locate elements based on their position in the DOM hierarchy.<\/p>\n\n\n\n This helps when elements do not have unique attributes.<\/p>\n\n\n\n If above input element input is inside a form:<\/p>\n\n\n\n Combine Attributes in XPath Expression<\/strong>: <\/p>\n\n\n\n Once you have identified the unique attributes, you can combine them in an XPath expression using logical operators such as Using the identified attributes from the previous step, here’s an example of a multi-element XPath:<\/p>\n\n\n\n This XPath will select the Test and Validate the XPath<\/strong>: <\/p>\n\n\n\n It’s crucial to test and validate the XPath expression to ensure it accurately selects the desired element. You can use browser developer tools or dedicated XPath evaluation tools to test your XPath against the target webpage.<\/p>\n\n\n\n Make sure to test the XPath on various instances of the element to ensure its reliability. If the XPath fails, review the HTML structure and attributes to identify any changes or potential conflicts.<\/p>\n\n\n\n Also Read:<\/p>\n\n\n\n Element Locators In Selenium WebDriver<\/a><\/p>\n\n\n\n Creating a multi-element XPath allows you to target specific elements on a webpage accurately. <\/p>\n\n\n\n By identifying unique attributes and combining them in an XPath expression, you can navigate complex HTML structures and retrieve the desired information for web scraping or automation tasks.<\/p>\n\n\n\n Remember to understand the HTML structure, identify unique attributes, combine them in an XPath expression, and thoroughly test and validate the XPath for reliable results.<\/p>\n\n\n\n With these techniques, you’ll be well-equipped to leverage XPath effectively in your web scraping and automation projects.<\/p>\n\n\n\n That\u2019s all for the How to create an XPath with multiple elements if you have any doubts or queries regarding the extension get back to us at support@webkul.com<\/a> or create a ticket at our HelpDesk<\/a> system.<\/p>\n","protected":false},"excerpt":{"rendered":"How does understanding HTML structure help you write reliable XPath?<\/h3>\n\n\n\n
<div><\/code>, <input><\/code>, <button><\/code>, and <span><\/code> \u2014 that are often nested within one another. Understanding this hierarchy allows you to see how elements relate to each other<\/strong> and which ones are siblings, children, or parents.<\/p>\n\n\n\n<form id=\"loginForm\">\n <label for=\"userEmail\">Email<\/label>\n <input type=\"email\" id=\"userEmail\" name=\"email\" placeholder=\"Enter your email\">\n <button type=\"submit\">Login<\/button>\n<\/form>\n<\/pre>\n\n\n\n
\n
<input><\/code> element is a child<\/strong> of the <form><\/code> element.<\/li>\n\n\n\n<label><\/code> element is a sibling<\/strong> of the input field.<\/li>\n\n\n\n<button><\/code> element is another sibling<\/strong> within the same form.<\/li>\n\n\n\n\/\/label[text()='Email:']\/following-sibling::input\n<\/pre>\n\n\n\n
Why XPath Is Highly Relevant in 2026<\/h3>\n\n\n\n
1. Essential for Test Automation Frameworks<\/h4>\n\n\n\n
2. Designed for Dynamic and Complex DOM Structures<\/h4>\n\n\n\n
\/\/button[contains(text(),'Submit')]\/ancestor::form\n<\/pre>\n\n\n\n
3. More Powerful and Expressive Than CSS Selectors<\/h4>\n\n\n\n
\/\/label[text()='Email']\/following-sibling::input\n<\/pre>\n\n\n\n
4. Critical for Web Scraping and Data Extraction<\/h4>\n\n\n\n
How can we create XPath using multiple methods to locate HTML elements?<\/h3>\n\n\n\n
For Example consider the Sample HTML Element <\/h3>\n\n\n\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/htmlcontent-1.webp\")
<\/figure>\n\n\n\n<input \n type=\"text\"\n name=\"shopUrl\"\n id=\"shopUrl\"\n placeholder=\"http:\/\/demo.myshopify.com\"\n class=\"border !border-red-600 hover:border-red-600 w-full py-2.5 px-3 border rounded-md text-sm text-gray-600 dark:text-gray-300 transition-all\"><\/pre>\n\n\n\n
How do we create XPath using a single attribute?<\/h3>\n\n\n\n
id<\/code> for above element:<\/p>\n\n\n\n\/\/input[@id='shopUrl']\n<\/pre>\n\n\n\n
\n
How can multiple attributes be used in XPath?<\/h3>\n\n\n\n
and<\/code>.<\/p>\n\n\n\n\/\/input[@type='text' and @name='shopUrl']\n<\/pre>\n\n\n\n
\n
id<\/code> is not reliable<\/li>\n\n\n\nHow does text-based XPath help locate elements?<\/h3>\n\n\n\n
When should developers use contains() in XPath?<\/h3>\n\n\n\n
contains()<\/code> function is useful when attribute values are partially dynamic.<\/p>\n\n\n\ncontains()<\/code> when attribute values include multiple or dynamic classes:<\/p>\n\n\n\n\/\/input[contains(@class,'border-red-600')]\n<\/pre>\n\n\n\n
\n
How does starts-with() help with dynamic elements?<\/h3>\n\n\n\n
starts-with()<\/code> function matches elements where attribute values begin with a known prefix.<\/p>\n\n\n\n\/\/input[starts-with(@id,'shop')]\n<\/pre>\n\n\n\n
\n
shopUrl_123<\/code><\/li>\n\n\n\nHow can parent-child relationships improve XPath reliability?<\/h3>\n\n\n\n
\/\/form\/\/input[@name='shopUrl']\n<\/pre>\n\n\n\n
\n
and<\/strong><\/code> or or<\/strong><\/code> to create a multi-element XPath.<\/p>\n\n\n\n\/\/input[@type='text' and @placeholder='Code' and @id='input_022737f0-a26a-41c7-9f39-93dfa14199ca']<\/pre>\n\n\n\n
<input<\/strong>><\/code> element that matches all the specified attribute conditions.<\/p>\n\n\n\nConclusion<\/strong>: <\/h2>\n\n\n\n
Support:<\/h3>\n\n\n\n