[BUG] subtree intercepts pointer events, Unable to click

[rr13k]

Context:

• Playwright Version: ^1.21.0
• Operating System: Windows10
• Node.js version: v16.13.0
• Browser: Chromium

Code Snippet

test('intercepts pointer events',async ({ page }) => {
  await page.goto("https://element.eleme.io/#/zh-CN/component/radio",{waitUntil:'commit'})
  await page.click("label[role=\"radio\"]:has-text(\"备选项2\") >> nth=0")
  await page.click(".demo-block.demo-zh-CN.demo-radio.hover .source div div label:nth-child(2) .el-radio__input .el-radio__original >> nth=0")
  await page.click("label[role=\"radio\"]:has-text(\"备选项1\") >> nth=0")
  await page.click(".el-radio.is-bordered .el-radio__input .el-radio__original >> nth=0")
})

Describe the bug

Add any other details about the problem here.

Pending operations:

• page.click at tests\mytest.spec.js:29:14

very long DEBUG=pw:api log

page.click: Target closed
=========================== logs ===========================
waiting for selector ".demo-block.demo-zh-CN.demo-radio.hover .source div div label:nth-child(2) .el-radio__input .el-radio__original >> nth=0"
  selector resolved to visible <input value="2" type="radio" tabindex="-1" aria-hidden…/>
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
  performing click action
  <span class="el-radio__inner"></span> intercepts pointer events
retrying click action, attempt #1
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-scrollbar__bar is-horizontal">…</div> intercepts pointer events
retrying click action, attempt #2
  waiting 20ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <span class="el-radio__inner"></span> intercepts pointer events
retrying click action, attempt #3
  waiting 100ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #4
  waiting 100ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #5
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div tabindex="-1" role="dialog" aria-label="提示" aria…>…</div> intercepts pointer events
retrying click action, attempt #6
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <p>建议大陆用户访问部署在国内的站点，是否跳转？</p> from <div tabindex="-1" role="dialog" aria-label="提示" aria…>…</div> subtree intercepts pointer events
retrying click action, attempt #7
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div tabindex="-1" role="dialog" aria-label="提示" aria…>…</div> intercepts pointer events
retrying click action, attempt #8
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div tabindex="-1" role="dialog" aria-label="提示" aria…>…</div> intercepts pointer events
retrying click action, attempt #9
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-scrollbar__bar is-horizontal">…</div> intercepts pointer events
retrying click action, attempt #10
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <span class="el-radio__inner"></span> intercepts pointer events
retrying click action, attempt #11
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #12
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #13
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-scrollbar__bar is-horizontal">…</div> intercepts pointer events
retrying click action, attempt #14
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <span class="el-radio__inner"></span> intercepts pointer events
retrying click action, attempt #15
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #16
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #17
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-scrollbar__bar is-horizontal">…</div> intercepts pointer events
retrying click action, attempt #18
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <span class="el-radio__inner"></span> intercepts pointer events
retrying click action, attempt #19
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #20
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #21
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-scrollbar__bar is-horizontal">…</div> intercepts pointer events
retrying click action, attempt #22
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <span class="el-radio__inner"></span> intercepts pointer events
retrying click action, attempt #23
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #24
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #25
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-scrollbar__bar is-horizontal">…</div> intercepts pointer events
retrying click action, attempt #26
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <span class="el-radio__inner"></span> intercepts pointer events
retrying click action, attempt #27
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #28
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #29
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-scrollbar__bar is-horizontal">…</div> intercepts pointer events
retrying click action, attempt #30
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <span class="el-radio__inner"></span> intercepts pointer events
retrying click action, attempt #31
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #32
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #33
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-scrollbar__bar is-horizontal">…</div> intercepts pointer events
retrying click action, attempt #34
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <span class="el-radio__inner"></span> intercepts pointer events
retrying click action, attempt #35
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #36
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #37
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-scrollbar__bar is-horizontal">…</div> intercepts pointer events
retrying click action, attempt #38
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <span class="el-radio__inner"></span> intercepts pointer events
retrying click action, attempt #39
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #40
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #41
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-scrollbar__bar is-horizontal">…</div> intercepts pointer events
retrying click action, attempt #42
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <span class="el-radio__inner"></span> intercepts pointer events
retrying click action, attempt #43
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #44
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #45
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-scrollbar__bar is-horizontal">…</div> intercepts pointer events
retrying click action, attempt #46
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <span class="el-radio__inner"></span> intercepts pointer events
retrying click action, attempt #47
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #48
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #49
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-scrollbar__bar is-horizontal">…</div> intercepts pointer events
retrying click action, attempt #50
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <span class="el-radio__inner"></span> intercepts pointer events
retrying click action, attempt #51
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #52
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #53
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-scrollbar__bar is-horizontal">…</div> intercepts pointer events
retrying click action, attempt #54
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <span class="el-radio__inner"></span> intercepts pointer events
retrying click action, attempt #55
  waiting 500ms
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
  <div class="el-input el-input--small">…</div> from <div data-v-73637230="" class="headerWrapper">…</div> subtree intercepts pointer events
retrying click action, attempt #56
  waiting 500ms
============================================================

  27 |   await page.goto("https://element.eleme.io/#/zh-CN/component/radio",{waitUntil:'commit'})
  28 |   await page.click("label[role=\"radio\"]:has-text(\"备选项2\") >> nth=0")
> 29 |   await page.click(".demo-block.demo-zh-CN.demo-radio.hover .source div div label:nth-child(2) .el-radio__input .el-radio__original >> nth=0")
     |              ^
  30 |   await page.click("label[role=\"radio\"]:has-text(\"备选项1\") >> nth=0")
  31 |   await page.click(".el-radio.is-bordered .el-radio__input .el-radio__original >> nth=0")
  32 |

    at E:\work\playwright\tests\mytest.spec.js:29:14

[rr13k]

This is a serious problem,I hope it gets fixed first..

[aslushnikov]

rr13k I can repro with the following snippet on all recent versions - 1.21, 1.20, 1.19 & 1.18

// a.mjs
import { chromium } from '@playwright/test';

const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();

await page.goto("https://element.eleme.io/#/zh-CN/component/radio",{waitUntil:'commit'})
await page.click('button:has-text("取消")');
await page.click("label[role=\"radio\"]:has-text(\"备选项2\") >> nth=0")

console.log('trying to click...');
await page.click(".demo-block.demo-zh-CN.demo-radio.hover .source div div label:nth-child(2) .el-radio__input .el-radio__original >> nth=0")
console.log('succeeded!!!');

await browser.close();

[rr13k]

Is there any progress so far?

[aslushnikov]

rr13k no progress, but you can work-around this with locator.dispatchEvent:

await page.locator('.demo-block.demo-zh-CN.demo-radio.hover .source div div label:nth-child(2) .el-radio__input .el-radio__original >> nth=0').dispatchEvent('click');

[rr13k]

hi, i know You can toggle locations to click , but it codegen output ,It affects my work very much

[dgozman]

I have looked at this page, and there is a span that does overlay the target input and does indeed intercept pointer events. Relaxing the selector works totally fine - just click not on the input itself, but on the parent component. Here I removed .el-radio__original part and everything works now.

await page.click(".demo-block.demo-zh-CN.demo-radio.hover .source div div label:nth-child(2) .el-radio__input >> nth=0")

I don't think there is a bug to fix here.

[LucaBastelt]

For anyone reading this, I solved this error in my case (trying to close a dropdown) by using .click({ force: true });
Maybe this helps

[PsiKai]

This is an issue for me in Webkit running on an Ubuntu container in CircleCI

The following workarounds do not work:

locator.click({ force: true })

locator.dispatchEvent("click")

With the workarounds the click event has no effect. Without the workarounds the click is intercepted as described in this issue.

---

Inspecting the DOM in the trace file does not show any blocking elements. I am selecting the innermost icon element directly, and have tried selecting the wrapping anchor tag.

Not reproducible in Firefox, or Chromium, or on my local machine, but is happening every time in my CI container.

Playwright error message:

waiting for selector "[href="http://playwright-org.lvh.me:3000/admin/team/2"]"
      selector resolved to visible <a class="pjax" href="http://playwright-org.lvh.me:…>…</a>
    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
      performing click action
      <div>…</div> intercepts pointer events

Installing playwright directly onto my container with:

npx playwright install --with-deps

Webkit install output

Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 0% 0.0s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 2% 0.5s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 6% 0.4s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 10% 0.4s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 15% 0.4s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 19% 0.3s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 23% 0.3s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 28% 0.3s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 30% 0.3s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 35% 0.3s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 40% 0.2s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 45% 0.2s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 51% 0.2s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 56% 0.2s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 59% 0.2s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 63% 0.1s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 68% 0.1s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 73% 0.1s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 76% 0.1s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 79% 0.1s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 84% 0.1s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 87% 0.0s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 92% 0.0s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 97% 0.0s Downloading Webkit 15.4 (playwright build v1641) - 90.1 Mb [] 100% 0.0s 
Webkit 15.4 (playwright build v1641) downloaded to /home/circleci/.cache/ms-playwright/webkit-1641

[dgozman]

David Irvin (@PsiKai) If you could share a repro that we can run locally, please file a new issue and we'll definitely look into it.

[PsiKai]

Dmitry Gozman (@dgozman) a repro is difficult, as the issue only appeared in CircleCI and not on my local machine. Could I share the trace file with you as a sufficient repro?

[dgozman]

David Irvin (@PsiKai) Well, sharing the trace file is better than nothing, but no guarantees we'll be able to pinpoint the issue. Ideally, you would be able to repro locally, and then debug with our tools.