[BUG] Unable to click on a web component button with an SVG inside

[kblok]

Context:

• Playwright Version: 1.21.1
• Operating System: Mac
• Node.js version: v14.19
• Browser: Chromium

Code Snippet

const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch({headless: false});
  let page = await browser.newPage();
  await page.goto('https://cdn.synerg-adp.com/versions/v11/showcase/');
  await page.click('sdf-icon-button.burger button');
  await browser.close();
})();

Describe the bug

I'm trying to click on a button inside a web component sdf-icon-button.
This component hydrates that button, using a slot, with another component called sdf-icon. That component has a typical burger svg icon inside.

When I try to click on sdf-icon-button.burger button, playwright fails to click on it because it finds that there is another element intercepting the click.

  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
  <path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-…></path> from <sdf-icon aria-hidden="true" role="presentation" class="m-…></sdf-icon> subtree intercepts pointer events
retrying click action, attempt #47
  waiting 500ms
====================

But that path element from the sdf-icon is inside the button. A naive response would be: yeah, of course, it's intercepting the click because that icon is inside the button I want to click.
I know that a workaround would be getting deeper into de DOM, but I would like to rely on the fact that I want to click on that button as a generic solution.
Maybe all this is because of all this Shadow DOM nesting?

[lemnis]

Use await page.click('sdf-icon-button.burger button', { force: true });

[dedie]

I appear to be having the same (or at least similar) problem, without force: true

E       retrying click action, attempt #57
E         waiting 500ms
E         waiting for element to be visible, enabled and stable
E         element is visible, enabled and stable
E         scrolling into view if needed
E         done scrolling
E         <div id="orders" class="ordersScreen" data-display="a…>…</div> intercepts pointer events
E       retrying click action, attempt #58
E         waiting 500ms

Unfortunately the intercepting element is also "clickable" so enabling force clicks on that element instead, is there another work around I can try?

Cheers

[lattemisa]

Yes, I am facing the same issue? Any on this?

[rudolfbyker]

This also happens with Vuetify's VCheckbox component, because it has an extra div which is displayed over the input element, to make the ripple effect. {force:true} makes it work.