Selenium Learning Notes Webdriver for page element positioning __selenium

Source: Internet
Author: User
Tags parent directory tag name xpath chrome developer

Web page automation testing, the elements on the page positioning and operation is the core. And the operation is the premise of positioning, therefore, the positioning of page elements is the basis for automated testing.

The elements on the page, like people, have various attributes, such as element names, element IDs, element attributes (class attributes, name attributes), and so on. Webdriver is the use of these attributes of elements to locate.

Common element attributes that can be used for positioning:

The ID name Class name Tag name link text partial link text XPath CSS selector corresponds to the positioning method in Webdriver: Driver.find_element_by_ Name ()--most commonly used, simple driver.find_element_by_id ()--most commonly used, simple driver.find_element_by_class_name () Driver.find_element_by_tag _name ()--least reliable driver.find_element_by_link_text ()--Positioning text connection easy to use Driver.find_element_by_partial_link_text ()--Positioning text connection easy to use Driver.find_element_by_xpath ()--most flexible, universal driver.find_element_by_css_selector () above is a method of locating an element, The corresponding Webdriver also has a way of locating a set of elements: Driver.find_elements_by_name () driver.find_elements_by_id () driver.find_elements_by_ Class_name () Driver.find_elements_by_tag_name () Driver.find_elements_by_link_text () driver.find_elements_by_ Partial_link_text () Driver.find_elements_by_xpath () Driver.find_elements_by_css_selector () so the problem came. How to view the elements of the name,id,class,tag,text,xpath,css selector. You can use the Firefox browser's Firebug plugin (which requires manual installation) in the Firepath tool or the Chrome Developer tool (Chrome itself). Friebug Open the Firefox browser's Firebug plug-in, click on the top left mouse arrow, and then click on the elements on the page, Firebug plug-in HTML tab will see the page code, the mouse moved to the Element tab click. For example, we click on Baidu home Page "Baidu click" button:
You can see properties such as the Id,tag,class of the element from the Firepath.
The Chrome Developer tool (F12) opens the Chrome browser and presses the F12 of the keyboard to open the developer tool. You can get the same results from the developer tools as Firepath:

So the question comes again, so many attributes can be used to locate, so what do we choose? In fact, the method of locating elements is not good or bad, different scenarios have different methods of application, as long as the only location of a single element of the method can be used.ID and name positioningThis is a simple and efficient method. For example, Baidu Home text box to locate the method, we can use the ID to locate (the element provided by the id attribute, you can only locate it):

driver.find_element_by_id (' kw ')
Positioning Baidu Homepage in the upper right corner of the "Settings" link, we can use the name to locate (the element provided by the Name property, you can only locate it):
Driver.find_element_by_name (' Tj_trnews ')
class name and tag name positioningNot all front-end developers like to add IDs and name two attributes to each element, but beyond that you must have found an element that has not only ID and name, but also a class attribute, and that each element will have a tag tag.
or positioning Baidu homepage of the text box, in addition to the ID method positioning, we can also use class name to locate (the element provided by the class attribute, you can only locate it).
Driver.find_element_by_class_name ("S_ipt")
Tag name positioning should be the least reliable of all positioning methods, because elements with the same tag name in one page are extremely easy to appear and rarely unique. There's no need to learn it. link text and partial link text positioningSometimes the element that needs to be manipulated is a text link, so we can position the element through link text or partial link text. For example, positioning Baidu homepage in the upper right corner of the "News", "hao123", .... Wait, these text connections. You can use the link text and Partail link text positioning method. You can first use Firebug to look at the source page:

Position by Linx text:
Find_element_by_link_text ("News")
Find_element_by_link_text ("Post Bar")
Navigate through Partail link text:
Find_element_by_link_text ("new")
Find_element_by_link_text ("Paste")
XPath PositioningXPath is a document location language. Because HTML can be seen as an implementation of XML, selenium users can use this powerful language to locate in Web applications. Absolute path method: from the root element, when the level of the element is very deep, the path will be written very long, poor reading, and difficult to maintain. It is not recommended to make an absolute path such a method. Relative path method: Through the Firebug very easy to get the relative path of XPath, open the Firebug plug-in, on the page search text box, you can show XPath:
<pre name= "code" class= "Python" >driver.find_element_by_xpath ("//*[@id = ' kw ']"). Click ()
The above wording can be understood as an element of ' kw ' with an arbitrary (* representative) ID attribute, found through XPath. Of course, we can also replace the * with the input, namely:
Driver.find_element_by_xpath ("//input[@id = ' kw ']"). Click ()
This can be interpreted as an INPUT element with an arbitrary id attribute of ' kw ', which is found through XPath.
Sometimes, you need to locate the current element based on the attributes of the parent directory:
Find_element_by_xpath ("//span[@id = ' Input-container ']/input") #通过上一级目录的id attribute positioning
Find_element_by_xpath ("//div[@ Id= ' HD ']/form/span/input ') #通过上三级目录的id attribute positioning
find_element_by_xpath ("//div[@name = ' q ']/form/span/input ')" Navigate through the Name property of the level three directory
CSS PositioningThis positioning method is more difficult to understand. TBD is not encountered in the current work and must be used in this way to locate the element.
on the positioning problem of automationThe element positioning of automated testing has been an obstacle to novice automation testing, as we encounter a wide variety of object elements in automating implementation. Although XPath and CSS can be positioned to complex and difficult to locate elements, compared with the ID and name to increase the maintenance costs and learning costs, compared to the Id/name positioning method is more intuitive and maintainable, with new members to join the automation also increases the cost of learning. Therefore, testers in the implementation of automated testing must do a good job of communication, the specification front-end developers to add id/name attributes to the element, or have their own permissions to modify the HTML code.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.