XPath strategy in Selenium

Elements on a web page can be located using XML expressions with Selenium’s XPath locator. Below is an example of the fundamental syntax for Selenium WebDriver’s use of XPath as a CSS locator:

1 XPath: //tagname[@attribute = ‘value’]

Here, the Selenium term TagName refers to the tag in the DOM structure that you are searching for in order to find the desired WebElement. TagName may refer to an anchor tag, input tag, etc.

The prefix “@” and its matching value serve to define attributes. As a result, TagName can be used with properties like Name, ID, Class, etc.

As demonstrated here, Selenium supports a variety of XPath usages.

1) Standard XPath
2) XPath Contains
3) XPath using ‘AND’ & ‘OR’
4) starts-with() method in XPath
5) XPath Text

1) Standard XPath

As the name suggests, this is the simplest (or most typical) way to write an XPath. Let’s find the email element on the Facebook webpage to show how to use a typical XPath locator with Selenium.

The element’s DOM structure is displayed below:

<input type=”text” class=”inputtext _55r1 inputtext _1kbt inputtext _1kbt” name=”email” id=”email” tabindex=”0" placeholder=”Email address or phone number” value=”” autofocus=”1" autocomplete=”username” aria-label=”Email address or phone number”>

The standard XPath of the desired WebElement is //input[@name= ’email’]. Here is how the XPath is used with the findElement() method to locate the element.

driver.findElement(By.xpath(“//input[@name= ’email’]”));

2) XPath Contains

Similar to the CSS ‘contains’ selection, XPath contains works. It is frequently used on WebElements whose value is dynamically changing.

Think of a scenario where the login value is altered after the login text has been added. In this case, XPath contains will be quite beneficial in finding the appropriate WebElement.

Syntax:

//tagname[contains(@attribute, ‘partial value of attribute’)]

The element’s DOM structure is displayed below:

<input type=”text” placeholder=”Full Name*” name=”name” value=”” class=”form-control sign-up-input-2 “>

Here is how the desired WebElement was located using the ‘XPath contains’ locator in Selenium:

driver.findElement(By.xpath(“//input[contains(@class, ‘form-control’)]”))

3) XPath using ‘AND’ & ‘OR’

When identifying a WebElement based on specific condition sets, Selenium uses the ‘AND’ & ‘OR’ operators in the XPath selector. Both conditions must be true for a “AND” condition to be true. However, the ‘OR’ XPath operator allows any of the two conditions to be true.

Syntax of OR operator in XPath:

//input[@id=’login_1' OR @name=’login’]

Syntax of AND operator in XPath:

Let’s locate the email login element on the Facebook homepage using the ‘AND’ & ‘OR’ operators.

Below is the DOM structure of the element:

<input type=”text” class=”inputtext _55r1 inputtext _1kbt inputtext _1kbt” name=”email” id=”email” tabindex=”0" placeholder=”Email address or phone number” value=”” autofocus=”1" autocomplete=”username” aria-label=”Email address or phone number”>

Here is how we used the OR operator with XPath locator in Selenium:

driver.findElement(By.xpath(“//input[@type=’email’ OR @name=’email’]”));

Here is how we used the AND operator with XPath locator in Selenium:

driver.findElement(By.xpath(“//input[@type=’email’ AND @name=’email’]”));

4) starts-with() method in XPath

Functionalities similar to those of the CSS Selector in Selenium are available through the starts-with() technique in XPath. Finding elements that begin with a particular property value is made easier. XPath’s starts-with() technique is mostly used to find WebElements whose values change when a page is refreshed.

Syntax:

//tagname[starts-with(@attribute,’starting name of the attribute value’)]

Shown below is the DOM structure for locating the Password field on the Facebook login page:

Below is the DOM structure of the element:

<input type=”password” class=”inputtext _55r1 inputtext _9npi inputtext _9npi” name=”pass” id=”pass” tabindex=”0" placeholder=”Password” value=”” autocomplete=”current-password” aria-label=”Password”>

Here is how we locate the Password element using the starts-with() method with XPath in Selenium:

driver.findElement(By.xpath(“//input[starts-with(@name,’pa’)]”));

5) XPath Text

In Selenium, text in the XPath locator aids in finding WebElements using XPath and exact text matching. It can be used to locate elements by looking at the tags that contain specific text.

Syntax:

//div[text()=’Logged In’]

To demonstrate XPath text usage, we locate the ‘FREE SIGN UP’ button on the Facebook Sign in page

Here is the DOM structure of the required WebElement:

<a role=”button” class=”_42ft _4jy0 _16jx _4jy6 _4jy2 selected _51sy” href=”/r.php?locale=en_GB&amp;display=page”>Create New Account</a>

Here is how we locate the ‘Create New Account’ button element using the XPath text:

driver.findElement(By.xpath(“//button[text()=’Create New Account’]”));

Complex Selenium test automation scenarios may be executed using both CSS Selector and XPath. Even though I use XPath a lot, the decision between it and CSS Selector comes down to how complicated the case is and how easy it is for you to find WebElements using the appropriate location.

Always consider how maintainable the locators are while making a decision because it will make your job simpler! Using the appropriate locators in Selenium WebDriver, you may say you’ve “been there, done that” while planning your Selenium automated testing approach.

About the Author

Sethuraman is a Senior test automation engineer at CodeStax.Ai with extensive experience in automating web and mobile applications. His expertise includes Software QA testing across the Software development life cycle, including designing, developing and implementing test plans, test cases and test processes.

About CodeStax.Ai

At CodeStax.Ai, we stand at the nexus of innovation and enterprise solutions, offering technology partnerships that empower businesses to drive efficiency, innovation, and growth, harnessing the transformative power of no-code platforms and advanced AI integrations.

But the real magic? It’s our tech tribe behind the scenes. If you’ve got a knack for innovation and a passion for redefining the norm, we’ve got the perfect tech playground for you. CodeStax.Ai offers more than a job — it’s a journey into the very heart of what’s next. Join us, and be part of the revolution that’s redefining the enterprise tech landscape.