Day 2 – Know your Web Page

I would like to share one memorable incident. I got an invitation to attend the live music concert of our favorite band in Community Hall. We were pretty excited and were eagerly waiting for the day. On the big day, we dressed up the best way we could, and drove through to the Community Hall. We reached there on time, but to our surprise…there was a BIG LOCK on the main gate.We were literally like “What the Hell!!!” The invitation clearly stated that the concert was scheduled on the same day, same time and in the community hall. Suddenly, my eye ball rolled, “COMMUNITY HALL”, “OLD TOWN” and we are living in “NEW TOWN”. And the very next moment we realized that we reached the wrong location. OLD town is quite far than the new one and we were doubtful of the fact whether we could even catch the end of the program.

Have you been in this situation ever, funny. May be not, but I saw this as the most common incident with most of the automation aspirants , and this is the most common reason of loosing their interest for automation. Basic issue is to identify and reach to correct area of the application to interact with.

You can reach to your destination only and only if you know the correct location. And in real life, like we have a physical addresses of each location, on the web page also we do have a logical location for each Web Page Element which we call “Locators”. Let’s try something new

Just help me to identify, the area of the application from Where one can Sign In to following eCommerce Site

http://automationpractice.com/index.php

 Its on the top right of the this page, that was an easy one though!

signinlink

Now try something different, lets find out the location of this link on the browser

  1. Open your Chrome browser
  2. Launch the Application
  3. Mouse cursor Over the Link ( Don’t Click It)
  4. Right click the mouse button on this link, you should see ‘Inspect’ as following

inspectelement

5. Click on the Inspect, you should see the ‘Address of the Link : Sign Up’

inspectelementresults

That might have been seemed boring to you, right?? Every QA knows this. What’s new here ? And believe me, I was fooling you. No new thing, no new concept, it’s just like letting you know your home address, which you already know.

BUT, did you ever think, your address is simple and easy for you as you are well aware of each street, area, building road, floor and unit of your residence. What if, you called me for a coffee. Will you only say “Come to my place” or rather tell me the exact address ( surely, if you are serious for your offer). Definitely the latter is true.

And we already know that our computer is a DUMB box, so our level of efforts to tell him the address will be little more.

Fundamental line of Automation is “Identify the Location of your target.” This is one of the basic requirements, and there are several ways to tell the address of the target on the webpage. Lets use term ‘HTML Element’  or ‘WebElement’ for address of a target.

For beginners, the HTML element is a formation of

a. Tag ( <> </> )

b. And Several Attributes,  I expect that you are well aware of the term “attribute”. If not, then this might help you-” attribute is nothing but the property of any object by virtue of which you can identify the object.” Like,   some of my attributes are @name = Amit, and @profession = Quality Analyst.

Lets play with it

  1. Can you identify following on your browser for our application, if not just press F12 on your keyboard

consoleonchrome

2. Type $x(“//html”), and you should see

html-result

Is it like this? If yes, then you just accessed the whole page with a single command. and. Still not satisfied, are we?

No, because this is certainly not my address where I was interested to Go.

OK, Never mind. First three things

  1. Any Web page is composed of various HTML Elements and we accessed only ROOT of the page.
  2. And Each component of the webpage has some address, which can be identified by Tag name and attribute

Learning Time :

  1. When you want to access the tag of any element you need to you / or // or *//. Don’t get confused and just go with //, for this first day
  2. For NOW ONLY, Learn that On BROWSER CONSOLE, as mentioned above we will use $x, to retrieve the target. So it should become like  $x(“//”). Just copy and paste the same in the console prompt

xpath_fail1

OOPs, failure Error. Which means you were not interested for a coffee with me, so you told me absolutely the wrong address. But I am desperate, so yeah, let me find your place 🙂

Try with $x(“//div”)

xpath_pass1

Some thing is better than nothing, so this time we at least managed to get some results. Which is an indication that “There are 205 elements on the html with tag name ‘div'”. It is just like we identify total flats in the area or total parks available in the colony.

Got it?..NO?  Ok then, try with $x(“//a”) or $x(“//html”) or $x(“//span”). See the difference

xpath_pass2

For all these three times, you will get the number of elements whose tag is ‘a’ or ‘html’ or ‘span’.

But I am interested in the flat where Mr XYZ is living, after all he invited me without telling me his address. So I will ask like “Flat of Mr XYZ” or in short (“//flat[@name=’XYZ’]”). Is it readable ? try it with our example with two things

Identify the tag name and identify the unique attribute

inspectelementresults

You can see the tag name is : , with several attributes as under

{ ( class=”login” ) and (href=”http://automationpractice.com/index.php?controller=my-account&#8221;) and  ( rel=”nofollow” ) } and two more.

lets try with this one $x(“//a[@class=’login’]”), and see the result

loginxpath

You will get exactly one HTML Element. Expand it and mouse over the highlighted element as on right side ( 0:a.login) and see what happens

xpathresults

You can see that the ‘Sign In’ link of the webpage gets highlighted.

So ultimately, I reached but my hot coffee was nowhere near hot. Actually I took more time to reach your house.

Here are few more examples, I am giving you and it is upto you if you want to practice the same, on the same console window and share the results with me by adding your comments here

Address 1 : $x(“//div[@class=’columns-container’]”)

or $x(“//div[@class=’columns-container’]”)[0]

Address 2 : $x(“//div[@id=’block_top_menu’]”) or

$x(“//div[@id=’block_top_menu’]”)[0]

Address 3 : $x(“//input[@name=’search_query’]”)

or $x(“//input[@name=’search_query’]”)[0]

Address 4 : $x(“//img[@alt=’My Store’]”)

or  $x(“//img[@alt=’My Store’]”)[0]

NB : Replace single or double quotes in case you are copy-paste the address.

For all these four addresses, you should get highlighted area on the webpage.

if you still awaked,

a. Mouseover the results

b. And see what is happening on webpage.

We will discuss the results in the next day :), good luck.

Advertisements

3 thoughts on “Day 2 – Know your Web Page

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s