Python+Selenium4元素定位_web自动化(3)

已于 2023-05-31 11:46:55 修改
阅读量1.2k 收藏 7
点赞数
分类专栏： Web自动化框架 文章标签： 自动化 python selenium
于 2023-01-05 14:38:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41121249/article/details/127365625
版权
文章介绍了Selenium中用于元素定位的八大策略，包括ID、NAME、TAG_NAME等，并详细讲解了CSS选择器和XPath选择器的用法，特别是XPath的语法和函数。同时，讨论了XPath的相对定位，以及Selenium4中的新特性——相对定位器，如above、below等。
摘要由CSDN通过智能技术生成

目录

0. 上节回顾

1. 八大定位

2. 定位器

3. CSS选择器

4. XPath选择器

4.1. XPath语法

4.2. XPath 函数

5. 相对定位

5.1 XPath 中的相对定位【重点】

5.1.1 相对路径

5.1.2 轴

5.2 selenium4 中的相对定位

总结

0. 上节回顾

  • 浏览器的一般操作
  • 浏览器的高级操作：窗口切换
  • 启动参数：最大化、无头模式、设置代理，通过options参数进行传递 

with get_webdriver() as driver:
    driver.get("http://118.24.147.95:8086/iframe_1.html")
    # 刚打开网页

    h2 = driver.find_element(By.TAG_NAME, "h2")
    print("a", h2.tag_name, h2.text)

    iframe = driver.find_element(By.XPATH, '//*[@id="you_frame"]')
    driver.switch_to.frame(iframe) # 完成一次iframe的切换
    h2 = driver.find_element(By.TAG_NAME, "h2")
    print("右侧b", h2.tag_name, h2.text)

    iframe = driver.find_element(By.XPATH, '//*[@id="my_frame"]')
    driver.switch_to.frame(iframe) # 又完成一次iframe的切换
    h2 = driver.find_element(By.TAG_NAME, "h2")
    print("右侧c", h2.tag_name, h2.text)
    # driver.switch_to.parent_frame() # 返回上一次层iframe
    # driver.switch_to.default_content() # 返回顶层frame
    # h2 = driver.find_element(By.TAG_NAME, "h2")
    print("d", h2.tag_name, h2.text)
任何元素都是可以被定位到的，没有例外！

操作WEB应用程序上的元素，首先是要定位到元素。

Selenium的WebDriver类提供了find_element和find_elements方法对元素进行定位。

当找到元素后，会返回一个WebElement对象，如果找不到元素，则会报NoSuchElementException异常。

find_element和find_elements的第一个参数是元素定位策略，第二个参数是对应策略需要的值。

# id定位,属性 + 操作 = webELement

1. 八大定位

在 WebDriver 中提供 8 中不同的定位策略 
<input id='search-input' name="wd" type="text" placeholder="其实搜索很简单^_^ !" value="" autocomplete="off">
<button type="submit" id="ai-topsearch" class="submit am-btn"> <i class="am-icon-search"></i> <span>搜索</span> </button>
  • ID ： 根据元素的ID属性进行定位
  • NAME： 根据元素的NAME属性进行定位
  • TAG_NAME： 根据元素的标签名进行定位
  • CLASS_NAME：根据元素的class属性进行定位（不可使用复合类名 submit am-btn ）
with get_webdriver() as driver:
    driver.get("http://101.34.221.219:8010/")

    # 根据元素的ID属性进行定位
    # ele = driver.find_element(By.ID, "search-input")
    # print("定位到的元素", ele.tag_name, ele.text)
    # 根据元素的NAME属性进行定位
    # ele = driver.find_element(By.NAME, "wd")
    # print("定位到的元素", ele.tag_name, ele.text)
    # 根据元素的标签名进行定位
    # ele = driver.find_element(By.TAG_NAME, "input")
    # print("定位到的元素", ele.tag_name, ele.text)

    # ele = driver.find_element(By.CLASS_NAME, "submit am-btn") # 定位失败 不可使用复合类名
    ele = driver.find_element(By.CLASS_NAME, "submit")  # 定位成功
    print("定位到的元素", ele.tag_name, ele.text)
  • LINK TEXT ： 根据标签TEXT，定位A标签  （精确匹配）
  • PARTIAL_LINK_TEXT ： 根据标签 部分 TEXT，定位A标签 （模糊匹配）

ele = driver.find_element(By.LINK_TEXT, "首页") # 输入完整的TEXT，精确匹配 
print("定位到的元素", ele.tag_name, ele.text) 

ele = driver.find_element(By.PARTIAL_LINK_TEXT, "首") # 输入部分的TEXT， 模 糊匹配
print("定位到的元素", ele.tag_name, ele.text)
  • CSS_SELECTOR 
ele = driver.find_element(By.CSS_SELECTOR,"#search-input")
print(ele.tag_name)
  • XPATH
思考：
1. 哪些定位策略不会被转为 CSS 选择器，会被直接使用？
  • CSS
  • XPATH
  • LINK TEXT : 只能定位A标签，局限性很大
  • PARTIAL_LINK_TEXT： 只能定位A标签，局限性很大
2. 在浏览器底层， CSS 和 XPATH 有什么区别？

2. 定位器

  • find_element 返回单个元素
  • find_elements 返回多个元素， 通过列表返回的

3. CSS选择器

CSS 是前端开发工程师，必备的技能，也是浏览器必备的能力
扩展资料：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors
https://www.w3school.com.cn/cssref/css_selectors.asp
测试工程师，至少掌握以下几种：
  • ID选择器

#ID

  • CLASS选择器

.class

  • 元素选择器

input

  • 属性选择器

input[id=search-input]

  • 通配选择器
  • 层次选择器

#goods-category > div > div > div > ul >li

调试工具：Chrome的开发者工具， 通过 $() 执行CSS选择器的表达式
#search-input
对于CSS选择器来说，定位步骤如下：
1. 在开发者工具中，选中元素
2. 右键 - 复制 - 复制 CSS 选择器
3. 在开发者工具 - 控制台，对表达式进行调优 （可选项）

  对于长的选择器 可以优化 如下：找其父节点进行选择

ele = driver.find_element(By.CSS_SELECTOR,
#"body > div.nav-search.white.am-hide-sm-only > div > div.search-bar > form"
                          ".search-bar > form")
print(ele.tag_name)

4. XPath选择器

XPATH 是 "XML 路径查询语言 " ， 是 W3C 标准： https://docs.microsoft.com/en-us/previous-versions/dotnet/netframework-4.0/ms256115(v=vs.100)
XPATH 优势：
  • 支持逻辑表达式
  • 内置函数
在 Chrome 开发者工具 - 控制台，使用 $x() 执行 XPath 表达式

4.1. XPath语法

层级表示
/html/body/div
  • / （开头） 根路径
  • / （中间）下一级

  • // 任一级

属性表示
  • @ 属性
    • id
    • name
    • class
    •  。。。。

位置表示
  • 从1开始
  • 没有-1

元素表示
  • 直接写元素名
  • * 代表所有的元素

SQL 不需要手写
CSS 不需要手写
XPATH 不需要手写
对于 XPATH 选择器来说，定位步骤如下：
        1. 在开发者工具中，选中元素
        2. 右键 - 复制 - 复制 XPATH
        3. 在开发者工具 - 控制台，对表达式进行调优 （可选项）

4.2. XPath 函数

所有的函数 ： https://www.w3school.com.cn/xpath/xpath_functions.asp
常用的函数 ：
  • text $x('//div[text()="iphoneX新品发布了"]')
  • contains
  • starts-with $x('//img[starts-with(@alt,"Meizu/魅族")]')
  • ends-with
  • last 
with get_webdriver() as driver:
    driver.get("http://101.34.221.219:8010/")

    ele0 = driver.find_element(By.XPATH, '//img[@alt="Meizu/魅族 MX4 Pro移动版 八核大屏智能手机 黑色 16G"]')
    print(ele0.tag_name)
    # // 任意曾经进行搜索
    # img 搜索img 元素
    # contains(@alt,"vivo X5MAX") alt属性中，包含了"Meizu/魅族"的元素
    ele = driver.find_element(By.XPATH, '//img[contains(@alt,"Meizu/魅族")]')
    print(ele.tag_name)

5. 相对定位

5.1 XPath 中的相对定位【重点】

四字口诀：父子兄弟

5.1.1 相对路径

相对路径 代表相对于当前节点的 单个节点 
./ 子元素 
../ 父元素

需求： 定位到商品名称 和金额

    # 不使用相对定位
    name = driver.find_element(
        By.XPATH, '//*[@id="floor2"]/div[2]/div[2]/div[6]/div/div/a'
    )
    price = driver.find_element(
        By.XPATH, '//*[@id="floor2"]/div[2]/div[2]/div[6]/div/p'
    )
    print(name.text, price.text)

    # 使用了相对定位
    ele = driver.find_element(By.XPATH,'//*[ @ id = "floor2"]/div[2]/div[2]/div[6]/div') # 定位共同父元素
    name1 = ele.find_element(By.XPATH, ".//a")  # 使用相对定位
    price1 = ele.find_element(By.XPATH, ".//p")  # 使用相对定位

5.1.2 轴

轴定位 代表相对于当前节点的 N个节点

轴名称
结果
following
自身之前的所有元素
preceding
自身之后的所有元素
ancestor
所有先辈（父、祖父等）
ancestor-or-self
所有先辈（父、祖父等）以及自身
parent
父节点
preceding-sibling
所有兄节点
self
自身
following -sibling
所有弟节点
child
所有子元素
descendant-or-self
所有后代元素（子、孙等）以及当前节点本身
descendant
所有后代元素（子、孙等） 

with get_webdriver() as driver:
    driver.get("http://101.34.221.219:8010/")
    name = driver.find_element( By.XPATH, '//*[@id="floor2"]/div[2]/div[2]/div[6]/div/div/a' )
    price = name.find_element(By.XPATH, "ancestor::*[2]/p")
    # ancestor，所有的祖先，爸爸最近，爷爷第二。。。。。。
    # ：：轴的语法
    # * 所有类型的祖先
    # [2] 距离第二近
    # /下一级
    # p 定位p元素
    print(name.text, price.text)

5.2 selenium4 中的相对定位

四字口诀：上下左右

工作中不要使用

相对定位器
作用
above
在指定元素上方进行搜索
below
在指定元素下方进行搜索
to_left_of
在指定元素左侧进行搜索
to_right_of
在指定元素右侧进行搜索
near
在指定元素附近（ 50px ）进行搜索 

driver = webdriver.Chrome()  # 启动浏览器 是空白页
driver.get("http://101.34.221.219:8010/")
# 定位 内衣
ele = driver.find_element(By.XPATH, '//*[@id="floor2"]/div[2]/div[1]/div[1]/a[3]')
# 定位 ele 上方 a 标签
n_ele = driver.find_element(locate_with(By.TAG_NAME, "a").above(ele))
assert n_ele.text == "女装"
# 定位 ele 下方 a 标签
n_ele = driver.find_element(locate_with(By.TAG_NAME, "a").below(ele))
assert n_ele.text == "女鞋"
# 定位 ele 右边 a 标签
n_ele = driver.find_element(locate_with(By.TAG_NAME, "a").to_right_of(ele))
assert n_ele.text == "运动"
原理：通过 JS 代码，遍历附近所有元素的 rect( 坐标和大小 ), 然后进行元素筛选定位
优势： 根据元素实际展示效果进行定位，不关系具体层级
弊端：效率低下，准确的低、通用性差，很多时候无法按照预期进行工作

总结

  • 从selenium 的角度，定位有八种策略
  • 从浏览器的角度，定位有2种选择器
    • CSS选择器， 通用性好，执行效率高，是selenium 推荐的选择器
    • XPATH选择器，效率高，有很多的函数，用法灵活
  • 底层都是通过JS实现的
  • 相对定位：
    • XPath 相对定位：能用
    • selenium4 相对定位： 不能用
实际项目中，一般统一封装为 XPATH 选择器

天草柑橘
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
自动化测试系列-selenium4新特性
IT教育任姐姐的博客
12-19 5218
在开发 Selenium 3.x 版本时，实现了对 W3C WebDriver 标准的支持。支持这个新协议和旧的 JSON 有线协议。在 3.11 版左右，Selenium 代码开始符合 W3C 1 级规范。最新版本的 Selenium 3 中的 W3C 兼容代码将在 Selenium 4 中按预期工作。 在某些情况下，升级仍然会存在依赖项的问题，比如使用python的pip进行selenium安装的时候会出现依赖异常。 一、升级依赖关系 使用 Python 的最重要变化是所需的最低版本，Sele..
你需要知道的 Selenium4 新特性
苟日新，日日新，又日新!!!
05-31 1782
本篇文章来介绍Selneium4较比Selenium3的一些新特性。语法上有一些变化，有一些弃用的方法等。 最令人惊喜的是，Selenium4会自动回收浏览器资源。快来学习吧！
selenium4 自动化测试--环境安装和基础操作
小衫虎
12-21 2759
最近也有很多人私下问我，selenium学习难吗，基础入门的学习内容很多是3以前的版本资料，对于有基础的人来说，3到4的差别虽然有，但是不足以影响自己，但是对于没有学过的人来说，通过资料再到自己写的代码，发现有些东西没有，有些方法又不相同，导致脚本不能运行，提醒我，看是否能花点时间，把selenium的内容好好梳理一下，从基础开始，到能够梳理出一个selenium的知识图谱更好。
【Python爬虫】selenium4新版本使用指南
最新发布
YJT1002的博客
05-28 517
以上就是本文的所有内容，总结了selenium4在使用过程中常见的一些坑，以及官方所推荐使用的方式。
Python+Selenium4环境搭建_安装selenium4，软件测试基础入门教程
2401_84252820的博客
04-17 438
人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
CSS中position中的各个属性
weixin_44139167的博客
09-11 601
static：position中默认元素，没有定位，出现在正常的流中。 relative：相对定位，可以利用left，right，top，bottom来给元素定位，所以变成相对定位。 absolute：绝对定位，是相对于除了static以外的第一个父元素进行定位，使用left right top bottom定位。 fixed：也是绝对定位，但是和absolute的绝对地位不一样，fixed相对于...
python xpath定位元素方法_Python爬虫杂记 - Xpath高级用法
weixin_39758696的博客
11-23 1211
xpath 高级用法1. 匹配当前节点下的所有： .//. 表示当前// 表示当前标签下的所有标签注： 要配合使用2. 匹配某标签的属性值： /@属性名称这里以input里的value值为例：例：xpath(//input/@value)3. 匹配多个路径：|在一个xpath中写的多个表达式用 | 分开， 每个表达式互不干扰。例：xpath("//tr[6]/td[2]/text() | /...
UI自动化测试（Python）Web-自动化常用元素定位
大家好，我是小羊
03-29 645
浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具。包含了对HTML查看和编 辑、Javascript控制台、网络状况监视等功能，是开发JavaScript、CSS、HTML和Ajax的得力助手。（俗称F12） 就是按下F12键就会进入开发者工具，只对于谷歌浏览器用户来说。
python3+selenium4自动化测试-元素定位之find_element()-基础篇4
热门推荐
谜城的博客
05-21 2万+
学习selenium自动化测试，如何使用WebDriver在页面上准确的查找到要操作的元素是最基本的技术之一，以百度搜索为例，我们要想使用selenium完成搜索操作，打开浏览器进入百度首页后的第一件事，就是找到我们要操作的元素，如文字输入框、百度一下按钮等 而要想完成元素定位，Selenium WebDriver为我们提供了多种元素选择器，其中，定位单个元素使用方法find_element()，包括： 1、通过ID属性定位 一般来说，如果需要定位的元素的ID属性可用、独特且始终可预知的，使用ID属性定
Python+selenium4 自动化签到
weixin_62007227的博客
04-13 1188
python+selenium库的使用
WebDriver--定位元素的8种方式
weixin_30466421的博客
08-24 337
在UI层面的自动化测试开发中，元素的定位与操作是基础，也是经常遇到的困难所在。webdriver提供了8种定位： 1. id定位：find_element_by_id("id值")；id属性是唯一的 1 driver.find_element_by_id("loginName").clear()#用户名输入框的id属性 2 driver.find_element_by_id("login...
selenium4 元素定位
weixin_39843945的博客
10-23 450
/span[text()=“柠檬班导师ice”]/ancestor:td/following-sibling:td//span[text0=“私信”]//span[text()=“柠檬班导师ice”]/ancestor::tr//span[text()=“私信”]⑥following:: 表示选取当前节点的结束标签之后的所有的元素。//p[text()=‘课程人数’]/preceding-sibling::p。④preceding:: 表示选取当前节点的开始标签之前的所有的节点。
selenium4.0中的find_element方法（最新）
fulk6667g78o8的专栏
04-10 1万+
selenium是一款十分强大的Web应用自动化框架，我们可以通过它来自动操控浏览器。操控浏览器的实质是操控浏览器的界面元素，因此定位元素是使用selenium的关键，selenium中通过find_element方法来完成定位。 1.find_element的三种用法 （1）通过webdriver对象的find_element("属性名","属性值")         如1：我们...
Selenium 4.0 相对定位
fighting
10-17 745
相对定位分为五种类型：上、下、左、右、靠近。 以百度搜索为例，简单示例如下： from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.relative_locator import locate_with # 启动浏览器 driver = webdriver.Chrome() # 访问url driver.get('https://www.ba
Python+Selenium4元素交互1_web自动化(5)
天草柑橘的博客
02-23 1014
元素交互（1）：点击、强制点击、输入、按键、拖动、滚动条、ActionChain
测开系列Selenium Webdriver Python（21）--元素定位2
软件测试技术交流分享
09-08 264
以上学习的是element的基本属性和方法，那么验证点添加的技巧和方式是什么呢？我们知道自动化的过程就是人的手工测试的过程，在手工测试中需要人来判断业务是否达到需求要求，那么在自动化脚本中就要加入程序代码的判断来代替人工。这种在自动化脚本中添加的验证代码，叫做验证点。
【Selenium4自动化测试（5）】定位元素
刘春明的博客
07-16 796
操作WEB应用程序上的元素，首先是要定位到元素。Selenium的WebDriver类提供了和方法对元素进行定位。当找到元素后，会返回一个WebElement对象，如果找不到元素，则会报异常。和的第一个参数是元素定位策略，第二个参数是对应策略需要的值。...
在selenium测试中使用XPATH功能函数starts-with、contains、descendant、ancestor、text()定位网页元素
可口可乐的博客
01-07 5114
转载地址：http://blog.csdn.net/godenbird312/article/details/41444587 项目中一些使用xpath函数的复杂例子，记录于此 1. 使用starts-with //div[starts-with(@id,'res')]//table//tr//td[2]//table//tr//td//a//span[contains(.,
Python Selenium Webdriver 元素定位
沧海黎明
09-26 571
Python Selenium Webdriver 元素定位 简单介绍： 1、webdriver属于selenium体系中设计出来操作浏览器的一套API，webdriver是python的一个用于实现web自动化的第三方库； 2、自动化要做的就是迷你鼠标和键盘来操作这些元素，比如点击、输入等，操作这些元素，必须先找到它们，所以webdriver中提供了8种元素定位的方法： find_element...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天草柑橘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值