Dasun Eranthika

XPATH

XPath | Dasun Eranthika

2

Content

What is Xpath? The Use of Xpath How we get Xpath form Mozilla Firefox What if the webpage does not support

for Firefox? What is IE DEVELOPER? How manually write Xpath?

11/24/2012

XPath | Dasun Eranthika

3

What is xpath?

Webpage has varies of object (e.g.: images, text boxes, text fields, buttons, radio buttons, check boxes etc.)

Each and every object has a unique id/name/path called Xpath.

If developer change the colour of a button in webpage later, but the Xpath remain same.

By using Xpath we can uniquely identify an element of a webpage.

Selenium actually uses xpath to identify elements. “Xpath is something unique for every element

of webpage.”11/24/2012

XPath | Dasun Eranthika

4

The use of xpath

If you are willing to become an automation tester in IT industry, learning xpath is makes the thing easy.

When automate a website, have to identify the object of the each and every webpage according to the test case. (It is not necessary to find the xpath of every element of the page)

Imagine you have to automate Gmail login, you have to enter user name, password and click “Sign In” button.

Selenium identifies these two text fields and button by using of xpath.

11/24/2012

XPath | Dasun Eranthika

5

How we get xpath from Mozilla Firefox

If your webpage running on Mozilla Firefox, very easy to get xpath.

You have to install two add-ons for the Mozilla. (Firebug and FirePath)

Installing Firebug to Mozilla

11/24/2012

XPath | Dasun Eranthika

6

How we get xpath from Mozilla Firefox(cont.)

Installing Firebug to Mozilla What is Firebug?

Firebug is a web development tool that facilitates the debugging, editing, and monitoring of any website's CSS, HTML, DOM, XHR, and JavaScript; it also provides other web development tools

It simply install as an add-on for Firefox. How to Install Firebug

Important: This is a Firefox add-on. So, please make sure to surf using Firefox web browser.

11/24/2012

XPath | Dasun Eranthika

7

How we get xpath from Mozilla Firefox(cont.)

11/24/2012

Go to www.getfirebug.com and click the “Install Firebug” button which show in orange circle

Click the “Download” link which compatible with your Firefox browser

Click on “+ Add to Firefox” buttonWait until it install and restart your browserAfter install Firebug, you can access it by [1] Firefox> Web

Developer> Firebug or [2] Simply click Firebug icon on right upper of the browser or [3] press F12 key on your key board

Now you can inspect element of the webpage using Firebug, first you have to click the second icon in Firebug tool(which I

mention in orange colour circle)

XPath | Dasun Eranthika

8

How we get xpath from Mozilla Firefox(cont.)

Installing FirePath to Mozilla What is FirePath?

FirePath is a Firebug extension that adds a development tool to edit, inspect and generate XPath 1.0 expressions, CSS 3 selectors and JQuery selectors (Sizzle selector engine).

How to Install FirePath Important: FirePath is an extension of Firebug.

So, please make sure to install Firebug to your Firefox web browser before to install FirePath. And make sure to surf this using Firefox web browser.

11/24/2012

XPath | Dasun Eranthika

9

How we get xpath from Mozilla Firefox(cont.)

11/24/2012

Go to https://addons.mozilla.org/en-US/firefox/addon/firepath/ link and click on “+ Add to Firefox” button. (Which mention in

orange circle)

Install the add-onRestart the browserOpen Firebug & click “FirePath” tab. (which mention in orange circle)

Click element inspect icon which I mentioned earlier and click one of object in the webpage. (Here, I clicked Google image of

www.google.lk ). The Xpath is showing on green circle.

XPath | Dasun Eranthika

10

What if the webpage does not support for Firefox?

11/24/2012

Today some web applications developed using Pega is not support for Firefox, support for Internet Explorer (IE).

If we have to automate that kind of web site, it will be tricky. (We have to write the Xpath manually.)

Before write the Xpath, we need an object inspection tool for IE.

XPath | Dasun Eranthika

11

What is IE DEVELOPER?

11/24/2012

Internet Explorer Developer Tools (formerly known as Internet Explorer Developer Toolbar), is a component of Internet Explorer that aids in design and debugging of web pages.

It was introduced as a toolbar for Internet Explorer 6 and Internet Explorer 7.

Internet Explorer 8 and Internet Explorer 9 include the features built in.

You can access to the IE Developer by pressing F12 or Tool > F12 developer tools

If you don’t have IE Developer, you can download it from http://www.microsoft.com/en-us/download/details.aspx?id=18359

XPath | Dasun Eranthika

12

How manually write Xpath?

Writing Xpath is not a big deal, but first time you may think it is hard one.

For one object, there may be several xpaths.

Here I mentioned some xpaths for objects.(which I wrote and generated by FirePath)-both are correct.

11/24/2012

XPath | Dasun Eranthika

13

How manually write Xpath? (cont.)

11/24/2012

Text

My way: //div[@id='mainContent']/p[1]/i

Firepath way:.//*[@id='mainContent']/p[1]/i

XPath | Dasun Eranthika

14

How manually write Xpath? (cont.)

11/24/2012

Image

My way: //div[@id='sidebar']/img[@alt='Selenium Logo']

Firepath way:.//*[@id='sidebar']/img

XPath | Dasun Eranthika

15

How manually write Xpath? (cont.)

11/24/2012

Image Button

My way: //div[@id='sidebar']/div[@class='downloadBox']

Firepath way:.//*[@id='sidebar']/div

XPath | Dasun Eranthika

16

How manually write Xpath? (cont.)

11/24/2012

Link

My way: //table[@id='choice']/tbody/tr/td/p/a[contains(@href,'/projects/ide/')]

Firepath way:.//*[@id='choice']/tbody/tr/td[1]/p/a

XPath | Dasun Eranthika

17

How manually write Xpath? (cont.)

11/24/2012

Tab

My way: //li[@id='menu_about']/a[contains(@href,'/about/')]

Firepath way:.//*[@id='menu_about']/a

XPath | Dasun Eranthika

18

How manually write Xpath? (cont.)

11/24/2012

Text Field

My way: //input[@id='q']

Firepath way:.//*[@id='q']

XPath | Dasun Eranthika

19

How manually write Xpath? (cont.)

11/24/2012

Button

My way: //input[@id='submit']

Firepath way:.//*[@id='submit']

XPath | Dasun Eranthika

20

To download the PDF, http://www.mediafire.com/view/?5wl8t2mk0021t94

11/24/2012

XPath | Dasun Eranthika

“The Journey Just Began”

I’m in…

Thank you..!!!