Preface
This chapter mainly describes the WebDriver element positioning in detail.
Note: All methods are based on the fireFox browser
1. WebDriver element positioning method (8 types)
- id
- name
- class_name
- tag_name
- link_text
- partial_link_text
- Xpath
- Css
1. id element positioning
- HTML stipulates that the id attribute must be unique in the entire HTML document . ID positioning is to locate the element through the id attribute of the element; premise: the element has an id attribute
1) ID positioning method: find_element_by_id()
2) Example: search for "Taobao" on the Baidu page
# 导入selenium
from selenium import webdriver
from time import sleep
# 实例化浏览器
driver = webdriver.Firefox()
#打开百度页面
driver.get("http://www.baidu.com")
#通过find_element_by_id()方法定位元素
driver.find_element_by_id("kw").send_keys("淘宝网")
#点击百度一下按钮
driver.find_element_by_id("su").click()
sleep(3)
driver.quit()
2.name element positioning
1) Name positioning method: find_element_by_name()
2) Name positioning implementation: refer to the id element positioning step (only need to change the method and pass in the name attribute value)
3.class_name element positioning
1) class_name positioning method: find_element_by_class_name()
2) class_name positioning implementation: refer to the id element positioning step (only need to change the method and pass in the class attribute value)
4.tag_name positioning (generally not used)
1) Tag_name positioning method: find_element_by_tag_name()
returns: the first tag that meets the conditions
2) tag_name positioning realization: refer to id element positioning steps
5.link_text positioning
1) Link_text positioning method: find_element_by_link_text()
Note: you need to pass in all the text of the a tag , that is, a complete match, otherwise the positioning will not succeed
6.partial_link_text positioning
- partial_link_text positioning is a supplement to link_text positioning, partial_like_text is fuzzy matching ; link_text
all matches
1) Partial_link_text positioning method: find_element_by_partial_link_text()
2) The local text of a label needs to be passed in -can express uniqueness
2. Focus on Xpath and Css positioning
- First, why should I learn Xpath and CSS positioning?
- In the actual project, the tag does not have id, name, and class attributes
- The attribute values of id, name, and class are obtained dynamically and change with refresh or load
1.Xpath
- concept
XPath is short for XML Path, and it is a language used to determine the location of a certain part of an XML document.
HTML can be seen as an implementation of XML, so Selenium users can use this powerful language to locate elements in web applications.
Tip: Xpath is a powerful language because it has a very flexible positioning strategy;
- Xpath positioning strategy (method)
- Path-location
1). Absolute path
2). Relative path - Use element attributes-positioning
- Combination of hierarchy and attributes-positioning
- Combination of attribute and logic-positioning
Xpath positioning method: driver.find_element_by_xpath()
1. Path positioning (absolute path, relative path)
-
Absolute path: from the outermost element to the specified element all through the element level path; such as: /html/body/div/p[2]
Note: the absolute path starts with / -
Relative path: start from the first eligible element (usually to distinguish with attributes); such as: //input[@id='userA']
Note: the relative path starts with //
2. Use element attributes
Quickly locate elements and use the unique attributes of elements;
Example: //*[@id='userA']
3 Combination of levels and attributes
The element you are looking for has no attributes, but its parent has;
Example: //*[@id='p1']/input
4 Combination of attributes and logic
Solve the problem of the same attribute with the same name between elements
Example: //*[@id='telA' and @class='telA']
5 Xpath-extension
//*[text()="xxx"]: The text content is an element of xxx
//*[starts-with(@attribute,'xxx')]: elements whose attributes start with xxx
//*[contains(@attribute,'Sxxx')]: elements that contain xxx in the attribute
2. CSS positioning (CSS positioning is highly recommended in selenium, because it is faster than XPath positioning)
- Concept
CSS (Cascading Style Sheets) is a language used to describe the display styles of HTML and XML elements; there are CSS selectors (different strategy selection elements) in the CSS language, which can also be used in Selenium ;
- CSS positioning common strategies (methods)
- id selector
- class selector
- Element selector
- Attribute selector
- Level selector
CSS positioning method: driver.find_element_by_css_selector()
1.id selector
Description: Choose according to the element id attribute
Format: #id such as: #userA <select all elements whose id attribute value is userA>
2.class selector
Description: Choose according to the element class attribute
Format: .class such as: .telA <select all elements whose class attribute value is telA>
3. Element selector
Description: Choose according to the tag name of the element
Format: element such as: input <select all input elements>
4. Attribute selector
Description: Choose according to the attribute name and value of the element
Format: [attribute=value] such as: [type="password"] <select all values whose type attribute value is password>
5. Level selector
Description: Choose according to the parent-child relationship of the element
Format: element>element such as: p>input <returns all input elements under all p elements>
Tip:> You can use spaces instead, such as: p input or p [type='password']
6. CSS extension
1.input[type^='p'] Description: elements whose type attribute starts with the letter p
2.input[type$='d'] Description: elements whose type attribute ends with the letter d
3.input[type*='w'] Description: The type attribute contains elements with the letter w
Three, summary
- CSS summary
- Comparison of similar functions between XPath and CSS