Your SlideShare is downloading. ×
Element Locators
Ilan Malyanker
Thursday, April 3rd, 2014
Connection Before Content
creates meaningful, real time
customer connections that help
businesses increase conversions and...
Purpose & Motivation
• Identify elements to simulate operations
• Identify elements to verify their status
• Help create r...
Terms & Code Alignment - Demo
• HTML terms in WebDriver context
• WebDriver basic usage
• Think of WebDriver as a browser ...
“By” class
• Selenium WebDriver provides By class
to support various locator strategies
• Find methods take a locator or q...
Locating Elements Using
• Id
• Links
• Tag names
• Css Selectors
• Xpath
• JQuery
• Text
Browser Tools For Element Inspection
• Firefox - „Firebug‟ add-on (right click →
„Inspect Element‟ / F12).
„FirePath‟ – Op...
Languages
• Java: driver.findElement(By.id(<element ID>))
driver.findElement(By.linkText(<linktext>))
• C#: driver.FindEle...
0 matches: throws exception (org.openqa.selenium.NoSuchElementException)
1 match: returns list of 1 WebElement instance
2+...
Id
driver.findElement(By.id(“<some_id>"));
• Seems like the ideal solution
• Id‟s don‟t always exist
• Their uniqueness is...
Links
Find elements by the text displayed on
the link
driver.findElement(By.linkText(“<link_text>"));
driver.findElement(B...
Tag Names
Find web elements based on their HTML
tags
< class="form-inline">
< class="editable-controls">
<input class="edi...
CSS Selectors (1)
• Cascading Style Sheets- language used for
describing the presentation semantics of a document
written ...
CSS Selectors (2)
Regular attribute:
tag with attribute value:
driver.findElement(By.cssSelector(“button[name=„cancel‟]"))...
CSS Selectors (3)
tag with attribute value:
driver.findElement(By.cssSelector(“img[alt=„kuku‟]"));
tag which has attribute...
CSS Selectors, advanced (last css slide)
The first child of a tag with id:
driver.findElement(By.cssSelector(“div#students...
Xpath (1)
• Xpath is a query language for selecting nodes from an
XML document.
• Xpath is based on a tree representation ...
Xpath (2)
Tag with attribute value:
driver.findElement(By.xpath(“//input[@id=„username‟]"));
Any tag with id:
driver.findE...
Xpath (3)
Attribute which starts with
driver.findElement(By.xpath(“//input[starts-with(@class,„tbl_')]"));
*there‟s also- ...
Xpath (4)
Ancestor, descendant, following, following-sibling, preceding, preceding-sibling
driver.findElement(By.xpath(“//...
Text – CSS Selectors
See if element‟s attribute contains specified text
driver.findElement(By.cssSelector(“div[id*=„my_id„...
Text – XPath
Locate element by matching exact text value
driver.findElement(By.xpath(“//td/span[text()=„Some Text‟]"));
OR...
What‟s better, xpath or css selectors?
• CSS Selectors method is faster
• Browsers themselves use css selectors
• Latest b...
JavaScript Executor for JS & JQuery
JavaScript syntax as a Java String:
String script = "return document.getElementById(„s...
Tips & Best Practices
• Locators location
• Use Enums
• Know all your working tools
• Element Detection & Highlighting
• E...
Visit my blog - software-automation-development.blogspot.com
Upcoming SlideShare
Loading in...5
×

Selenium WebDriver Element Locators

37,722

Published on

Ilan Malyanker, automation developer at LivePerson presented: "Selenium WebDriver Element locators" As part of "Selenium Israel Meetup #3", at Google Campus TLV (http://www.meetup.com/Selenium-Israel/events/169326892/)

In continuous integration world, stability and reliability of tests are placed much higher in the priority list of more and more organizations. System tests involving web sites simulation & verification would be more robust and reliable when the locators used, are carefully selected and configured.

For our tests to survive version changes,GUI updates & modifications, the following is required:

1. Use the correct locating strategy
2. Supply the appropriate locator string with maximum focus and minimum external dependencies

This is an overview of all WebDriver locator strategies, provided by selenium module.

The credit for some of the ideas and samples should be given to:
- http://www.w3schools.com/cssref/css_selectors.asp
- Selenium Testing Tools Cookbook
- http://stackoverflow.com

Published in: Technology, Design
1 Comment
52 Likes
Statistics
Notes
  • Dear all, In this website i want to scrap all companies record, but i cant get from any single record. all are same under this class name : dc59 frw44 _a _jm, i know we can get the records from for loop, but i cant get any values Pl check my code : import sys import csv from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.proxy import Proxy, ProxyType def write_row(writer, row): writer.writerow([r.encode('utf-8') for r in row]) driver = webdriver.Firefox() driver.get("https://angel.co/companies") trs={'div..dc59.frw44._a._jm'} find =driver.find_elements_by_class_name('div.base.startup') for tr in find: # remove TableHeader tr tds1 = tr.find_elements_by_css_selector('div.name') Profile_Link=tds1.find_elements_by_css_selector('div.more') print(Profile_Link) driver.close() i need your advice and solutions or idea thanks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
37,722
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
1
Likes
52
Embeds 0
No embeds

No notes for slide
  • - All examples are in Java - FindElements() - find from another element - Best practice
  • There’s also By.className, By.name
  • Transcript of "Selenium WebDriver Element Locators"

    1. 1. Element Locators Ilan Malyanker Thursday, April 3rd, 2014
    2. 2. Connection Before Content creates meaningful, real time customer connections that help businesses increase conversions and improve consumer experience. LivePerson is hiring- peoplejobs@liveperson.com Ilan Malyanker Works in LP for 3 years. 8 years as an automation engineer. Blog- http://software-automation-development.blogspot.com mail- ilanm@liveperson.com / malyankeri@yahoo.com
    3. 3. Purpose & Motivation • Identify elements to simulate operations • Identify elements to verify their status • Help create robust testing framework • Share knowledge • Expose new options for automation developers
    4. 4. Terms & Code Alignment - Demo • HTML terms in WebDriver context • WebDriver basic usage • Think of WebDriver as a browser instance • WebElement- as any seen object on the page
    5. 5. “By” class • Selenium WebDriver provides By class to support various locator strategies • Find methods take a locator or query object as an instance of By class as an argument
    6. 6. Locating Elements Using • Id • Links • Tag names • Css Selectors • Xpath • JQuery • Text
    7. 7. Browser Tools For Element Inspection • Firefox - „Firebug‟ add-on (right click → „Inspect Element‟ / F12). „FirePath‟ – Optimizing CSS & XPath • Chrome - Built-in page analyzing feature (right click → „Inspect Element‟ / F12) • IE - Developers tool („Tools‟ → „Developers Tools‟ / F12). There‟s also FireBug for IE. • Console – Immediate diagnose & execution tool. Available on all tools
    8. 8. Languages • Java: driver.findElement(By.id(<element ID>)) driver.findElement(By.linkText(<linktext>)) • C#: driver.FindElement(By.Id(<elementID>)) driver.FindElement(By.LinkText(<linktext >)) • Python: driver.find_element_by_id(<elementID>) driver.find_element_by_link_text(<linktext >) • Ruby: driver.find_element(:id,<elementID>) driver.find_element(:link_text,< linktext >)
    9. 9. 0 matches: throws exception (org.openqa.selenium.NoSuchElementException) 1 match: returns list of 1 WebElement instance 2+ matches: returns only first appearance in DOM 1 match: returns WebElement instance 0 matches: returns an empty list 2+ matches: returns list with all matching instances FindElement vs. FindElements findElement() findElements()
    10. 10. Id driver.findElement(By.id(“<some_id>")); • Seems like the ideal solution • Id‟s don‟t always exist • Their uniqueness is not enforced • What about dynamic elements? • Might be used for other future purposes • Code injected from different sources (potential override) • Against web developers best practices
    11. 11. Links Find elements by the text displayed on the link driver.findElement(By.linkText(“<link_text>")); driver.findElement(By.partialLinkText(“<link_partial_text>"))
    12. 12. Tag Names Find web elements based on their HTML tags < class="form-inline"> < class="editable-controls"> <input class="editable-has-buttons" type="text"> <span class="editable-buttons"> <button class="btn btn-primary" type="submit"> <button class="btn btn-danger"> </span> </div> </form> driver.findElement(By.tagName("input")); *See that your tag is unique
    13. 13. CSS Selectors (1) • Cascading Style Sheets- language used for describing the presentation semantics of a document written in a markup language such as HTML or XML. • Browsers implement CSS parsing engines for formatting or styling the pages using CSS syntax. Absolute path: driver.findElement(By.cssSelector(“html>body>div>p>input")); Relative path: driver.findElement(By.cssSelector(“input")) *the first instance found
    14. 14. CSS Selectors (2) Regular attribute: tag with attribute value: driver.findElement(By.cssSelector(“button[name=„cancel‟]")); Special attributes: id: driver.findElement(By.cssSelector(“#save")); tag & id: driver.findElement(By.cssSelector(“button#save")); class attribute: driver.findElement(By.cssSelector(“.yoyo")); tag & class attribute: driver.findElement(By.cssSelector(“input.username"));
    15. 15. CSS Selectors (3) tag with attribute value: driver.findElement(By.cssSelector(“img[alt=„kuku‟]")); tag which has attribute: driver.findElement(By.cssSelector(“img[alt]")); tag which doesn‟t have attribute: driver.findElement(By.cssSelector(“img:not([alt])"));
    16. 16. CSS Selectors, advanced (last css slide) The first child of a tag with id: driver.findElement(By.cssSelector(“div#students:first-child")); The n-th child of a tag with id : driver.findElement(By.cssSelector(“form#loginForm:nth-child(3)")); Second descendent of div with id : driver.findElement(By.cssSelector(“div#ilan>p+*+p")); (first) tag which is enabled: driver.findElement(By.cssSelector(“button:enabled"));
    17. 17. Xpath (1) • Xpath is a query language for selecting nodes from an XML document. • Xpath is based on a tree representation of the XML document and provides the ability to navigate around the tree. Absolute path: driver.findElement(By.xpath(“html/body/div/p/input")); Relative path: driver.findElement(By.xpath(“//input"))
    18. 18. Xpath (2) Tag with attribute value: driver.findElement(By.xpath(“//input[@id=„username‟]")); Any tag with id: driver.findElement(By.xpath(“//*[@id=„myId']")); Operator „and‟: driver.findElement(By.xpath(“//input[@type='submit'][@value='Login']”)); driver.findElement(By.xpath(“//input[@type='submit„ and @value='Login']”)); Opertor or: driver.findElement(By.xpath(“//input[@type='stam„ or @class=„LP']"));
    19. 19. Xpath (3) Attribute which starts with driver.findElement(By.xpath(“//input[starts-with(@class,„tbl_')]")); *there‟s also- ends-with() Attribute contains text: driver.findElement(By.xpath(“//input[contains(@id,'userName')]")); Match value to any attribute: driver.findElement(By.xpath("//input[@*='username']"));
    20. 20. Xpath (4) Ancestor, descendant, following, following-sibling, preceding, preceding-sibling driver.findElement(By.xpath(“//td[text()='Product 1']/ancestor::table")); element.findElement(By.xpath(“/table/descendant::td/input")); *can only be applied from another WebElement Use parent to get to same-hierarchy object: driver.findElement(By.xpath("//div/input[@class=„kuku‟]/../button"));
    21. 21. Text – CSS Selectors See if element‟s attribute contains specified text driver.findElement(By.cssSelector(“div[id*=„my_id„]")); (Also- ^ starts with, $ ends with) See if element contains specified text driver.findElement(By.cssSelector(“input:contains(„Some Text')")); *deprecated from CSS3 specification innerText attribute driver.findElement(By.cssSelector("td[innerText=„Some Text']")); *Doesn‟t work in FireFox textContent: driver.findElement(By.cssSelector("td[textContent=„text']")); *For FireFox
    22. 22. Text – XPath Locate element by matching exact text value driver.findElement(By.xpath(“//td/span[text()=„Some Text‟]")); OR driver.findElement(By.xpath("//td/span[.=„Some Text‟]")); See if Element contains specified text driver.findElement(By.xpath("//td[contains(text(),„Some Text')]"));
    23. 23. What‟s better, xpath or css selectors? • CSS Selectors method is faster • Browsers themselves use css selectors • Latest browsers optimize the use of css Selectors • Xpath- common language for xml/html parsing • Xpath is a two-way search mechanism (up&down the DOM tree) • Xpath handles text recognition better
    24. 24. JavaScript Executor for JS & JQuery JavaScript syntax as a Java String: String script = "return document.getElementById(„some-id');"; OR Jquery syntax as a Java String: String script = "return jQuery('#some-id').get(0);"; JavascriptExecutor executor = (JavascriptExecutor)driver; WebElement element = (WebElement)executor.executeScript(script); • Opens a world of client side manipulations • jQuery() method uses- css selectors i. jQuery lib should be loaded on the page ii. Same executor runs both types of scripts iii. jQuery returns a collection, hence extract the first instance iv. The “$” – sign could also represent jQuery namespace
    25. 25. Tips & Best Practices • Locators location • Use Enums • Know all your working tools • Element Detection & Highlighting • Expose locators and not just the methods • Work close to client developers (4 non agile developers) • Optimize your locators !! i Maximum focus ii Minimum dependencies
    26. 26. Visit my blog - software-automation-development.blogspot.com

    ×