How to use Contains() and starts-with() function in Xpath

Contains() and starts-with() function in XPath is used when we are familiar with the pattern of dynamically changing attribute’s value of an element on HTML pages. This not only works with dynamic values of any of the HTML attributes but it also works when we want to write XPath on the basis of a partial pattern of any of attribute. Here I am trying to explain how Contains() and starts-with() function are used in writing XPath.

Here I am adding one Snap to show how it works

Here as we can see, we want to search Google Search Button just by writing its XPath in the console of developer tools used in Chrome. To know another way to validate your XPath in chrome browser, I would suggest you read my post

Inspecting Elements for writing XPath, CSS Selector in Chrome

So to find the Google Search button we have to write xpath like this

$x(“//input[@name=’btnK’]”)

Once we hit enter it would bring

[<input value=​”Google Search” aria-label=​”Google Search” name=​”btnK” type=​”submit” jsaction=​”sf.chk”>​]

It shows that xpath for Google Search Button is correctly written

Also Read: Arrays in Java and its implementation in WebDriver

Recommended Paid Courses to Lean Selenium and Locators:

• Selenium WebDriver with Java -Basics to Advanced+Frameworks
  
• Selenium WebDriver With Java – Novice To Ninja + Interview

Now suppose we want to search Google Search button if we are just familiar that value of name attributes is starting with  “btn”

then we have to use function starts-with like this

$x(“//input[starts-with(@name,’btn’)]”)

and once when we hit enter on console it would reflect two button one is Google Search and Second one is I’m Feeling Lucky

[<input value=”Google Search” aria-label=”Google Search” name=”btnK” type=”submit” jsaction=”sf.chk”>, <input value=​”I’m Feeling Lucky” aria-label=​”I’m Feeling Lucky” name=​”btnI” type=​”submit” jsaction=​”sf.lck”>​]

So we can see that all the elements those are having name attributes matching with “btn” is coming on screen. So to find Google Search button uniquely we need to use the complete value of name attribute

$x(“//input[starts-with(@name,’btnK’)]”) 

put above in console of chrome’s developer tool and hit enter and then it will return

[<input value=​"Google Search" aria-label=​"Google Search" name=​"btnK" type=​"submit" jsaction=​"sf.chk">​]

It proves that we have written right xpath for Google Search

In the same fashion we have  Contains function that finds all the element matching with string pattern. So if we know that all button on any screen is going to have one pattern of value against its any of the attribute like id, name, class or any of the attribute in html code then we can use contains because contains function find all the element on webpage with matching pattern.
Also Read: Reading e-mail using Javamail api
So lets take example like all buttons on Google.com is going to have one pattern for its name attribute value that is “tn”

For this example we are taking pattern that is common in name attributes value in html code of Google Search button and I’m feeling lucky button and that is “tn” since this string is common in value of name attribute in both line of html code

1- GOOGLE SEARCH BUTTON

<input value="Google Search" aria-label="Google Search" name="btnK" type="submit" jsaction="sf.chk">

2- I'm feeling lucky

<input value="I'm Feeling Lucky" aria-label="I'm Feeling Lucky" name="btnI" type="submit" jsaction="sf.lck">

So we can write xpath using Contains function like this and if we put it in console of chrome’s developer tool and hit enter

$x(“//input[contains(@name,’tn’)]”)

[<input value=​"Google Search" aria-label=​"Google Search" name=​"btnK" type=​"submit" jsaction=​"sf.chk">​, <input value=​"I'm Feeling Lucky" aria-label=​"I'm Feeling Lucky" name=​"btnI" type=​"submit" jsaction=​"sf.lck">​]

above line of code would appear on screen.
Also Read: Email Verification from Gmail Account in Selenium Webdriver (Java)

One more thing contains method always match pattern in values of attribute and if it find it any where in value then it fetches the element on screen and let the Selenium WebDriver code to work on these elements.