自动化失败总结：误点选项

问题一：误点另一个选项中的link

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

问题分析

脚本的实现方式

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

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 element。

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

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

问题二： dropdown list点击超时

原因分析

解决方法

Best Practice

• 需要选择radio button或者checkbox的时候，使用check()并且locator应该定位到label
• locator精准定位，避免过于宽泛
• dropdown list在选择前后，opacity可能会发生变化。为了避免opacity=0的时候click失败，可以使用forceClick