元素定位
- 1、 一般元素定位方式
- 2、通过xpath定位
- 2.1 绝对路径定位
- 2.2 利用元素属性定位
- 2.3 层级和属性结合定位
- 2.4 使用逻辑运算符定位
- 3、通过css定位元素
- 4、通过By 定位元素
- 5、定位一组元素
- 6、浏览器自带的元素辅助定位功能：
1、 一般元素定位方式
示例网页：
......
<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">
<a href="http://tieba.baidu.com/" target="_blank" class="mnav c-font-normal c-color-t">贴吧</a>
<a href="https://wenku.baidu.com/?fr=bdpcindex" target="_blank" class="mnav c-font-normal c-color-t">一个文本很长的超链接</a>
......
- 通过id定位：
driver.find_element_by_id("kw") - 通过name定位 ：
driver.find_element_by_name("wd") - 通过class定位 ：
driver.find_element_by_class_name("s_ipt") - 通过tag定位：
driver.find_element_by_tag_name("input")tag指标签<input>、<div>、<a>等 - 通过link定位 ：
driver.find_element_by_link_text("贴吧") - 通过partical link定位 ：
driver.find_element_by_partical_link_text("一个文本")
2、通过xpath定位
2.1 绝对路径定位
原理： 类似通过xx省xx市xx区xx路xx号来定位一个人的住址，实际是通过dom树结构定位元素位置
语法：driver.find_element_by_xpath("/html/body/div/div[2]/div/div/div/from/span/input")
说明：/表示层级关系，div[2]表示第2个div
2.2 利用元素属性定位
原理：通过元素的属性值来定位元素
语法：
find element by_xpath("//input[@id='kw']")find element by_xpath("//input[@maxlength='100']")find element by _xpath("//input[@autocomplete='off]")find element by xpath("//input[@name='wd']")find element by xpath("//*[@class='bg s btn']")
说明：
//input表示当前页面的某个目录下的input标签[@id='kw']使用属性id ，对应的属性值是 kw//*不指定标签名，在所有标签中查找
2.3 层级和属性结合定位
原理：某些元素没有特殊的属性可以定位，可以先通过属性定位他的父级元素，然后再通过层级关系定位到这个元素
<form class="numberform"><input value="ejxjdsjjsssddn"><input value="ssmkdlfnskslss">
</form>
通过form父元素定位子元素中的第二个input ： driver.find_elment_by_xpath('//form[@class="numberform"]/input[2]')
2.4 使用逻辑运算符定位
<input class="listitem" name="z1">
<input class="listitem" name="z1">
<input class="listitem" name="z2">
通过 and 连接两个属性来定位元素
driver.find_elment_by_xpath('//input[@class="listitem" and @name="z2"])
3、通过css定位元素
- 通过id定位：
driver.find_element_by_css_selector("#kw") - 通过class定位 ：
driver.find_element_by_css_selector(".s_ipt") - 通过tag定位：
driver.find_element_by_css_selector("form>input") - 通过属性定位：
driver.find_element_by_css_selector("[name='kw']") - 组合定位：
find element by_css selector("span.s_ipt>input.s_ip")定位标签为span class=s_ipt下的input标签，且input标签的class= s_ip
xpath和css定位对比
| 定位方式 | xpath | css |
|---|---|---|
| 标签 | //div | div |
| by_id | //div[@id=‘elid’] | div#elid |
| by_class | //div[@class=‘elclass’] | div.elclass |
| 属性 | //div[@title=‘move mouse here’] | div[title=Move mouse here] 或 div{title^=Move] 或div[title$=here] 或 div[title*=mouse] |
| 定位子元素 | //div/parent/child | div>parent>child |
4、通过By 定位元素
通过By定位元素其实是针对以上三种方式的整合，其原理不变，使用示例如下：
from selenium.webdriver.common.by import Bydriver.find_element(By.ID,"kw")
driver.find_element(By.NAME,"wd")
driver.find_element(By.CLASS NAME,"'s ipt")
driver.find_element(By.TAG NAME,"input")
driver.find_element(By.LINK TEXT,"新闻")
driver.find_element(By.PARTIAL LINK TEXT,"新")
driver.find_element(By.XPATH,"//*[@class='bg s btn']")
driver.find_element(By.CSS SELECTOR,"span.bg s btn wr>input#su")
5、定位一组元素
定位一组元素与定位一个元素的方式类似
- 单个元素定位：
driver.find_element_by_xx - 多个元素定位：
driver.find_elements_by_xx
示例：
| 定位单个元素 | 定位一组元素 |
|---|---|
| driver.find_element_by_class_name(“s_ipt”) | driver.find_elements_by_class_name(“s_ipt”) |
| driver.find_element_by_xpath(“//*[@class=‘bg’]”) | find_elements_by_xpath(“//*[@class='bg]”) |
| driver.find_element_by_css_selector(“[name=‘kw’]”) | driver.find_elements_by_css_selector(“[name=‘kw’]”) |
| driver.find_element(By.CLASS NAME,“'s ipt”) | driver.find_elements(By.CLASS NAME,“'s ipt”) |
对一组元素进行操作，如选中下拉控件的每一个元素
html如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多选控件示例</title>
</head>
<body>
<h2>请选择您喜欢的水果：</h2>
<form><input type="checkbox" id="apple" name="fruits" value="apple"><label for="apple">苹果</label><br><input type="checkbox" id="banana" name="fruits" value="banana"><label for="banana">香蕉</label><br><input type="checkbox" id="orange" name="fruits" value="orange"><label for="orange">橙子</label><br><input type="submit" value="提交">
</form></body>
</html>
定位input ，它们有共同的name：fruits
import os
from selenium import webdriver
from selenium.webdriver.common.by import By
# 访问本地html
driver = webdriver.Chrome()
file_path ='file:///'+ os.path.abspath('checkbox.html')
driver.get(file_path)
# 定位一组checkbox
checkboxs = driver.find_elements(By.XPATH, '//input[@name="fruits"]')
# 遍历一组元素，对每个元素进行点击
for checkbox in checkboxs:checkbox.click()
6、浏览器自带的元素辅助定位功能：
chrome、edage、firefox 浏览器支持选中元素右键–>检查–>在html源码页面选中元素–>右键–>复制–>
- 复制xpath
- 复制完整xpath
- 复制selector