自动化测试误点选项链接

问题描述

在一个功能测试场景中，目标是通过自动化脚本选择一个选项列表中的第二个选项。但在实际执行过程中，脚本却错误地点击到了第一个选项。
预期行为：脚本正确选择第二个选项。
实际行为：脚本点击了第一个选项，甚至触发了第一个选项后链接的跳转，导致测试失败。

问题分析

脚本的实现方式

在原测试脚本中，通过以下方式定位：

const optionLocator = page.locator('#types', { hasText: 'Option 2' });
await optionLocator.click();

问题原因

检查代码的时候没有发现什么问题，这里用的#types是三个选项的上层parent element，再通过text选到第二个选项，但是由于第一个选项文本中包含了一个链接，click()操作会点击到可交互区域，偏移到了链接上。

解决方法

优化交互操作：使用check()

针对这种radio button，使用check可以精准实现勾选到目标选项
。修改代码如下：

const radioLocator = page.locator('#types', { hasText: 'Option 2' });
await radioLocator.check();

新问题：check()报错

尝试运行后发现，虽然改用check()，但依然报错原因是check()方法到使用要求locator必须直接作用于label元素，而原代码的locator不准确，定位到label的parent。

调整locator的范围后，运行成功：

const radioLocator = page.locator('label:has-text("Option 2")');
await radioLocator.check();

总结

问题回顾

自动化测试中误点问题往往和定位方式或操作方式不当有关，这次的问题是：

1. 使用了不适合的click()方法
2. locator的定位范围过大，且不匹配操作方法

Best Practice

• 需要选择radio button或者checkbox的时候，使用check()并且locator应该定位到label
• locator精准定位，避免过于宽泛