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('asd113@gmail.com');
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();
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: