Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: use getHTML in the shadow root expansion #2587

Merged
merged 2 commits into from
Jul 24, 2024
Merged

fix: use getHTML in the shadow root expansion #2587

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6d25310
fix: append shadow root content in a separate sibling element
barjin Jul 23, 2024
3a1d17b
feat: use `getHTML` method with compatibility fallbacks
barjin Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages/utils/src/internals/general.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,12 @@ export function expandShadowRoots(document: Document): string {
for (const el of rootElement.querySelectorAll('*')) {
if (el.shadowRoot) {
replaceShadowDomsWithHtml(el.shadowRoot);
el.innerHTML += getShadowDomHtml(el.shadowRoot) ?? '';
let content = el.getHTML?.({ serializableShadowRoots: true }).trim();

if (!(content?.length > 0)) {
content = getShadowDomHtml(el.shadowRoot) ?? '';
}
el.innerHTML += content;
}
}
}
Expand Down
30 changes: 30 additions & 0 deletions test/core/playwright_utils.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,36 @@ describe('playwrightUtils', () => {
}
}, 60_000);

describe('shadow root expansion', () => {
let browser: Browser;
beforeAll(async () => {
browser = await launchPlaywright(launchContext);
});
afterAll(async () => {
await browser.close();
});

test('no expansion with ignoreShadowRoots: true', async () => {
const page = await browser.newPage();
await page.goto(`${serverAddress}/special/shadow-root`);
const result = await playwrightUtils.parseWithCheerio(page, true);

const text = result('body').text().trim();
expect([...text.matchAll(/\[GOOD\]/g)]).toHaveLength(0);
expect([...text.matchAll(/\[BAD\]/g)]).toHaveLength(0);
});

test('expansion works', async () => {
const page = await browser.newPage();
await page.goto(`${serverAddress}/special/shadow-root`);
const result = await playwrightUtils.parseWithCheerio(page);

const text = result('body').text().trim();
expect([...text.matchAll(/\[GOOD\]/g)]).toHaveLength(2);
expect([...text.matchAll(/\[BAD\]/g)]).toHaveLength(0);
});
});

describe('infiniteScroll()', () => {
function isAtBottom() {
return window.innerHeight + window.pageYOffset >= document.body.offsetHeight;
Expand Down
30 changes: 30 additions & 0 deletions test/core/puppeteer_utils.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,36 @@ describe('puppeteerUtils', () => {
}
});

describe('parseWithCheerio() shadow root expansion works', () => {
let browser: Browser;
beforeAll(async () => {
browser = await launchPuppeteer(launchContext);
});
afterAll(async () => {
await browser.close();
});

test('no expansion with ignoreShadowRoots: true', async () => {
const page = await browser.newPage();
await page.goto(`${serverAddress}/special/shadow-root`);
const result = await puppeteerUtils.parseWithCheerio(page, true);

const text = result('body').text().trim();
expect([...text.matchAll(/\[GOOD\]/g)]).toHaveLength(0);
expect([...text.matchAll(/\[BAD\]/g)]).toHaveLength(0);
});

test('expansion works', async () => {
const page = await browser.newPage();
await page.goto(`${serverAddress}/special/shadow-root`);
const result = await puppeteerUtils.parseWithCheerio(page);

const text = result('body').text().trim();
expect([...text.matchAll(/\[GOOD\]/g)]).toHaveLength(2);
expect([...text.matchAll(/\[BAD\]/g)]).toHaveLength(0);
});
});

describe('blockRequests()', () => {
let browser: Browser = null;
beforeAll(async () => {
Expand Down
29 changes: 29 additions & 0 deletions test/shared/_helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,31 @@ console.log('Hello world!');
<p>Some content from inside of an iframe.</p>
</body>
</html>`,
shadowRoots: `
<html>
<body>
<div id="open-container">
<template shadowrootmode="open">
<p>[GOOD] This is inside the OPEN shadow DOM.</p>
<div>
<template shadowrootmode="open">
<p>[GOOD] This is inside of inside of the OPEN shadow DOM.</p>
</template>
</div>
</template>
</div>
<div id="closed-container">
<template shadowrootmode="closed">
<p>[BAD] This is inside the CLOSED shadow DOM.</p>
<div>
<template shadowrootmode="open">
<p>[BAD] This is inside of inside of the CLOSED shadow DOM.</p>
</template>
</div>
</template>
</div>
</body>
</html>`,
};

export async function runExampleComServer(): Promise<[Server, number]> {
Expand Down Expand Up @@ -298,6 +323,10 @@ export async function runExampleComServer(): Promise<[Server, number]> {
special.get('/inside-iframe', (_req, res) => {
res.type('html').send(responseSamples.insideIframe);
});

special.get('/shadow-root', (_req, res) => {
res.type('html').send(responseSamples.shadowRoots);
});
})();

// "cacheable" site with one page, scripts and stylesheets
Expand Down