如何处理另一个元素拦截剧作家中的点击？

Question

我正在学习剧作家并将我的技能应用到这个网站。但在尝试对产品进行评分时，星级会出现问题。我成功找到了它，但是当我尝试单击它时，另一个元素拦截了该操作。

这是显示的错误：

Call log:
  - waiting for getByLabel('4 stars')
  -   locator resolved to <input value="19" type="radio" id="Rating_4" class="rad…/>
  - attempting click action
  -   waiting for element to be visible, enabled and stable
  -   element is visible, enabled and stable
  -   scrolling into view if needed
  -   done scrolling
  -   <label for="Rating_1" title="1 star" class="rating-1" i…>…</label> intercepts pointer events

这是我使用的代码。单击或检查都不起作用。

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 }).click();
  await page.getByLabel('Email', { exact: true }).fill('[email protected]');
  await page.getByLabel('Email', { exact: true }).press('Tab');
  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();
  await page.getByLabel('4 stars').check();

Answer 1

经典的网页抓取技术是当受信任的可见性驱动的点击失败时，使用基于 JS 的不受信任的点击：

await page.getByLabel('4 stars').evaluate(e => e.click());