Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(textContent): make it work for ShadowRoot (#26690)

Browse source 
It used to work, but regressed in v1.36.

Fixes #26636.
This commit is contained in:
Dmitry Gozman 2023-08-24 12:59:42 -07:00 committed by GitHub
parent 6d4f937674
commit 0ecc13038f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/playwright-core/src/server/injected/injectedScript.ts
View file

@ -208,6 +208,12 @@ export class InjectedScript {
throw this.createStacklessError('Internal error: there should not be a capture in the selector.');
}
// Workaround so that ":scope" matches the ShadowRoot.
// This is, unfortunately, because an ElementHandle can point to any Node (including ShadowRoot/Document/etc),
// and not just to an Element, and we support various APIs on ElementHandle like "textContent()".
if (root.nodeType === 11 /* Node.DOCUMENT_FRAGMENT_NODE */ && selector.parts.length === 1 && selector.parts[0].name === 'css' && selector.parts[0].source === ':scope')
return [root as Element];
this._evaluator.begin();
try {
let roots = new Set<Element>([root as Element]);

14
tests/page/elementhandle-convenience.spec.ts
View file

@ -88,6 +88,20 @@ it('textContent should work', async ({ page, server }) => {
expect(await page.textContent('#inner')).toBe('Text,\nmore text');
});
it('textContent should work on ShadowRoot', async ({ page, server }) => {
await page.setContent(`
<div></div>
<script>
document.querySelector('div').attachShadow({ mode: 'open' }).innerHTML = '<div>hello</div>';
</script>
`);
const div = await page.$('div');
const root = await div.evaluateHandle(div => div.shadowRoot);
expect(await root.textContent()).toBe('hello');
// We do not match ShadowRoot as ":scope".
expect(await root.$$(':scope div')).toEqual([]);
});
it('isVisible and isHidden should work', async ({ page }) => {
await page.setContent(`<div>Hi</div><span></span>`);