曲鸟全栈UI自动化教学(三):Selenium页面操作原理及如何高效的进行元素定位

简介: 曲鸟全栈UI自动化教学(三):Selenium页面操作原理及如何高效的进行元素定位

一、前言


上篇文章中我们成功编写并启动了第一个selenium脚本。那Selenium是怎样知道我们想要操作哪个元素的呢?

这篇文章将为你讲解Selenium的页面操作原理和高效的元素定位方法。


二、Selenium是如何操作页面元素的?


Selenium首先会查找我们给予的元素地址是否存在,如果存在则进行我们指定的操作。

例如上篇文章中的这行代码,它用于在百度搜索框输入曲鸟 csdn:


# 在输入框输入:曲鸟 csdn

driver.find_element(By.XPATH, '//*[@id="kw"]').send_keys('曲鸟 csdn')


代码解释:首先,我们通过【driver.find_element】方法,给予了两个参数:


1.定位的方法:Xpath;

2.元素地址://*[@id="kw"];


通过这两个参数得以让Selenium能够找到百度的搜索框元素,再通过【send_keys】方法传递想要输入的内容曲鸟 csdn,Selenium就会在其进行输入。


上面的例子使用的定位方法是Xpath,除此之外Selenium还支持七种(共八种)定位方法:

c608601d49204fc78d4c2fbcbdbd3c80.png


是不是感觉有点多?但我们无需全部掌握它们!


我们无需花太多精力在学习定位上,虽然我们的每个自动化操作都需要进行元素定位,但浏览器的调试工具已经可以帮我们获取元素地址了。


有小伙伴会说,通过工具定位出来的元素地址一长串是否会影响调试和体验呢?

其实担心是多余的,首先元素地址不同于代码,它不太需要具备可读性。只要能够定位成功且有一定的稳定性就行了。其次,如果你为了减少元素地址的长度,而花时间去手写元素地址的话,这个时间会是通过工具定位的数倍!自动化测试本就需要高效的完成脚本,减少自动化用例编写的时间占比,从而达到高效自动化的目的。现在为了元素地址的可读性来增加自动化编写的时长是得不偿失的!并且现在随着react、vue的普及,前端组件化应用的越来越多,通过【id、name、class】这些定位方式已经不太适用了 (前提是开发不愿意加唯一标识(唯一的【id、name】等)的情况下) 所以完全没必要花大量的时间去搞懂八种定位,只需要简单了解即可。

另外一点,Xpath定位很强大,花时间搞懂Xpath远比花时间去学习完八种定位要高效的多!


Xpath相对CSS选择器来说更灵活,虽然Xpath性能对于CSS选择器来说性能会差一些,但做自动化测试半秒一秒的差距也毫不影响。


三、高效的定位方法和Xpath定位讲解


1. 利用浏览器工具

【Chrome】浏览器自带了定位方式的获取工具,按下F12(右键鼠标,点击"检查")也可以,按图中的步骤操作就可以获取到需要操作的元素地址

2021071615293988.png


但在我们实际应用过程中,会出现定工具获取的Xpath定位地址,代码跑起来定位不到的情况!这种情况一般可能是因为元素的id是动态的(重新访问页面元素的id会变)或者所属层级冲突(操作页面步骤的顺序改变导致层级优先级不同)这个时候就可以借助Xpath的高级运用(文本关键字匹配,条件匹配等)来解决。


2.Xpath定位简单介绍


1. 绝对定位

通过【Chrome】自带的定位工具,选择【Copy full XPath】得到的就是xpath绝对路径 (非特殊情况不建议使用,使用相对定位即可)


45eef4ae4cbc4c05bb1d1b0e7d5ae571.png


路径代码


/html/body/div/div[2]/div[5]/div[1]/div/form/span[1]/input


2. 相对定位


通过【Chrome】自带的定位工具,选择【Copy XPath】得到的就是xpath相对路径 (推荐使用)

d4bdf20f14914bf2aae9384a25d2c912.png

路径代码

下面的代码会查找id等于kw的元素:


//*[@id="kw"]


3. Xpath代码解释


1. //和/的区别和含义:

//代表会在所有节点去进行查找,如果要指定层级或逐层查找的话可以使用/。

举个例子:

下面的xml代码含义:一个班级下有两个学生【曲鸟 男】、【张三 女】:


<class>
<student>
  <name>曲鸟</name>
  <gender>男</gender>
</student>
<student>
  <name>张三</name>
  <gender>女</gender>
</student>
</class>


1)现在我们想获取第一个学生的信息可以这样写:


/class/student[1]


输出结果


<name>曲鸟</name>
  <gender>男</gender>


2)想获取第一个学生的名称可以这样写:


/class/student[1]/name


输出结果


曲鸟


上面的代码是一层一层(class->student->name),那是否可以不指定层级,直接查找名称呢?


3)通过//获取学生名称:


/class/name


甚至还可以这样写


//name


输出结果


张三


虽然获取到姓名了,但变成张三了,如果你通过//name[1]的方式来获取的话,会发现执行失效!

所以,//是不能够指定下标的,如果想获取曲鸟的话可以通过校验文本的方式来匹配:


//name[text()="曲鸟"]


Xpath在线练习地址:https://www.bejson.com/testtools/xpath/


2. *的含义


*代表匹配任何元素节点,通过分析下图百度搜索框的源码发现它的标签为input,那么我们将代码改为这样//input[@id="kw"]也是可行的。

d065cdf5c08c468dbd051372cacbf7bb.png

3. []的含义


[]中用于放置具体的匹配规则,之前代码中的[@id="kw"]代表匹配id等于kw的元素;分析上图红框标签的属性会发现,如果替换为[@name="wd"]也是能够匹配成功的;还可以改写为[@class="s_ipt"];


4. Xpath的模糊匹配和条件匹配


Xpath中=用于全匹配,那它支持模糊匹配吗?


答案是支持的,Xpath中=必须一模一样才算匹配成功。Xpath也可以通过contains进行模糊匹配,之前代码中的[@id="kw"]可以改写为[contains(@id, "k")]这样也能够匹配成功。它的含义为匹配id名称包含k的元素。


如果有两个id都包含k那不是就匹配失败了吗?


是的,这个时候就可以使用Xpath的条件判断,例如有两个元素,他们的id分别为:kw1、kw2。我们想通过模糊匹配来匹配kw1的话,可以这样写[contains(@id,"k") and contains(@id,"1")],代码含义为匹配id名称既包含k又包含1的元素。


Xpath支持的条件【and、or、not、contains、starts-with、string(.)】:


//input[@type="text" and @name="wd"]
//input[@type="text" or @name="wd"]
//input[@type="text" and not(contains(@name,'wd'))]
//input[starts-with(@text,"te")]
//input[ends-with(@text,"te")]
//input[contains(@name, "wd")]

Xpath可以通过显示的文本进行匹配吗?


可以的,下面是百度页右上角【新闻】标签的源码

5472a056e14044fb91cff3e39243a430.png


通过文本匹配的话,代码可以这样写 (类似于八大定位方式中的By.LINK_TEXT):

//*[text()="新闻"]


通过闻字模糊匹配的话可以这样写 (类似于八大定位方式中的By.PARTIAL_LINK_TEXT):

//*[contains(text(),"闻")]


四、总结


Xpath的功能还有很多,但对于自动化来讲掌握上述这几种常用方法已经足够了!万一还不够用,我们还可以通过airtest【图像识别】的定位方法来解决。

可以阅读 重复元素如何定位区分?Selenium的缺点让图像识别来弥补 这篇文章进行了解。后续也会在该专栏的实战篇中进行详细图像识别定位的教学,欢迎订阅本专栏!


目录
相关文章
|
人工智能 Ubuntu 前端开发
Dify部署全栈指南:AI从Ubuntu配置到HTTPS自动化的10倍秘籍
本文档介绍如何部署Dify后端服务及前端界面,涵盖系统环境要求、依赖安装、代码拉取、环境变量配置、服务启动、数据库管理及常见问题解决方案,适用于开发与生产环境部署。
2004 1
|
数据采集 测试技术 Python
自动化淘宝秒杀:使用Selenium WebDriver的实战指南
本文详细介绍了如何利用Selenium WebDriver自动化淘宝秒杀操作,包括环境配置、代码实现及注意事项,旨在帮助读者提升秒杀成功率,同时提醒合理使用以遵守平台规则。
1228 132
|
Web App开发 数据采集 JavaScript
CDP与Selenium相结合——玩转网页端自动化数据采集/爬取程序
本文介绍了Selenium、Chrome DevTools及Chrome DevTools Protocol (CDP) 的基本功能与应用。Selenium是一款开源自动化测试工具,适用于网页端应用程序测试和数据采集,具备跨平台特性。Chrome DevTools内置浏览器中,提供调试、分析Web应用程序的功能,包括元素、控制台、源代码和网络选项卡等。CDP是一套用于与Chromium内核浏览器通信的API,支持自动化测试和性能分析。文中还展示了Selenium与CDP结合使用的示例,如捕获网络请求数据和打印网页内容,并推荐了相关书籍和资源以供深入学习。
2499 39
CDP与Selenium相结合——玩转网页端自动化数据采集/爬取程序
|
人工智能 自然语言处理 API
UI-TARS:字节跳动开源专注于多平台 GUI 自动化交互的视觉语言模型
UI-TARS 是字节跳动推出的新一代原生图形用户界面(GUI)代理模型,支持跨平台自动化交互,具备强大的感知、推理、行动和记忆能力,能够通过自然语言指令完成复杂任务。
4536 16
UI-TARS:字节跳动开源专注于多平台 GUI 自动化交互的视觉语言模型
|
Web App开发 IDE JavaScript
Selenium IDE:Web自动化测试的得力助手
Selenium IDE:Web自动化测试的利器。作为开源工具,Selenium IDE支持录制与回放用户操作,适用于Chrome、Firefox等多浏览器,简化了测试流程,提升了效率,降低了自动化测试的门槛。它还支持导出多种编程语言的脚本,便于测试集成与复用。
669 31
Selenium IDE:Web自动化测试的得力助手
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
1493 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
JavaScript 前端开发 测试技术
selenium的底层核心原理
Selenium 是一个强大的Web应用自动化测试工具,通过模拟用户与浏览器的交互来测试Web应用。其核心组件WebDriver支持多种浏览器,通过HTTP请求管理和操作浏览器会话,实现跨浏览器和跨平台的自动化测试。Selenium Grid支持分布式测试,提高测试效率。作为一个开源项目,Selenium不断发展,适应快速变化的Web技术。
|
Web App开发 前端开发 JavaScript
探索Python科学计算的边界:利用Selenium进行Web应用性能测试与优化
【10月更文挑战第6天】随着互联网技术的发展,Web应用程序已经成为人们日常生活和工作中不可或缺的一部分。这些应用不仅需要提供丰富的功能,还必须具备良好的性能表现以保证用户体验。性能测试是确保Web应用能够快速响应用户请求并处理大量并发访问的关键步骤之一。本文将探讨如何使用Python结合Selenium来进行Web应用的性能测试,并通过实际代码示例展示如何识别瓶颈及优化应用。
1152 5
|
Web App开发 IDE 测试技术
Selenium:强大的 Web 自动化测试工具
Selenium 是一款强大的 Web 自动化测试工具,包括 Selenium IDE、WebDriver 和 Grid 三大组件,支持多种编程语言和跨平台操作。它能有效提高测试效率,解决跨浏览器兼容性问题,进行性能测试和数据驱动测试,尽管存在学习曲线较陡、不稳定等缺点,但其优势明显,是自动化测试领域的首选工具。
1551 17
Selenium:强大的 Web 自动化测试工具
|
Java 测试技术 C#
自动化测试之美:从Selenium到Appium
【10月更文挑战第3天】在软件开发的海洋中,自动化测试如同一艘航船,引领着质量保证的方向。本文将带你领略自动化测试的魅力,从Web端的Selenium到移动端的Appium,我们将一探究竟,看看这些工具如何帮助我们高效地进行软件测试。你将了解到,自动化测试不仅仅是技术的展示,更是一种提升开发效率和产品质量的智慧选择。让我们一起启航,探索自动化测试的世界!