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...