fix(hit target): workaround webkit elementsFromPoint bug (#21642)

Fixes #21596.
This commit is contained in:
Dmitry Gozman 2023-03-13 19:33:56 -07:00 committed by GitHub
parent c9837dfcc7
commit ccd5d7fd10
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 0 deletions

View File

@ -840,6 +840,15 @@ export class InjectedScript {
elements.unshift(singleElement);
}
}
if (elements[0] && elements[0].shadowRoot === root && elements[1] === singleElement) {
// Workaround webkit but where first two elements are swapped:
// <host>
// #shadow root
// <target>
// elementsFromPoint produces [<host>, <target>], while it should be [<target>, <host>]
// In this case, just ignore <host>.
elements.shift();
}
const innerElement = elements[0] as Element | undefined;
if (!innerElement)
break;

View File

@ -442,3 +442,25 @@ it('should click in iframe with padding 2', async ({ page }) => {
await locator.click();
expect(await page.evaluate('window._clicked')).toBe(true);
});
it('should click in custom element', async ({ page }) => {
await page.setContent(`
<html>
<body>
<my-input></my-input>
<script>
class MyInput extends HTMLElement {
connectedCallback() {
this.attachShadow({mode:'open'});
this.shadowRoot.innerHTML = '<div><span><input type="text" /></span></div>';
this.shadowRoot.querySelector('input').addEventListener('click', () => window.__clicked = true);
}
}
customElements.define('my-input', MyInput);
</script>
</body>
</html>
`);
await page.locator('input').click();
expect(await page.evaluate('window.__clicked')).toBe(true);
});