Contains() and starts-with() function in xpath is used when we are familiar with partial attributes value of an element on HTML pages. 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 just by writing its xpath in console of developer tools used 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
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 isI’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
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.
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
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’)]”)
above line of code would appear on screen.