With increasing dynamic elements on browser applications, basic xpath / css syntaxes sometimes not proper to use, for example – let’s say we have an element whose attribute value changes, changing first or last characters or there might be long attribute value which is difficult to use in xpath or css.
In this post, we will see the xpath available features such as contains / starts-with & ends-with to identify elements.
Prerequisite –
Refer basic HTML DOM
Refer XPATH/CSS basics
Xpath/CSS contains method-
Xpath Syntax – //tagName[contains(@attribute, 'value')]
CSS Syntax – tagName[attribute*='value']
If the specified value [specified inside the contains method] matches to any attribute value, then the element can be identified.
Consider the demo page – https://qavbox.github.io/demo/signup/
Full Name text box
From the above screenshot, we can use below Xpath syntax to identify the text box
xpath – //input[@id='username']
CSS – input[id='username']
Let’s say the text box is dynamic in nature, depending on page, the element id changes – username_signup or username_login
in this case, we need to have 2 different element variable to identify depending on which page we are at.
As the element appear once on each page, so we need to find a way to identify the element once but use in both the above pages
We can use the Xpath contains
//input[contains(@id, 'username')]
or you can even use name attribute
//input[contains(@name='uname')]
CSS syntax –
input[name*='uname']
Note – * is the syntax for contains
| xpath | css | |
| contains | //tagName[contains(@attribute, ‘value’)] or //tagName[contains(text(), ‘value’)] | input[name*=’uname’] Note – * |
| starts-with | //tagName[starts-with(@attribute, ‘anyValue’)] | tagName[attribute^=’anyValue’] Note – ^ |
| ends-with | //tagName[ends-with(@attribute, ‘value’)] | tagName[attribute$=’value’] Note – $ |
Xpath/CSS starts-with
starts-with method in xpath finds the string that matches from the starting characters of attribute value
Xpath Syntax – //tagName[starts-with(@attribute, 'anyValue')]
CSS Syntax – tagName[attribute^='anyValue']
Let’s consider the link on screen “Tutorials!”, here we have a special character !
we want to identify this link with the text [without the spacial character], so we can use starts-with method
//a[starts-with(text(), 'Tutorials')]
Note – even we can use contains method to identify the above link, but contains can match any value from starting / middle or end of the attribute value.
let’s take another example – identify userName field from image 1
Xpath syntax – //input[starts-with(@id,'user')]
CSS Syntax – input[id^='user']
Note – ^ is the syntax for starts-with
This above syntax will match any attribute value which starts with word “user”, username matches to this syntax & will identify the username text box.
Xpath/CSS ends-with
ends-with method in xpath finds the string that matches with ending characters of attribute value to identify the element
Syntax - //tagName[ends-with(@attribute, 'value')]
But unfortunately xpath 1.0 version doesn’t support ends-with syntax, and most of the browsers still use xpath 1.0 version,
ends-with method only support with xpath 2.0 version.
Reference – https://stackoverflow.com/questions/22436789/xpath-ends-with-does-not-work
But one good thing is that, we can use CSS ends-with on any browser
CSS Syntax – tagName[attribute$=’value’]
Note – $ is the syntax for ends-with
For example – if we want to identify the userName text box, id=”username”
CSS Syntax – input[id$='name']
Hope this helps!
1 Comment