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

test: snapshot with all: unset in StyleSheet (#31514)

Browse source
This commit is contained in:
Max Schmitt 2024-07-03 09:40:50 +02:00 committed by GitHub
parent 5bdced9c9b
commit bfbd5f6f2f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 34 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
tests/library/snapshotter.spec.ts
View file

@ -249,12 +249,10 @@ it.describe('snapshots', () => {
}); });
it('empty adopted style sheets should not prevent node refs', async ({ page, toImpl, snapshotter, browserName }) => { it('empty adopted style sheets should not prevent node refs', async ({ page, toImpl, snapshotter, browserName }) => {
it.skip(browserName !== 'chromium', 'Constructed stylesheets are only in Chromium.');
await page.setContent('<button>Hello</button>'); await page.setContent('<button>Hello</button>');
await page.evaluate(() => { await page.evaluate(() => {
const sheet = new CSSStyleSheet(); const sheet = new CSSStyleSheet();
(document as any).adoptedStyleSheets = [sheet]; document.adoptedStyleSheets = [sheet];
const sheet2 = new CSSStyleSheet(); const sheet2 = new CSSStyleSheet();
for (const element of [document.createElement('div'), document.createElement('span')]) { for (const element of [document.createElement('div'), document.createElement('span')]) {
@ -262,7 +260,7 @@ it.describe('snapshots', () => {
mode: 'open' mode: 'open'
}); });
root.append('foo'); root.append('foo');
(root as any).adoptedStyleSheets = [sheet2]; root.adoptedStyleSheets = [sheet2];
document.body.appendChild(element); document.body.appendChild(element);
} }
}); });

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

@ -347,14 +347,12 @@ test('should capture data-url svg iframe', async ({ page, server, runAndTrace })
}); });
test('should contain adopted style sheets', async ({ page, runAndTrace, browserName }) => { test('should contain adopted style sheets', async ({ page, runAndTrace, browserName }) => {
test.skip(browserName !== 'chromium', 'Constructed stylesheets are only in Chromium.');
const traceViewer = await runAndTrace(async () => { const traceViewer = await runAndTrace(async () => {
await page.setContent('<button>Hello</button>'); await page.setContent('<button>Hello</button>');
await page.evaluate(() => { await page.evaluate(() => {
const sheet = new CSSStyleSheet(); const sheet = new CSSStyleSheet();
sheet.addRule('button', 'color: red'); sheet.addRule('button', 'color: red');
(document as any).adoptedStyleSheets = [sheet]; document.adoptedStyleSheets = [sheet];
const sheet2 = new CSSStyleSheet(); const sheet2 = new CSSStyleSheet();
sheet2.addRule(':host', 'color: blue'); sheet2.addRule(':host', 'color: blue');
@ -364,7 +362,7 @@ test('should contain adopted style sheets', async ({ page, runAndTrace, browserN
mode: 'open' mode: 'open'
}); });
root.append('foo'); root.append('foo');
(root as any).adoptedStyleSheets = [sheet2]; root.adoptedStyleSheets = [sheet2];
document.body.appendChild(element); document.body.appendChild(element);
} }
}); });
@ -377,22 +375,20 @@ test('should contain adopted style sheets', async ({ page, runAndTrace, browserN
}); });
test('should work with adopted style sheets and replace/replaceSync', async ({ page, runAndTrace, browserName }) => { test('should work with adopted style sheets and replace/replaceSync', async ({ page, runAndTrace, browserName }) => {
test.skip(browserName !== 'chromium', 'Constructed stylesheets are only in Chromium.');
const traceViewer = await runAndTrace(async () => { const traceViewer = await runAndTrace(async () => {
await page.setContent('<button>Hello</button>'); await page.setContent('<button>Hello</button>');
await page.evaluate(() => { await page.evaluate(() => {
const sheet = new CSSStyleSheet(); const sheet = new CSSStyleSheet();
sheet.addRule('button', 'color: red'); sheet.addRule('button', 'color: red');
(document as any).adoptedStyleSheets = [sheet]; document.adoptedStyleSheets = [sheet];
}); });
await page.evaluate(() => { await page.evaluate(() => {
const [sheet] = (document as any).adoptedStyleSheets; const [sheet] = document.adoptedStyleSheets;
sheet.replaceSync(`button { color: blue }`); sheet.replaceSync(`button { color: blue }`);
}); });
await page.evaluate(() => { await page.evaluate(async () => {
const [sheet] = (document as any).adoptedStyleSheets; const [sheet] = document.adoptedStyleSheets;
sheet.replace(`button { color: #0F0 }`); await sheet.replace(`button { color: #0F0 }`);
}); });
}); });
@ -410,7 +406,30 @@ test('should work with adopted style sheets and replace/replaceSync', async ({ p
} }
}); });
test('should restore scroll positions', async ({ page, runAndTrace, browserName }) => { test('should work with adopted style sheets and all: unset', async ({ page, runAndTrace, browserName }) => {
test.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/31500' });
test.fixme(browserName === 'chromium', 'https://issues.chromium.org/u/1/issues/41416124');
const traceViewer = await runAndTrace(async () => {
await page.setContent('<button>Hello</button>');
await page.evaluate(() => {
const stylesheet = new CSSStyleSheet();
// 'all: unset' is the problem here.
stylesheet.replaceSync('button { all: unset; border-radius: 24px; background-color: deepskyblue; color: black; padding: 5px }');
document.adoptedStyleSheets = [stylesheet];
});
await page.getByRole('button').click();
});
{
const frame = await traceViewer.snapshotFrame('page.evaluate', 0);
await expect(frame.locator('button')).toHaveCSS('border-radius', '24px');
await expect(frame.locator('button')).toHaveCSS('background-color', 'rgb(0, 191, 255)');
await expect(frame.locator('button')).toHaveCSS('color', 'rgb(0, 0, 0)');
await expect(frame.locator('button')).toHaveCSS('padding', '5px');
}
});
test('should restore scroll positions', async ({ page, runAndTrace }) => {
const traceViewer = await runAndTrace(async () => { const traceViewer = await runAndTrace(async () => {
await page.setContent(` await page.setContent(`
<style> <style>
@ -749,7 +768,7 @@ test('should follow redirects', async ({ page, runAndTrace, server, asset }) =>
await expect(snapshotFrame.locator('img')).toHaveJSProperty('naturalWidth', 10); await expect(snapshotFrame.locator('img')).toHaveJSProperty('naturalWidth', 10);
}); });
test('should include metainfo', async ({ showTraceViewer, browserName }) => { test('should include metainfo', async ({ showTraceViewer }) => {
const traceViewer = await showTraceViewer([traceFile]); const traceViewer = await showTraceViewer([traceFile]);
await traceViewer.page.locator('text=Metadata').click(); await traceViewer.page.locator('text=Metadata').click();
const callLine = traceViewer.page.locator('.metadata-view .call-line'); const callLine = traceViewer.page.locator('.metadata-view .call-line');