Playwright中如何处理元素点击被拦截的问题？

从错误日志能看到，你定位的是Rating_4这个radio输入框，但实际被label[for="Rating_1"]拦截了点击事件——这是因为Magento的星级评分组件里，可点击的星级图标是label元素，它覆盖在对应的radio输入框上方，用来接收用户的点击操作。直接操作隐藏的radio会被上层label拦截。

解决方案 #

方法1：直接点击对应的label元素（推荐，模拟真实用户行为）

通过label的title属性或者for属性定位，直接点击可见的星级标签：

// 方法A：通过title定位
await page.getByTitle('4 stars').click();

// 方法B：通过for属性定位对应radio的label
await page.locator('label[for="Rating_4"]').click();

方法2：强制点击radio输入框（不推荐，非真实用户行为）

如果一定要操作radio元素，可以添加force: true参数强制跳过元素拦截检查：

await page.getByLabel('4 stars').check({ force: true });

修改后的完整代码示例 #

test('test', async ({ page }) => {
  await page.goto('https://magento.softwaretestingboard.com/');
  await page.getByRole('link', { name: 'Sign In' }).click();
  await page.getByLabel('Email', { exact: true }).fill('asd113@gmail.com');
  await page.getByLabel('Password').fill('Aa123456');
  await page.getByLabel('Password').press('Enter');
  await page.getByRole('menuitem', { name: ' Men' }).click();
  await page.getByRole('link', { name: 'Jackets' }).click();
  await page.getByRole('link', { name: 'Typhon Performance Fleece-' }).first().click();
  await page.getByRole('link', { name: 'Reviews ' }).click();
  // 替换成点击label的代码
  await page.getByTitle('4 stars').click();
});

补充说明 #

这类表单控件的设计通常都是用label来关联隐藏的输入元素，既保证了可访问性，又能实现自定义视觉样式。所以自动化测试时，应该优先操作用户实际可见并交互的元素（也就是label），而不是底层的输入控件。

内容的提问来源于stack exchange，提问作者TryingHard