如何在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能够帮助我们避免手动选择错误的元素,并提高定位器的稳定性。
示例:

总结

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

相关推荐
左手厨刀右手茼蒿10 小时前
Flutter for OpenHarmony: Flutter 三方库 shamsi_date 助力鸿蒙应用精准适配波斯历法(中东出海必备)
android·flutter·ui·华为·自动化·harmonyos
互联网散修15 小时前
鸿蒙应用开发UI基础第三十节:循环渲染核心ForEach 实战与性能优化
ui·华为·harmonyos
程序员Ctrl喵19 小时前
状态管理与响应式编程 —— 驾驭复杂应用的“灵魂工程”
开发语言·flutter·ui·架构
AxureMost20 小时前
Seelen UI 桌面美化工具(仿MAC交互)
macos·ui·交互
I'm Jie2 天前
Swagger UI 本地化部署,解决 FastAPI Swagger UI 依赖外部 CDN 加载失败问题
python·ui·fastapi·swagger·swagger ui
爱学习的程序媛2 天前
【Web前端】优化Core Web Vitals提升用户体验
前端·ui·web·ux·用户体验
爱学习的程序媛2 天前
【Web前端】前端用户体验优化全攻略
前端·ui·交互·web·ux·用户体验
紫丁香2 天前
Selenium自动化测试详解1
python·selenium·测试工具·ui
GISer_Jing2 天前
前端组件库——shadcn/ui:轻量、自由、可拥有,解锁前端组件库的AI时代未来
前端·人工智能·ui
rjc_lihui2 天前
IntelliSense: 无法打开 源 文件 “ui_mainwindow.h“ demo\qtdemosrc\mainwindow
ui