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

Insert picture description here

Comparison of similar functions between XPath and CSS