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

fix(snapshotter): allow rendering of & in STYLE tags (#31627)

Browse source 
Fixes https://github.com/microsoft/playwright/issues/31607
This commit is contained in:
Max Schmitt 2024-07-15 17:33:22 +02:00 committed by GitHub
parent 950875f0db
commit d463d1f285
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/trace-viewer/src/snapshotRenderer.ts
View file

@ -53,12 +53,11 @@ export class SnapshotRenderer {
const visit = (n: NodeSnapshot, snapshotIndex: number, parentTag: string | undefined, parentAttrs: [string, string][] | undefined): string => {
// Text node.
if (typeof n === 'string') {
const text = escapeText(n);
// Best-effort Electron support: rewrite custom protocol in url() links in stylesheets.
// Old snapshotter was sending lower-case.
if (parentTag === 'STYLE' || parentTag === 'style')
return rewriteURLsInStyleSheetForCustomProtocol(text);
return text;
return rewriteURLsInStyleSheetForCustomProtocol(n);
return escapeText(n);
}
if (!(n as any)._string) {

26
tests/library/trace-viewer.spec.ts
View file

@ -429,6 +429,32 @@ test('should work with adopted style sheets and all: unset', async ({ page, runA
}
});
test('should work with nesting CSS selectors', async ({ page, runAndTrace }) => {
test.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/31607' });
const traceViewer = await runAndTrace(async () => {
await page.setContent(`
<span class="foo" data-testid="green-element">Hi</span>
<span class="foo bar" data-testid="red-element">Hello</span>
<style>
.foo {
color: green;
&.bar {
color: red;
}
}
</style>
`);
await page.evaluate(() => { });
});
{
const frame = await traceViewer.snapshotFrame('page.evaluate', 0);
await expect(frame.getByTestId('green-element')).toHaveCSS('color', /* green */'rgb(0, 128, 0)');
await expect(frame.getByTestId('red-element')).toHaveCSS('color', /* red */'rgb(255, 0, 0)');
}
});
test('should restore scroll positions', async ({ page, runAndTrace }) => {
const traceViewer = await runAndTrace(async () => {
await page.setContent(`