[BUG] subtree intercepts pointer events, Unable to click

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

[Zoidster]

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

[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');