Element positioning of Web Automation

One 、 Basic element positioning

Locate through an attribute ：
Take Baidu browser as an example ： Positioning Baidu input box
How to locate elements in the browser ：
Press F12, Click on the arrow in the upper left corner , Green , Then click the input box , You can see , There's a piece of code input The label is highlighted , It's located .
You can see inpu label , Yes id class name attribute , These elements can be used for element positioning .

1、 adopt id location
2、 adopt name location
3、 adopt class location
4、 adopt xapth location
5、 adopt css location
Code implementation ：

from selenium import webdriver
import logging
import time
logging.basicConfig(level=logging.DEBUG)
#  Start the browser driver server 
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
time.sleep(3)
# id Positioning Baidu input box 
# res = driver.find_element_by_id("kw")
# print(res)


# class  location 
# res = driver.find_element_by_class_name('s_ipt')
# print(res)


# name location 
# res = driver.find_element_by_name("wd")
# print(res)


#  adopt css location 
res = driver.find_element_by_css_selector("#kw")
print(res)
res.send_keys(" Winter Olympic Games ")

#  Click Baidu 
res2 = driver.find_element_by_id("su")
res2.click()

time.sleep(5)
# driver.close()
driver.quit()

Add ： How to find css and xPath Relative path and absolute path
On the label of the element that is located Right click -> Copy ->

The difference between the above positioning methods ：

 Common ground ： Only one attribute can be used to locate 
 Difference ：
1、find_element_by_id： adopt id  Positioning elements 
   （1）、id Is the only one. , In general id It's for js With 
2、find_element_by_tag_name： Locate the element by tag name 
   （1）、 Label name is not unique 
3、find_element_by_class_name： Locate the element by class name (class')
   （1）、class  Is not the only 
   （2）、 If you want to pass class To locate , Make sure you locate this element class It has to be unique 
4、find_element_by_name： Through elements name Attribute positioning element ( Elements are required name attribute )
   （1）、 The element has to have name attribute 
   （2）、name Attributes are not necessarily unique 
5、find_element_by_link_text：a Tag passed 【 Exactly match 】 Hyperlink text positioning element ( Hyperlink text must be unique , You can't have Spaces )
6、find_element_by_partial_link_text：a Tag passed 【 Fuzzy matching 】 Hyperlink text positioning element ( Hyperlink text must be unique )
 Multiple attribute combinations can be used to locate 
7、find_element_by_xpath： Locate elements by path 
   （1）、 Absolute path location 【 no need 】
   （2）、 Relative path positioning 【 Common omnipotent 】

Detailed explanation xpath location

Two 、 Locate through the attributes of the element itself

1、 Tag name + Property name
A condition ：//input[@class=“s_ipt”]

Multiple conditions ：//input[@class=“s_ipt” and @id=“kw”]

Navigate to multiple elements , Take value through index , Index value from 1 Start ：//input[@type=“hidden”][2]

2、 Tag name + Text positioning
//a[text()=“ Journalism ”]

3、 Tag name +contains() Function matches partial attribute values or text content positioning
//a[contains(text(),“ Journalism ”)]
By fuzzy matching , It matches to 2 individual ：

4、 Tag name + Multiple attribute combination positioning , Any combination is OK , Use logical operators and or
//a[@name=“tj_briicon” or contains(text(),“ more ”)] Locate the 2 individual

//a[@name=“tj_briicon” and contains(text(),“ more ”)] Locate the 1 individual
Or you can write like this ：
//a[@name=“tj_briicon” or text() = “ more ”] Locate the 2 individual
//a[@name=“tj_briicon” and text() = “ more ”] Locate the 1 individual

3、 ... and 、 Locate through the relationship between elements （ Axis positioning ）

1、 Hierarchical positioning
(1) Locate only direct child nodes ： Use one /
eg:
//span[@id=“s_kw_wrap”]/input

(2) Locate all grandchildren ：
eg:
//div[@id=“s_fm”]//a

Write this to locate the div There are below 5 individual a label , If you want to locate a specific ： You can add attributes
//div[@id=“s_fm”]//a[text()=“ Handwriting ”]

2、 Axis name 1：ancestor: Ancestral node , Include parent nodes
eg:
adopt 3 We can always trust the United Chinese team , look for 1 Melting of ice and snow An appointment to the Winter Olympics

//span[text()=" We can always trust the United Chinese team "]/ancestor::ul/li//span[text()=" Ice and snow as the medium   An appointment to the Winter Olympics "]

3、 Axis name 2：parent: Parent node
//span[text()=“ We can always trust the United Chinese team ”]/parent::a/span[text()=“ heat ”]

4、 Axis name 3：following: Current node 【 after 】 All nodes of
//div[@id=“viewClassDetailRoot”]//following::div[@id=“tab-2,8”]

5、 Axis name 4：preceding: Current node 【 Before 】 All nodes of
//div[text()=“ Interactive courseware ”]//preceding::div[@class=“bar-item active”]

6、 Axis name 5：following-sibling: Current node 【 after 】 All the siblings of
eg:
//div[text()=“ test ”]/following-sibling::div[@aria-controls=“pane-7”]

7、 Axis name 6：preceding-sibling: Current node 【 Before 】 All the siblings of
eg:
//div[text()=“ test ”]/preceding-sibling::div[@aria-controls=“pane-1”]