Showing posts with label Locating Elements. Show all posts
Showing posts with label Locating Elements. Show all posts

March 3, 2016

Advanced Xpath with Examples

March 03, 2016 64
Here i am going to discuss about advanced usage of xpaths..
I will provide examples how to use xpath Axes.

Descendants
A node's children, children's children, etc.
In the following example; descendants of the form element are the div, title, author, year, and price elements


<form>

<div>
  
<title>Harry Potter</title>
  
<author>J K. Rowling</author>
  
<year>2005</year>
  
<price>29.99</price>
</div>

</form>


Here is Example:





If you want to find descendants of Div tag you need to use below syntax

//div[@id='browse-category']/descendant::*

If you want a specific element from descendants then use below syntax

Here i want to identify Payment link using descendant.

//div[@id='browse-category']/descendant::a[@data-category='Payment']

In the above example descendant will search for child elements and child's child elements as well.

UL is the child element for DIV and LI is the child element for UL and A is child element for LI. As we used descendant it will check for the matching element.



Following:
Selects everything in the document after the closing tag of the current node.


selects all elements after closing tag of P

//p[@class='fk-font-14']/following::*




if you want a specific element using following below is the example

//p[@class='fk-font-14']/following::div[@id='fk-mainfooter-id']


Following-sibling:
Selects all siblings after the current node.
//div[@id='browse-category']/ul/li/following-sibling::*

if you want a specific element then

//form[@class='faqsearchform']/following-sibling::div





Preceding :
Selects all nodes that appear before the current node in the document, except ancestors, attribute nodes and namespace nodes

preceding-sibling
Selects all siblings before the current node

Here is the example:

//div[@id='browse-category']/preceding-sibling::form





Now Lets see a real time example how to use the above mentioned xpath Axes:

Below is scenario:


  1. Navigate to flipkart
  2. add two products to cart
  3. I want to remove one product based on its name.




Simple xpath without using product name --- //a[@class='cart-remove-item fk-inline-block fk-uppercase'] but it always identifies first Remove button.


First Step: I will identify xpath for product Name

//span[text()='HP 15-af114AU Notebook(AMD Quad Core A8/ 4GB/...']

From there onward using xpath Axes i need to identify Remove link.

By loooking at DOM we can understand that there are two TR tags 
in one TR --we have product details and in another TR we have remove link.

so i have to traverse to second TR.

Second Step: Inorder to do that i need to traverse to parent element of span

//span[text()='HP 15-af114AU Notebook(AMD Quad Core A8/ 4GB/...']/ancestor::tr[1]

Third Step: from there traverse to sibling of TR
//span[text()='HP 15-af114AU Notebook(AMD Quad Core A8/ 4GB/...']/ancestor::tr[1]/following-sibling::tr

Fourth Step: From there traverse to tag A which has link text of Remove..here is the final xpath

//span[text()='HP 15-af114AU Notebook(AMD Quad Core A8/ 4GB/...']/ancestor::tr[1]/following-sibling::tr
/descendant::a[text()='Remove']


Hope this is useful in writing advanced xpaths....if you have any questions please do comment and I will be happy to help in you in writing xpaths..







October 5, 2011

Find XPATH in IE using Java Script

October 05, 2011 6
Find XPATH in IE using Java Script
You might work on some site which are only work in IE..then there are no tools to generate xpath for you........

You have to write your own xpath to find the element...There are somany tools to identify XPATH in FF..like xpather, firepath and firebug..etc...

Here is a way to find the XPATH on IE...


STEPS TO INSTAL BOOKMARKLETS
1)Open IE
2)Type about:blank in the address bar and hit enter
3)From Favorites main menu select--->Add favorites
4) In the Add a favorite popup window enter name GetXPATH1.
5)Click add button in the add a favorite popup window.
6)Open the Favorites menu and right click the newly added favorite and select properties option.
7)GetXPATH1 Properties will open up. Select the web Document Tab.
8)Enter the following in the URL field.

javascript:function getNode(node){var nodeExpr=node.tagName;if(!nodeExpr)return null;if(node.id!=''){nodeExpr+="[@id='"+node.id+"']";return "/"+nodeExpr;}var rank=1;var ps=node.previousSibling;while(ps){if(ps.tagName==node.tagName){rank++;}ps=ps.previousSibling;}if(rank>1){nodeExpr+='['+rank+']';}else{var ns=node.nextSibling;while(ns){if(ns.tagName==node.tagName){nodeExpr+='[1]';break;}ns=ns.nextSibling;}}return nodeExpr;}

9)Click Ok. Click YES on the popup alert.
10)Add another favorite by following steps 3 to 5, Name this favorite GetXPATH2 (step4)
11)Repeat steps 6 and 7 for GetXPATH2 that you just created.
12)Enter the following in the URL field for GetXPATH2

javascript:function o__o(){var currentNode=document.selection.createRange().parentElement();var path=[];while(currentNode){var pe=getNode(currentNode);if(pe){path.push(pe);if(pe.indexOf('@id')!=-1)break;}currentNode=currentNode.parentNode;}var xpath="/"+path.reverse().join('/');clipboardData.setData("Text", xpath);}o__o();

13)Repeat Step 9.

You are all done!!

Now to get the XPATH of elements just select the element with your mouse. This would involve clicking the left mouse button just before the element (link, button, image, checkbox, text etc) begins and dragging it till the element ends. Once you do this first select the favorite GetXPATH1 from the favorites menu and then select the second favorite GetXPATH2. At his point you will get a confirmation, hit allow access button. Now open up a notepad file, right click and select paste option. This will give you the XPATH of the element you seek.





I read this article some where...i didnt remenber exactly from where i read this..it is working fine...i tried it..hope it will be useful for guys who are working on IE sites...

January 18, 2011

Locating by CSS

January 18, 2011 0
Locating by CSS
Locating by CSS:


CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents. CSS uses Selectors for binding style properties to elements in the document. These Selectors can be used by Selenium as another locating strategy.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

 
   id="loginForm">
    class="required" name="username" type="text" />
    class="required passfield" name="password" type="password" />
    name="continue" type="submit" value="Login" />
    name="continue" type="button" value="Clear" />
  


  • css=form#loginForm (3)
  • css=input[name="username"] (4)
  • css=input.required[type="text"] (4)
  • css=input.passfield (5)
  • css=#loginForm input[type="button"] (4)
  • css=#loginForm input:nth-child(2) (5)
For more information about CSS Selectors, the best place to go is the W3C publication. You’ll find additional references there.

Note
Most experienced Selenium users recommend CSS as their locating strategy of choice as it’s considerably faster than XPath and can find the most complicated objects in an intrinsic HTML document.

Locating by DOM

January 18, 2011 0
Locating by DOM
Locating By DOM

The Document Object Model represents an HTML document and can be accessed using JavaScript. This location strategy takes JavaScript that evaluates to an element on the page, which can be simply the element’s location using the hierarchical dotted notation.
Since only dom locators start with “document”, it is not necessary to include the dom= label when specifying a DOM locator.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

 
   id="loginForm">
    name="username" type="text" />
    name="password" type="password" />
    name="continue" type="submit" value="Login" />
    name="continue" type="button" value="Clear" />
  


  • dom=document.getElementById('loginForm') (3)
  • dom=document.forms['loginForm'] (3)
  • dom=document.forms[0] (3)
  • document.forms[0].username (4)
  • document.forms[0].elements['username'] (4)
  • document.forms[0].elements[0] (4)
  • document.forms[0].elements[3] (7)
You can use Selenium itself as well as other sites and extensions to explore the DOM of your web application. A good reference exists on W3Schools.

Locating Hyperlinks by Link Text

January 18, 2011 0
Locating Hyperlinks by Link Text
Locating Hyperlinks by Link Text:



This is a simple method of locating a hyperlink in your web page by using the text of the link. If two links with the same text are present, then the first match will be used.
1
2
3
4
5
6
7

 
Are you sure you want to do this?

  href="continue.html">Continue
  href="cancel.html">Cancel
  • link=Continue (4)
  • link=Cancel (5)
More Real time examples coming soon...

Locating Element by XPath

January 18, 2011 0
Locating Element by XPath
Locating Element by XPATH:



XPath is the language used for locating nodes in an XML document. 
As HTML can be an implementation of XML (XHTML), Selenium users can leverage this powerful language to target elements in their web applications. 
XPath extends beyond (as well as supporting) the simple methods of locating by id or name attributes, and opens up all sorts of new possibilities such as locating the third checkbox on the page.

One of the main reasons for using XPath is when you don’t have a suitable id or name attribute for the element you wish to locate. You can use XPath to either locate the element in absolute terms (not advised), or relative to an element that does have an id or name attribute. 


XPath locators can also be used to specify elements via attributes other than id and name.
Absolute XPaths contain the location of all elements from the root (html) and as a result are likely to fail with only the slightest adjustment to the application. 


By finding a nearby element with an id or name attribute (ideally a parent element) you can locate your target element based on the relationship. This is much less likely to change and can make your tests more robust.

Since only xpath locators start with “//”, it is not necessary to include the xpath= label when specifying an XPath locator.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

 
   id="loginForm">
    name="username" type="text" />
    name="password" type="password" />
    name="continue" type="submit" value="Login" />
    name="continue" type="button" value="Clear" />
  
  • xpath=/html/body/form[1] (3) - Absolute path (would break if the HTML was changed only slightly)
  • //form[1] (3) - First form element in the HTML
  • xpath=//form[@id='loginForm'] (3) - The form element with attribute named ‘id’ and the value ‘loginForm’
  • xpath=//form[input/\@name='username'] (4) - First form element with an input child element with attribute named ‘name’ and the value ‘username’
  • //input[@name='username'] (4) - First input element with attribute named ‘name’ and the value ‘username’
  • //form[@id='loginForm']/input[1] (4) - First input child element of the form element with attribute named ‘id’ and the value ‘loginForm’
  • //input[@name='continue'][@type='button'] (7) - Input with attribute named ‘name’ and the value ‘continue’ and attribute named ‘type’ and the value ‘button’
  • //form[@id='loginForm']/input[4] (7) - Fourth input child element of the form element with attribute named ‘id’ and value ‘loginForm’
These examples cover some basics, but in order to learn more, the following references are recommended:
There are also a couple of very useful Firefox Add-ons that can assist in discovering the XPath of an element:
  • XPath Checker - suggests XPath and can be used to test XPath results.
Firebug - XPath suggestions are just one of the many powerful features of this very useful add-on.


More real time examples ...coming soon

January 15, 2011

Verifying Page Elements and Locating Elements

January 15, 2011 0
Verifying Page Elements and Locating Elements
Verifying Page Elements


Verifying UI elements on a web page is probably the most common feature of your automated tests. Selenese allows multiple ways of checking for UI elements. It is important that you understand these different methods because these methods define what you are actually testing.
For example, will you test that...
  1. an element is present somewhere on the page?
  2. specific text is somewhere on the page?
  3. specific text is at a specific location on the page?
For example, if you are testing a text heading, the text and its position at the top of the page are probably relevant for your test. If, however, you are testing for the existence of an image on the home page, and the web designers frequently change the specific image file along with its position on the page, then you only want to test that an image (as opposed to the specific image file) exists somewhere on the page.

Locating Elements


For many Selenium commands, a target is required. This target identifies an element in the content of the web application, and consists of the location strategy followed by the location in the format locatorType=location. The locator type can be omitted in many cases. The various locator types are explained below with examples for each

Locating by Identifier
Locating by Id
Locating by Name
Locating Hyperlinks by Link Text
Locating by DOM
Locating by XPath
Locating by CSS


The Details will be in Next post...