How to handle another element intercepting the click in playwright?

I was learning Playwright and applying my skills to this website. But when trying to rate a product, there is a problem with the stars. I located it successfully but when I tried to click it another element intercepted the action.

Here is the error displayed:

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

And here is the code I use. It doesn't work either with click or check.

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();

Solution

Try the title instead of the label and force for click.

await page.getByTitle("4 stars").click({ force: true });

Sometimes, apps use non-trivial logic where hovering the element overlays it with another element that intercepts the click. This behavior is indistinguishable from a bug where element gets covered and the click is dispatched elsewhere. If you know this is taking place, you can bypass the actionability checks and force the click:

https://playwright.dev/docs/input#forcing-the-click