如何在UI自动化测试中创建稳定的定位器?

如何在UI自动化测试中创建稳定的定位器?

  • 前言
    • [1. 避免使用绝对路径](#1. 避免使用绝对路径)
    • [2. 避免在定位器中使用索引](#2. 避免在定位器中使用索引)
    • [3. 避免多个类名的定位器](#3. 避免多个类名的定位器)
    • [4. 避免动态和自动生成的ID](#4. 避免动态和自动生成的ID)
    • [5. 确保定位器唯一](#5. 确保定位器唯一)
    • [6. 处理隐藏元素的策略](#6. 处理隐藏元素的策略)
    • [7. 谨慎使用基于文本的定位器](#7. 谨慎使用基于文本的定位器)
    • [8. 使用AI创建稳定的定位器](#8. 使用AI创建稳定的定位器)
  • 总结

前言

  • 在自动化测试中,创建稳定的定位器至关重要。脆弱的定位器经常导致测试失败,增加了维护难度,并可能引起不必要的错误;
  • 为了确保自动化测试的稳定性和可维护性,测试人员需要避免一些常见的陷阱,并根据最佳实践设计更为可靠的定位器;
  • 本文将探索如何通过一些策略,帮助你避免这些问题,并选择高效、稳定的定位器,从而提升测试的稳定性。

1. 避免使用绝对路径

在XPath或CSS选择器中,使用绝对路径定位元素是很常见的做法,然而,这种方法的稳定性较差。当页面布局发生变化时,绝对路径会频繁失效。这是因为它们依赖于元素的精确层级关系,一旦元素的层级发生调整,定位器就会失效。相反,使用相对路径能带来更多的好处:

  • 保持稳定性:即使页面结构略有变化,相对定位器仍然有效,因为它们不依赖于元素的精确层级。
  • 易于阅读和维护:如果页面上的元素发生位置变化,相对定位器不会受到影响。

示例:

不推荐的定位器:

XPath:/html/body/div[1]/div[2]/button

CSS:html > body > div:nth-child(2) > button

推荐的定位器:

XPath://button[@data-qa='submit-button']

CSS:button[data-qa='submit-button']

2. 避免在定位器中使用索引

在XPath或CSS选择器中使用索引进行定位,容易导致测试的不稳定性。因为当页面上的元素被添加或删除时,索引位置会发生变化,导致定位器失效。此外,使用索引的定位器难以理解和调试,特别是在页面元素较多的情况下。

示例:

不推荐的定位器:

XPath://div[2]/div[5]

CSS:div:nth-child(7)

推荐的定位器:

XPath://div[contains(@class, 'input-large')]

CSS:div[class*="input-large"]

3. 避免多个类名的定位器

CSS类名经常变化,尤其是在响应式设计、框架更新和代码重构过程中。因此,依赖多个类名作为定位器的元素会增加维护难度。为了减少这种风险,可以优先选择使用单一、稳定的类名,或者更可靠的属性进行定位。

示例:

不推荐的定位器:

XPath://div[@class='col-xs-1 col-sm-7 col-md-5 itemx ng-scope input-large']

CSS:div.col-xs-1.col-sm-7.col-md-5.itemx.ng-scope.input-large

推荐的定位器:

XPath://div[contains(@class, 'input-large')]

CSS:div[class*="input-large"]

4. 避免动态和自动生成的ID

对于复杂或基于组件的应用程序,框架会为元素生成动态 ID。这些ID在每次页面加载、会话或组件顺序发生变化时都会改变,这使得自动化测试中很难通过ID来准确定位元素。如果可能的话,最好使用专门为测试设计的自定义属性,或者选择有意义且唯一的属性进行定位。

示例:

不推荐的定位器:

XPath://button[@class='btn-primary-1850']

CSS:button.btn-primary-1850

推荐的定位器:

XPath://button[@data-qa='submit-button']

CSS:button[data-qa="submit-button"]

5. 确保定位器唯一

非唯一的定位器会匹配页面上的多个元素,这可能导致测试失败。因为自动化脚本可能会选中错误的元素,或者与隐藏的或禁用的元素交互。确保每个定位器唯一,能精确地标识页面上的一个元素。

解决策略:

  • 使用父子关系定位:通过元素之间的层级关系来定义元素。例如,在两个表单中,你可以通过表单ID来定位特定的输入框。
html 复制代码
<!-- 第一个表单 -->
<form id="login-form">
    <input type="email" id="email" />
    <input type="password" id="password" />
    <button id="submit-button">登录</button>
</form>

<!-- 第二个表单 -->
<form id="signup-form">
    <input type="email" id="email" />
    <input type="password" id="password" />
    <button id="submit-button">注册</button>
</form>

通过定位父级元素,如//form[@id='login-form']//input[@id='email'],可以确保定位的是正确的元素。

6. 处理隐藏元素的策略

在自动化测试中,隐藏元素可能会干扰定位器的正确性。以下是一些处理隐藏元素的策略:

  1. 检查元素属性 :检查元素的aria-hidden属性、display属性等,判断其是否隐藏。
  2. 创建基于可见性的定位器:利用唯一属性来选择可见元素。
html 复制代码
<button class="submit-button hidden" data-qa="submit-button">提交</button>
<button class="submit-button" data-qa="submit-button">提交</button>

CSS选择器:
button.submit-button:not(.hidden)

这种方式可以确保只选择可见的按钮。

7. 谨慎使用基于文本的定位器

基于文本的定位器,如button[text()='提交'],可以在页面文本内容发生变化时变得不稳定。原因可能有很多,包括内容更新、页面本地化、多语言支持等。因此,文本内容的定位器应该谨慎使用。

解决方案:

可以考虑使用预加载的测试数据策略,提前知道页面上将出现哪些文本内容,从而创建可靠的定位器。

8. 使用AI创建稳定的定位器

AI技术已经被引入到自动化测试中,用来生成更加稳定和可靠的定位器。通过训练模型来自动识别页面元素和生成有效的定位器,AI能够帮助我们避免手动选择错误的元素,并提高定位器的稳定性。
示例:

总结

在自动化测试中,创建稳定、唯一且可靠的定位器就像在复杂的城市中寻找最合适的路线。通过准确使用定位器,我们能够确保测试脚本能够稳定运行,让测试脚本将变得更加可靠、易于维护,并且能够适应页面的变化。

相关推荐
m0_748257464 小时前
使用Element UI实现前端分页,前端搜索,及el-table表格跨页选择数据,切换分页保留分页数据,限制多选数量
前端·ui·状态模式
找藉口是失败者的习惯5 小时前
深入探索 Compose 渲染流程:从 UI 树到 Skia 绘制的实现解析
ui
符小易5 小时前
Mac上安装illustrator 2025/2024总是提示130/131/已损坏等解决方法
macos·ui·illustrator
星期⑧不早八10 小时前
Axure RP全面介绍:功能、应用与中文替代方案
ui·axure
星期⑧不早八10 小时前
Axure RP:设计、原型与协作的综合平台
ui·axure
mingupup14 小时前
TesseractOCR-GUI:基于WPF/C#构建TesseractOCR简单易用的用户界面
ui·c#·wpf
大地爱1 天前
LLaMA Factory+ModelScope实战——使用 Web UI 进行监督微调
前端·ui·llama
昔人'1 天前
基于 Arco Design UI 封装的 Modal 组件
javascript·vue.js·ui·arco design
延卿2 天前
wpf DataGrid好看的样式
ui·wpf
SEO-狼术2 天前
Telerik UI for WPF 2024 Q4 Crack
ui·wpf