曲鸟全栈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的缺点让图像识别来弥补 这篇文章进行了解。后续也会在该专栏的实战篇中进行详细图像识别定位的教学,欢迎订阅本专栏!


目录
相关文章
|
8天前
|
Java 测试技术 Python
《手把手教你》系列技巧篇(三十六)-java+ selenium自动化测试-单选和多选按钮操作-番外篇(详解教程)
【4月更文挑战第28天】本文简要介绍了自动化测试的实战应用,通过一个在线问卷调查(&lt;https://www.sojump.com/m/2792226.aspx/&gt;)为例,展示了如何遍历并点击问卷中的选项。测试思路包括找到单选和多选按钮的共性以定位元素,然后使用for循环进行点击操作。代码设计方面,提供了Java+Selenium的示例代码,通过WebDriver实现自动答题。运行代码后,可以看到控制台输出和浏览器的相应动作。文章最后做了简单的小结,强调了本次实践是对之前单选多选操作的巩固。
22 0
|
1天前
|
前端开发 Java Android开发
Android UI底层绘制原理
Android UI底层绘制原理
5 0
|
1天前
|
JavaScript 前端开发 测试技术
《手把手教你》系列技巧篇(三十八)-java+ selenium自动化测试-日历时间控件-下篇(详解教程)
【5月更文挑战第2天】在自动化测试过程中,经常会遇到处理日期控件的点击问题。宏哥之前分享过一种方法,但如果输入框是`readonly`属性,这种方法就无法奏效了。不过,通过修改元素属性,依然可以实现自动化填写日期。首先,定位到日期输入框并移除`readonly`属性,然后使用`sendKeys`方法输入日期。这样,即使输入框设置了`readonly`,也能成功处理日期控件。
13 1
|
2天前
|
Java 测试技术 Python
《手把手教你》系列技巧篇(三十七)-java+ selenium自动化测试-日历时间控件-上篇(详解教程)
【5月更文挑战第1天】该文介绍了使用Selenium自动化测试网页日历控件的方法。首先,文章提到在某些Web应用中,日历控件常用于选择日期并筛选数据。接着,它提供了两个实现思路:一是将日历视为文本输入框,直接输入日期;二是模拟用户交互,逐步选择日期。文中给出了JQueryUI网站的一个示例,并展示了对应的Java代码实现,包括点击日历、选择日期等操作。
13 0
|
8天前
|
敏捷开发 监控 测试技术
探索自动化测试工具Selenium Grid的高效集成策略
【4月更文挑战第30天】在现代Web应用的快速迭代和持续部署中,测试自动化已成为确保产品质量的关键。Selenium Grid作为一款支持多种浏览器和操作系统的测试工具,提供了并行执行测试用例的能力,极大地提升了测试效率。本文将深入探讨如何高效地将Selenium Grid集成到现有的测试框架中,以及实施过程中的最佳实践,帮助团队最大化测试覆盖率,同时降低资源消耗。
|
8天前
|
数据管理 测试技术
深入理解自动化测试框架:以Selenium为例
【4月更文挑战第30天】 随着软件开发的快速发展,自动化测试已经成为保证软件质量和提升开发效率的重要手段。本文将深入探讨自动化测试框架的核心概念,并以广泛应用的开源工具Selenium为例,解析其架构、原理及在实际项目中的运用。通过实例分析与性能评估,旨在为读者提供一套系统的自动化测试解决方案,并探讨其在复杂应用场景下的优化策略。
|
8天前
|
敏捷开发 前端开发 JavaScript
深入理解自动化测试框架:以Selenium为例
【4月更文挑战第30天】 在现代软件开发过程中,自动化测试已成为确保产品质量和加快市场投放的关键步骤。本文聚焦于流行的自动化测试框架——Selenium,探讨其架构、核心组件以及如何有效地利用Selenium进行Web应用测试。通过分析真实案例,我们将揭示Selenium在实际项目中的应用优势与面临的挑战,并提出优化策略。文章的目的在于帮助测试工程师深入理解Selenium,提升其在复杂项目中的运用效率。
|
8天前
|
前端开发 IDE 数据可视化
深入理解与应用自动化测试框架Selenium的最佳实践
【4月更文挑战第30天】 本文将深入剖析自动化测试框架Selenium的核心原理,并结合最佳实践案例,探讨如何有效提升测试覆盖率和效率。文中不仅涉及Selenium的架构解析,还将提供针对性的策略来优化测试脚本,确保测试流程的稳定性与可靠性。通过实例演示,读者可以掌握如何在不同测试场景中灵活运用Selenium,以及如何处理常见的技术挑战。
|
8天前
|
中间件 测试技术 API
探索自动化测试工具的新边界:Selenium与Appium的集成实践
【4月更文挑战第30天】 随着移动应用和Web应用的不断融合,传统的自动化测试工具需要适应新的测试环境。本文将详细分析Selenium和Appium这两款流行的自动化测试工具的集成实践,探讨如何构建一个能够同时支持Web和移动端应用的自动化测试框架。通过对比两者的技术架构、功能特性以及在实际项目中的集成过程,我们旨在为读者提供一个清晰的指导,帮助他们在复杂的应用环境中实现高效、稳定的自动化测试流程。
|
8天前
|
前端开发 测试技术 持续交付
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
【4月更文挑战第30天】本文探讨了 Flutter 应用中UI测试和自动化测试的重要性,包括保障质量、提高效率和增强开发信心。Flutter提供`flutter_test`库进行Widget测试,以及`flutter_driver`进行集成测试。UI测试涵盖界面布局、交互和状态变化的验证,最佳实践建议尽早引入测试、保持用例简洁,并结合手动测试。未来,随着Flutter技术发展,UI测试和自动化测试将更加完善,助力开发高质量应用。
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试