When it comes to user journeys and Selenium automation in general it is usually easier to find selectors using CSS. There are however limitations to CSS selectors in particular if sites are structured in the traditional way or the ID’s and Class’s used are dynamic.
Xpath is very powerful and you can choose selectors that are simple or very advanced depending on the needs of your user journey.
Xpath is an XML path used for navigation throughout the HTML structure of a page. It is the language for finding any element on a web page using HTML DOM structure. It can be used for both HTML and XML documents.
There are two types of Xpath selectors, absolute Xpath and relative Xpath. The best example of absolute Xpath is by going into the inspector on a site, right-clicking an element and clicking copy – Xpath. You will likely get something that looks like this:
//*[@id=“tile-298242038″]/div[1]/div[3]/div/div/form/div/div/div[2]/div/div/button/span/span
In User Journey / Selenium terms this is a very brittle selector as it relies on everything staying in the same place otherwise a failure will be triggered.
Instead, We are interested in relative Xpath which doesn’t need the complete path but can be written as an expression. Within these expressions are ‘axes’ which are methods used to find dynamic elements and are commonly used to find dynamic elements that change on refresh
So, What does a basic Xpath selector look like?
//a[@title=”Register / Log In”]
This is made up of three components:
//tagname[@attribute=‘value’]