Create Custom xpaths

Video We have already seen, how can we generate the X-path using firebug and fire path? In these days, it’s quite easy to generate x-paths. But sometimes we need to customize x-paths.

We need to create the custom XPath when XPath is dynamic. Let’s see the structure of XPath-
Let’s find the Google logo XPath on Google.com site-
Xpath — //*[@id=’hplogo’]

 Create Custom Xpath

 

Note – Never include this dot(.) in your XPath while copy XPath from the firebug. It will fail your automation script.

We have seen how can we generate the XPath using firebug. But there is an issue with this approach. If no ID attribute is associated with the Web Element then firebug will return the complete or absolute XPath. Which is not good for use in Automation Testing.

 

Video Tutorial:

If you liked this video, then please subscribe to our YouTube Channel for more video tutorials.

 

So in such case, we need to customize the XPath. It’s very easy to create the customized XPath. XPath has a fix structure like —

//tag[@attribute=’value’]  

 

Here tag is our HTML tag(like – div, input, name etc), attribute is our HTML attribute (like – Id, class etc), and Value is the value of that HTML attribute.

Let’s see an example of Gmail Login page. Here we have the page heading ‘One account. All of the Google’ .

If you open google log-in page and inspect this web element in your firebug then you will see this heading is not in any ID. It’s in class ‘banner’. Now let’s see the XPath of this generates by firebug. (Firebug will return the absolute XPath).

create Custom Xpaths

 

You can see, Firebug is returning the absolute path, not the relative XPath. Because firebug always start XPath creation from ID and if ID attribute is not present for the Web Element then firebug return the absolute path.

So now it’s our turn to create the XPath for this page heading. You just need to follow the XPath structure, that’s all.

Xpath structure — //tag[@attribute=’value’]

Customized Xpath — //div[@class=’banner’]/h1

 

Our class is in the div tag , so our tag is div. Now here class our attribute, so the place of attribute we mentioned the class and finally our class name is the banner, it means our attribute value is the banner, so we mentioned the banner in value.

Now point to notice we have mentioned one more thing in our XPath ‘/h1’ this is because our element in the h1 tag which is inside the banner class.

So every further HTML class after attribute must be separated by single slash’/’.

Now your XPath is ready, you can use this customized XPath in your script. Now the question is how do we know that our customized XPath is correct ?

 

Verify Customized XPath

It’s very easy to verify your created XPath. We can do this using firebug search console. Let’s see how we can verify our customized XPath against the target Web Element (We are assuming, you are on your target web page in the browser)-

  1. Open the FireBug .

  2. Click on HTML option available in the Firebug header bar.

  3. Click on Inspect Element icon.

  4. Now paste your customized XPath in the Search bar.(Present in right side in firebug header)

 

It will highlight your element in the HTML console. If your created XPath is incorrect then the search bar become Red. Let’s see this for the above created customized XPath.

Verify Custom Xpath

 

You can notice, our target Web Element (Page Heading) is being highlighted in the firebug console. So we can say that our created XPath is valid.

Now we will what happens if we try with in valid xpath. Suppose we are verifying  ‘//div[@class=’banner’]/h‘  instead of ‘//div[@class=’banner’]/h1‘ .

Verify Custom XPath

 

So this is all, how we can create xpaths and verify these. It’s very important to practice this stuff because this the basic and very useful operation in automation script writing.

0 Comment

Leave a Reply