[BUG] "subtree intercepts pointer events" when clicking component with scheduled rotation

[mypchas6fans]

Context:

• Playwright Version: [1.19.1]
• Operating System: [Win 10]
• Node.js version: [14.18.3]
• Browser: [Desktop Chromium, Desktop Firefox]
• Extra: [any specific details about your environment]

Code Snippet

import { test, Page } from '@playwright/test';

test.describe('pc smoke', () => {
  let page: Page

  test.beforeEach(async ({ browser }) => {
    const context = await browser.newContext();
    page = await context.newPage();
    await page.goto('https://www.ikea.cn/cn/zh');
    await page.evaluate(() => window.localStorage.setItem('dismissedSurveyActivityIds', '["survey-activity-for-covid19"]'));
    await page.evaluate(() => window.localStorage.setItem('footerCookie', '0'));
    await page.locator('button.ikeacn-consent-modal__button').nth(1).click();
  });

  test('home-search-add', async () => {
    await page.locator('input.s-input').click();
    await page.locator('input.inputSearch').fill('pax');
    await page.keyboard.press('Enter');
    await page.waitForNavigation();
  });
});

Describe the bug

We are starting to test https://www.ikea.cn/cn/zh with playwright.
One feature is that recommended search keyword will be rotating in the search input. (For /cn/zh Chinese version only, but you don't need to understand Chinese)
And we hit below error frequently when trying to click "input.s-input". Not every time, but I'm sure if you try 5 - 10 times you will definitely hit it.
Any advise will be appreciated. Thank you.

Similar to #10638 but PLAYWRIGHT_NO_LAYOUT_SHIFT_CHECK seems not helpful.

C:\Users\totao\Downloads\playwright>npx playwright test tests/search.spec.ts --headed

Running 1 test using 1 worker

1. [chromium] › search.spec.ts:18:3 › pc smoke › home-search-add =================================

Timeout of 30000ms exceeded.

locator.click: Target closed
=========================== logs ===========================
waiting for selector "input.s-input"
  selector resolved to visible <input value="" class="s-input" data-v-e937ae80="" aria…/>
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
  checking that element receives pointer events at (877.25,71)
  <div class="notice" data-v-925d6144="">…</div> from <div data-v-925d6144="" data-v-e937ae80="" class="not…>…</div> subtree intercepts pointer events

......
============================================================

  17 |
  18 |   test('home-search-add', async () => {
> 19 |     await page.locator('input.s-input').click();
     |                                         ^
  20 |     await page.locator('input.inputSearch').fill('pax');
  21 |     await page.keyboard.press('Enter');
  22 |     await page.waitForNavigation();

    at C:\Users\totao\Downloads\playwright\tests\search.spec.ts:19:41
    at C:\Users\totao\Downloads\playwright\node_modules\@playwright\test\lib\workerRunner.js:373:13
    at TestInfoImpl._runFn (C:\Users\totao\Downloads\playwright\node_modules\@playwright\test\lib\testInfo.js:164:7)        at WorkerRunner._runTestWithBeforeHooks (C:\Users\totao\Downloads\playwright\node_modules\@playwright\test\lib\workerRunner.js:348:24)
    at TestInfoImpl._runWithTimeout (C:\Users\totao\Downloads\playwright\node_modules\@playwright\test\lib\testInfo.js:152:7)
    at WorkerRunner._runTestOrAllHook (C:\Users\totao\Downloads\playwright\node_modules\@playwright\test\lib\workerRunner.js:308:5)
    at WorkerRunner._runSuite (C:\Users\totao\Downloads\playwright\node_modules\@playwright\test\lib\workerRunner.js:221:43)
    at WorkerRunner._runSuite (C:\Users\totao\Downloads\playwright\node_modules\@playwright\test\lib\workerRunner.js:217:9)
    at WorkerRunner.run (C:\Users\totao\Downloads\playwright\node_modules\@playwright\test\lib\workerRunner.js:163:9)
    at process.<anonymous> (C:\Users\totao\Downloads\playwright\node_modules\@playwright\test\lib\worker.js:94:5)

attachment #1: screenshot (image/png) ----------------------------------------------------------
test-results\search-pc-smoke-home-search-add-chromium\test-failed-1.png
------------------------------------------------------------------------------------------------

Slow test file: [chromium] › search.spec.ts (30s)
Consider splitting slow test files to speed up parallel execution

1 failed
[chromium] › search.spec.ts:18:3 › pc smoke › home-search-add ==================================

[dgozman]

@mypchas6fans Thank you for the issue!

I ran the snippet 15 times and it passed every time. I'd suggest to record a trace and see yourself whether <div class="notice" data-v-925d6144="">…</div> does indeed overlay the element you are trying to click. If it does, you have a few options:

• Use force: true click option and hope that this element does not interfere with clicking, although it most likely does.
• Fix the actual page so that rotating keyword does not block the input, for example add pointer-events: none to it.
• Disable this rotation feature when testing.

[ghost]

Hi,
I have a bug there :
https://stackoverflow.com/questions/72795146/how-to-inject-a-script-using-playwright-that-will-create-an-unique-attribute-o

It is related to the 'pointer intercept' error... the click does not happen. I cannot get a trace because the click instruction loops.

Fix the actual page so that rotating keyword does not block the input, for example add pointer-events: none to it.
Disable this rotation feature when testing.

How I could do that when I am scrapping a page (I do not own the HTML to modify it). I should do it with playwright maybe ? If yes, I am also looking for an example how to do it. More precisely, a little bit out of topic, I would like to know how to inject a script, that would add a data-id-attribute to all buttons, so that I could easily guess the locator.

Tks,

"playwright": "^1.22.2",

[ilanb1996]

@regnou Did you managed to solve this issue? i have a very similar issue with the same playwright version

[davemo]

.click({ force: true }) worked for me, thanks for filing this issue! 🤓

[tetianaman]

I have a button inside div which intercepts click event.
.click({ force: true }) works for me, however I'm not sure if it's a great solution.

[pradeipp]

Hi @dgozman I have an app where I get a discount UI popup at random intervals. I wanted to handle that using an event listener whenever a click was being intercepted. is there a way to catch the 'subtree intercepts pointer events' message via an event listener?
I tried page.on('console') listener and apparently the 'subtree intercepts pointer events' message is not logged into the console.
I also tried page.on('pageerror') with no luck..

Edit: I think the message is logged into the process logger.. I'm guessing there's no way to listen/subscribe to that log event?

[federicoromeo]

FYI i fixed this error with:
webdriver.page.set_viewport_size({"width": width, "height": height})

[happygirlcici]

I met this issue, and fixed by set up viewport: { width: 1960, height: 1080 }