1 F12 工具应用
以下以 Chrome 浏览器为例:
1.1 关上
- 关上浏览器后,间接按“F12”
# 1.2 调整显示地位
- 如图:Dock side, 有四种显示地位,别离为新窗口关上、居左、底部、居右显示
1.3 页面元素查看
- 点击左上角的鼠标箭头后,鼠标挪动到页面的元素后,可查看具体的元素,如图中的“1”
- 点击图中“2”图标,能够清空以后的元素
- 如查看“百度一下”这个元素的属性,如下:
1.4 复制元素属性
- 辨认到元素后,在对应的“Elements”中,鼠标右键,进行复制元素属性
- 其中 copy 内容依据不同的元素显示会有区别,大体有以下几种意思:
Copy element: 复制元素
Copy outerHtml: 复制指定标签及标签内的所有元素
Copy selector: 复制选择器
Copy JS path: 复制 js 门路
Copy styles: 复制款式
Copy XPath: 复制 xpath
Copy full XPath: 复制残缺门路 xpath,从 html 标签开始
2 selenium 罕用定位和办法
2.1 xpath 定位
2.1.1 关系定位(门路)
- 定位子元素
//div/a
- 定位子元素或后辈元素
//div//a
- 父元素
//div/..
- 最初一个子元素
//div/div[last()]
- 第 n 个子元素
//div//tr[n]
2.1.2 元素属性
//div[@id='value']
2.1.3 层级 + 属性
//div/button/span[@id='value']
2.1.4 运算逻辑
//div/[@id='value' and @class='value']
2.1.5 文本定位
//div[text()='value']
2.1.6 罕用办法
- 属性蕴含某字段
//div[contain(@属性,'value')]
- 属性以某字段结尾
//div[start-with(@属性,'value')]
- 属性以某字段结尾
//div[ends-with(@属性,'value')]
- text 中蕴含某字段
//div[contain(text(),'value')]
2.2 css selector 定位
# css: 选择器和申明
# .class
# #id
# *
# element
# element>element
# element1 element2
# element1 element2:last-child
# [attribute='value']
# 属性蕴含某字段 //div[属性 *=‘value’)]
# 属性以某字段结尾 //div[属性 ^=‘‘value’)]
# 属性以某字段结尾 //div[属性 $=‘‘value’)]
2.3 两个办法
find_element(BY.xx,'值') 办法
find_elements(BY.xx,'值') 办法
1、导入类:from selenium.webdriver.common.by import By
2、间接传递:id,name,XPath,CSS,如 driver.find_element(‘id’,’xxx’)
3、借助 By 来传递,如 driver.find_element(‘By.ID,’xxx’)