03. Selenium-元素定位

Frankie.Lee2024年10月28日大约 15 分钟

03. Selenium-元素定位

1. Selenium-元素定位介绍

1. 认识元素定位

为什么要进行元素定位？

元素定位
- 通过代码调⽤⽅法查找元素

手工测试

<input type="text" placeholder="手机号/邮箱" id="username" autocomplete="off">
<input type="password" placeholder="密码" id="username" autocomplete="off">
<input type="text" placeholder="验证码" id="username" autocomplete="off">

通过肉眼找到输入框，在进行操作

UI自动化
- 也要进行操作，通过什么找呢？
UI界面本质
- 就是HTML直接体现, 脚本通过HTML标签信息来找到具体的元素
如何快速查看元素的标签信息？
- 浏览器开发者工具
- 浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具,包含了对 HTML查看和编辑、Javascript控制台、网络状况监视等功能。
- 安装：无需安装，浏览器自带
- 作用：快速定位元素，查看元素信息
image-20230406095632517

2. Selenium元素定位API

举例-搜索群成员
image-20230406095954816
- 通过手机号
- 通过微信账号
- 通过微信名
- 通过部分账号信息
定位元素方式
image-20230406100003532
- id
- name
- class_name
- tag_name
- link_text
- partial_link_test
- XPATH
- CSS

2. 元素定位详解

1. id定位

概念
- 通过元素的id属性来定位元素。
前置
- 所要定位的元素必须有id属性
方法
- driver.find_element(By.ID, id属性值)

方法返回的是元素对象

演练

使用ID定位方式完成下面操作
需求：
    打开注册A.html页面，完成以下操作
    1).使用id定位，输入用户名：admin  
    2).使用id定位，输入密码：123456
    3).3秒后关闭浏览器窗口

分析:
    ①.创建浏览器驱动
    ②.打开测试网址
    ③.定位元素,调用模拟操作方法
    ④.操作完毕关闭浏览器

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By

from config import html_a_register_a_path

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get(html_a_register_a_path)
# 3、查找操作元素
# 用户名 -> id ->driver.find_element_by_id("id")
# 元素.send_keys()输入方法
driver.find_element(By.ID, "userA").send_keys("admin")
# 密码
driver.find_element(By.ID, "passwordA").send_keys("123456")
# 4、关闭浏览器
sleep(3)
driver.quit()

2. name定位

概念
- 通过元素的name属性来定位元素。
前置
- 所要定位的元素必须有name属性。
方法
- driver.find_element(By.NAME, name属性值)
如果匹配到多个符合条件的元素对象，返回第一个元素对象

演练

使用NAME定位方式完成下面操作
需求：
打开注册A.html页面，完成以下操作
1).使用name定位，输入用户名：admin  
2).使用name定位，输入密码：123456
3).3秒后关闭浏览器窗口


分析:
①.创建浏览器驱动
②.打开测试网址
③.定位元素,调用模拟操作方法
④.操作完毕关闭浏览器

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By

from config import html_a_register_a_path

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get(html_a_register_a_path)
# 3、查找操作元素
# 用户名 -> name
# 元素.send_keys()输入方法
driver.find_element(By.NAME, "userA").send_keys("admin")
# 密码
driver.find_element(By.NAME, "passwordA").send_keys("123456")
# 电话 ->class
driver.find_element(By.CLASS_NAME, "telA").send_keys("18611111111")
driver.find_element(By.NAME, "emailA").send_keys("123@163.com")

# 4、关闭浏览器
sleep(3)
driver.quit()

3. class_name 定位

概念
- 通过元素的class_name属性来定位元素。
方法
- driver.find_element(By.CLASS_NAME, class属性值)
class有多个类名，该如何挑选？
- 如果多个类名，挑选所要定位的元素所特有一个类名即可

演练

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By

from config import html_a_register_a_path

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get(html_a_register_a_path)
# 3、查找操作元素
# 用户名 -> name
# 元素.send_keys()输入方法
driver.find_element(By.NAME, "userA").send_keys("admin")
# 密码
driver.find_element(By.NAME, "passwordA").send_keys("123456")
# 电话 -> class
driver.find_element(By.CLASS_NAME, "telA").send_keys("18611111111")
driver.find_element(By.NAME, "emailA").send_keys("123@163.com")

# 4、关闭浏览器
sleep(3)
driver.quit()

4. tag_name 定位

概念
- 通过元素的标签名来定位元素。
方法
- driver.find_element(By.TAG_NAME, 标签名)

重复性高，不建议使用

演练

使用TAG_NAME定位方式完成下面操作
需求：
打开注册A.html页面，完成以下操作
1).使用tag_name定位用户名输入框，并输入：admin  
2).3秒后关闭浏览器窗口

分析:
①.创建浏览器驱动
②.打开测试网址
③.使用标签名定位确认符合条件的元素是第几个？
④.操作完毕关闭浏览器

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By

from config import html_a_register_a_path

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get(html_a_register_a_path)
# 3、查找操作元素
# 默认返回第一个元素
driver.find_element(By.TAG_NAME, "input").send_keys("admin")
# find_elements 获取元素列表
driver.find_elements(By.TAG_NAME, "input")[1].send_keys("123456")
# 4、关闭浏览器
sleep(3)
driver.quit()

5. link_text 定位概念：

概念
- 专门用来定位超链接元素(<a>标签)。
方法
- driver.find_element(By.LINK_TEXT, 超链接的全部文本内容)

演练

使用Link_Text定位方式完成下面操作
需求：
打开注册A.html页面，完成以下操作
1).使用link_text定位(访问 新浪 网站)超链接，并点击
2).3秒后关闭浏览器窗口

分析:
①.创建浏览器驱动
②.打开测试网址
③.获取要定位超链接文本类容，用拷贝的形式,定位元素
④.操作完毕关闭浏览器

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By

from config import html_a_register_path

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get(html_a_register_path)

# 3、查找操作元素
"""
    需求：点击注册页面的 新浪
    点击：元素.click()
"""
# link_text 全部值
driver.find_element(By.LINK_TEXT, "新浪").click()
sleep(2)

# partial_link_text  模糊匹配
driver.find_element(By.PARTIAL_LINK_TEXT, '好').click()

# 4、关闭浏览器
sleep(3)
driver.quit()

6. partial_link_text 定位

使用link_text定位图片标记的元素会有什么问题
- 代码过长
- 定位不到
使用局部文本来定位元素
- 方法
  - driver.find_element(By.PARTIAL_LINK_TEXT, 超链接的局部文本内容)
- 局部文本
  - 从字符串任意位置开始，一截连续字符集。

演练

使用Partail_Link_Text定位方式完成下面操作
需求：
打开注册A.html页面，完成以下操作
1).使用partial_link_text定位(访问 新浪 网站)超链接，并点击
2).3秒后关闭浏览器窗口

分析:
①.创建浏览器驱动
②.打开测试网址
③.获取要定位超链接文本部分类容（能表示该元素唯一性），用拷贝的形式,定位元素
④.操作完毕关闭浏览器

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By

from config import html_a_register_path

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get(html_a_register_path)

# 3、查找操作元素
"""
    需求：点击注册页面的 新浪
    点击：元素.click()
"""

# partial_link_text  模糊匹配
driver.find_element(By.PARTIAL_LINK_TEXT, '好').click()

# 4、关闭浏览器
sleep(3)
driver.quit()

7. xpath定位

为什么要学习xpath和css?
如果标签没有(id\name\class)3个属性，也不是链接标签，只能使用tag_name定位，比较麻烦
方便在工作用中查找元素，使用xpath和css比较方便 (支持任意属性、层级)来找元素

XPATH
XPATH定位
- XML Path简称，用于在XML文档中查找元素信息的语言。
image-20230406110453046
xml与html对比
- 类似的层级结构
- 都由标签组成
- 标签都有自己的属性信息
Selenium提供了根据XPATH来定位元素的方法
- 方法
  - el = driver.find_element(By.XPATH, "/html/body/form/div/fieldset/p[1]/input")
- 策略
  - 路径定位
  - 属性定位
  - 属性与逻辑结合
  - 层级和属性结合

1. Xpath定位-路径定位

绝对路径
- 概念：从最外层元素到指定元素之间所有经过的元素层级的路径。
- 表达式写法：绝对路径以/html根节点开始，使用/来分隔元素层级。
  - /html/body/div/fieldset/p[1]/input
- 对界面依赖强，不建议使用
相对路径
- 概念：从目标定位元素的任意层级的上级元素开始到目标元素所经过的层级的路径。
- 表达式写法：以//开始，后续每个层级都使用/来分隔。
  - //fieldset/p[1]/input

演练

使用xpath路径定位策略完成下面操作
需求：
打开注册A.html页面，完成以下操作
使用绝对路径定位用户名输入框，并输入：admin
暂停2s
使用相对路径定位用户名输入框，并输入：123

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By

from config import html_a_register_a_path

# 1、获取浏览器
driver = webdriver.Chrome()

# 2、打开url
driver.get(html_a_register_a_path)

# 3、查找操作元素
# 绝对路径
el = driver.find_element(By.XPATH, "/html/body/form/div/fieldset/p[1]/input")
el.send_keys("admin")
sleep(2)
# 清除内容
el.clear()

# 相对路径
driver.find_element(By.XPATH, "//p[1]/input").send_keys("123")
# 4、关闭浏览器
sleep(3)
driver.quit()

2. Xpath定位-属性定位

概念
- 利用元素的任意属性来进行定位
示例
- //input[@type='submit']
- //*[@value='提交']
挑选哪个属性来定位
- 挑选元素特有属性
- 挑选较为常见的：id/name/class/value
- 总之尽量挑选能精确定位到唯一元素的属性

演练

需求：打开注册A.html页面。完成以下操作：
1). 利用元素的属性信息精准定位用户名输入框，并输入:admin

from time import sleep

from selenium import webdriver
# 1、获取浏览器
from selenium.webdriver.common.by import By

from config import html_a_register_a_path

driver = webdriver.Chrome()
# 2、打开url
driver.get(html_a_register_a_path)
# 3、查找操作元素

# 单属性
driver.find_element(By.XPATH, "//input[@placeholder='账号A']").send_keys("admin")
sleep(2)

# 4、关闭浏览器
sleep(3)
driver.quit()

3. Xpath定位-多属性与逻辑结合

<body>
	<input type="submit" value="提交" class="apple"/>
	<input type="submit" value="提交" class="banana"/>
	<input type="submit" value="删除" class="apple"/>
	<input type="submit" value="删除" class=banana"/>
</body>

定位提交banana的input标签，下面的代码能定位到吗
- driver.find_element_by_xpath("//*[@value='提交']")
- driver.find_element_by_xpath("//*[@class='banana']")
利用单个属性信息定位不到想要的元素了
概念
- 利用元素多个属性来进行定位
示例
- //input[@value='提交' and @class='banana']

演练

需求：打开注册A.html页面。完成以下操作：
1). 利用属性与逻辑结合在test1输入框输入:admin

from time import sleep

from selenium import webdriver
# 1、获取浏览器
from selenium.webdriver.common.by import By

from config import html_a_register_a_path

driver = webdriver.Chrome()
# 2、打开url
driver.get(html_a_register_a_path)
# 3、查找操作元素

# 多属性
driver.find_element(By.XPATH, "//input[@placeholder='账号A' and @id='userA']").send_keys("123456")

# 4、关闭浏览器
sleep(3)
driver.quit()

4. 层级与属性结合

<body>
    <div id="test">
        <input type="submit" value="提交" class="apple"/>
    </div>
    <div id="test1">
        <input type="submit" value="提交" class="apple"/>
    </div>
</body>

定位第二个input元素，下面的表达式能定位到吗
- //input[@value='提交' and @class='apple']"
概念
- 先定位到其父级元素，然后再找到该元素。
示例
- //div[@id='test1']/input[@value='提交']
- //父标签/子标签 必须位直属子级
- //父标签//后代标签 父和子之间可以跨越元素

演练

需求：打开注册A.html页面。完成以下操作：
1). 利用层级与属性结合在test1输入框输入:admin

from time import sleep

from selenium import webdriver
# 1、获取浏览器
from selenium.webdriver.common.by import By
from config import html_a_register_path

driver = webdriver.Chrome()
# 2、打开url
driver.get(html_a_register_path)

# 3、查找操作元素
# 层级
driver.find_element(By.XPATH, "//p[@id='p1']/input").send_keys("admin")

# 4、关闭浏览器
sleep(3)
driver.quit()

5. Xpath定位-延伸

参考

<body>
	<a href="/Home/user/reg.html">注册</a>
    <a class="title-content c-link c-font-medium c-line-clamp1" href="https://www.baidu. com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&ampWd=%E6%B6%88%E6%81%AF%E7%A7%BO%E5%90%B4%E5%AD%9F%E8%BE%BE%E6%89%8B%E6%9C%AF%E6%88%90%E5%8A%9F&amprsv_idx=2&amp;rsv_dl=fybnhomepage&amp;hisfilter=1" target="_blank">
    </a>
	<span class="title-content-index c-index-single c-index-single-hot4">4</span>
	<span class="title-content-title">消息称吴孟达手术成功</span>
	<span class="title-content-mark c-text c-gap-left-small"></span>
</body>

利用元素的文本定位元素
- //*[text()='注册']
利用局部属性值定位元素
- //*[contains(@属性名,'局部属性值')]

演练

需求：打开注册A.html页面。完成以下操作：
利用局部属性定位方式定位用户名输入框输入:admin
利用文本定位的方式定位新浪超链接，并点击

from time import sleep

from selenium import webdriver
# 1、获取浏览器
from selenium.webdriver.common.by import By

from config import html_a_register_path

driver = webdriver.Chrome()
# 2、打开url
driver.get(html_a_register_path)
# 3、查找操作元素

# 扩展：包含 关键字：contains
driver.find_element(By.XPATH, "//input[contains(@placeholder,'账号')]").send_keys("admin")
sleep(2)

# 扩展：点击 根据文本定位  新浪链接
driver.find_element(By.XPATH, "//*[text()='新浪']").click()

# 4、关闭浏览器
sleep(3)
driver.quit()

6. Xpath定位综合训练

1. 打开Tpshop首页；
2. 使用 Xpath 文本定位策略定位登陆超链接，并点击；
3. 使用 Xpath 属性定位策略定位用户名输入框，输入：13800138006；
4. 使用 Xpath 属性包含定位策略定位密码输入框，输入：123456；
5. 使用 Xpath 属性与逻辑结合策略定位验证码输入框，输入：8888；
6. 使用 Xpath 层级与属性结合策略定位登陆按钮，并点击；
每步操作之后暂停2s

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get("http://192.168.10.31:9003/")
# 3、查找操作元素
# 点击登录链接 文本
driver.find_element(By.XPATH, "//*[text()='登录']").click()
# 输入用户名 属性
driver.find_element(By.XPATH, "//*[@placeholder='手机号/邮箱']").send_keys("13800138006")
# 密码 包含
driver.find_element(By.XPATH, "//*[contains(@placeholder,'密')]").send_keys("123456")
# 验证码 多属性
driver.find_element(By.XPATH, "//*[@placeholder='验证码' and @name='verify_code']").send_keys("8888")
# 登录按钮 层级
driver.find_element(By.XPATH, "//*[@class='login_bnt']/a").click()
# 退出
driver.find_element(By.XPATH, "//*[text()='安全退出']").click()

# 4、关闭浏览器
sleep(3)
driver.quit()

8. CSS定位

认识CSS定位
- CSS
  - 概念：(Cascading Style Sheets)是一种语言，用来描述HTML元素的显示样式。
  - 选择器：一种表达式，可以找到HTML中的标签元素。
- CSS定位
  - 概念
    - selenium利用选择器定位元素的定位方式。
  - 方法
    - driver.find_element(By.CSS_SELECTOR, "#userA")
  - 策略
    - ID选择器
    - 类选择器
    - 元素选择器
    - 属性选择器
    - 层级选择器

XPATH基本可以定位所有元素，为什么还要学CSS
- CSS速度更快
- 写法更简洁
CSS选择器前4种

	说明	格式
ID选择器	利用元素ID属性来选择	#id属性值
类选择器	利用元素类名属性来选择	.className
元素选择器	利用元素名称来选择	elementName
属性选择器	利用元素属性名和对应属性值来选择	[attr='value']

class有多个类名，该如何挑选？
- 挑选所要定位的元素所特有一个类名
CSS定位层级选择器
- 父子关系
  - 后代关系包含了复制关系，一般只需要记忆后代关系
  - 概念：根据元素的复制关系来选择元素
  - 表达式写法：element1 > element2
    - p[id='p1'] > input
- 后代关系
  - 概念：根据元素的上级元素来选择元素（只要是目标元素上层元素即可）
  - 表达式写法：element element2
    - p[id='p1'] input

演练

使用CLASS_NAME定位方式完成下面操作
需求：
打开注册A.html页面，完成以下操作
通过class_name定位电话号码A，并输入：18611111111
通过class_name定位电子邮箱A，并输入：123@qq.com3)
3秒后关闭浏览器窗口

分析:
①.创建浏览器驱动
②.打开测试网址
③.定位元素,调用模拟操作方法
④.操作完毕关闭浏览器

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By

import config

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get(config.html_a_register_a_path)
# 3、查找操作元素

# 用户名 id选择->#id属性值
driver.find_element(By.CSS_SELECTOR, "#userA").send_keys("admin")
# 密码 属性选择器->[属性名='属性值']
driver.find_element(By.CSS_SELECTOR, "[name='passwordA']").send_keys("123456")
# 电话 类选择器->.class属性值
driver.find_element(By.CSS_SELECTOR, ".telA").send_keys("18600000000")
sleep(2)
# 确定 标签选择器-标签名
driver.find_element(By.CSS_SELECTOR, "button").click()

# 4、关闭浏览器
sleep(3)
driver.quit()

css延伸

利用局部属性值定位元素
tagName[attribute*='局部属性值']
- "[placeholder*='账']"

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By

import config

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get(config.html_a_register_a_path)
# 3、查找操作元素
driver.find_element(By.CSS_SELECTOR, "[placeholder*='账']").send_keys("admin")
sleep(1)
driver.find_element(By.CSS_SELECTOR, "#p1>input").send_keys("admin")
# 4、关闭浏览器
sleep(3)
driver.quit()

9. 定位一组元素

定位元素时，如果出现下面的情况
- 定位到多个符合条件的元素
- 且所需要定位元素不是第一个
含义
- 定位所有符合条件的元素
return
- 返回的数据位所有符合条件的元素对象的列表
如何从返回的列表中取某一个元素对象
- 定位符合条件的一组元素后，通过下标取出指定的元素对象

演练

使用定位一组元素的方法完成下面操作
需求：
打开注册A.html页面，完成以下操作
1).使用定位一组元素（标签名）定位密码输入框，并输入：123456
2).3秒后关闭浏览器窗口

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By

from config import html_a_register_a_path

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get(html_a_register_a_path)
# 3、查找操作元素

# 查找所有的input标签
inputs = driver.find_elements(By.TAG_NAME, "input")
inputs[0].send_keys("admin")
inputs[1].send_keys("123456")
inputs[2].send_keys("13800001111")
inputs[3].send_keys("123@qq.com")

# for input in inputs:
#     input.send_keys("admin")

# 4、关闭浏览器
sleep(3)
driver.quit()

10. 小节

结论:
1.首推css定位，原因执行速度快
	如果有ID属性，使用#id
	没有id属性，使用其他有的属性 (能代表唯一的属性)
	如果属性都带不了唯一，使用层级
2.如果css解决不了，使用xpath。