microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-01-05 19:04:43 +03:00
Code Issues Projects Releases Wiki Activity

fix(snapshot): empty adopted stylesheet should not prevent node refs (#9731)

Browse Source 
We never marked empty stylesheets as "stale", so we never computed
css text for them. This prevented node reuse, because empty string
is not equal to undefined.
This commit is contained in:
Dmitry Gozman 2021-10-23 16:26:46 -07:00 committed by GitHub
parent f08c22b467
commit 7527ad27d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts
View File

@ -145,14 +145,15 @@ export function frameSnapshotStreamer(snapshotStreamer: string) {
this._staleStyleSheets.add(sheet);
}
private _updateStyleElementStyleSheetTextIfNeeded(sheet: CSSStyleSheet): string | undefined {
private _updateStyleElementStyleSheetTextIfNeeded(sheet: CSSStyleSheet, forceText?: boolean): string | undefined {
const data = ensureCachedData(sheet);
if (this._staleStyleSheets.has(sheet)) {
if (this._staleStyleSheets.has(sheet) || (forceText && data.cssText === undefined)) {
this._staleStyleSheets.delete(sheet);
try {
data.cssText = this._getSheetText(sheet);
} catch (e) {
// Sometimes we cannot access cross-origin stylesheets.
data.cssText = '';
}
}
return data.cssText;
@ -438,7 +439,7 @@ export function frameSnapshotStreamer(snapshotStreamer: string) {
const visitStyleSheet = (sheet: CSSStyleSheet) => {
const data = ensureCachedData(sheet);
const oldCSSText = data.cssText;
const cssText = this._updateStyleElementStyleSheetTextIfNeeded(sheet) || '';
const cssText = this._updateStyleElementStyleSheetTextIfNeeded(sheet, true /* forceText */)!;
if (cssText === oldCSSText)
return { equals: true, n: [[ snapshotNumber - data.ref![0], data.ref![1] ]] };
data.ref = [snapshotNumber, nodeCounter++];

29
tests/snapshotter.spec.ts
View File

@ -180,6 +180,35 @@ it.describe('snapshots', () => {
expect(distillSnapshot(snapshot)).toBe('<BUTTON data="two">Hello</BUTTON>');
}
});
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.evaluate(() => {
const sheet = new CSSStyleSheet();
(document as any).adoptedStyleSheets = [sheet];
const sheet2 = new CSSStyleSheet();
for (const element of [document.createElement('div'), document.createElement('span')]) {
const root = element.attachShadow({
mode: 'open'
});
root.append('foo');
(root as any).adoptedStyleSheets = [sheet2];
document.body.appendChild(element);
}
});
const renderer1 = await snapshotter.captureSnapshot(toImpl(page), 'snapshot1');
// Expect some adopted style sheets.
expect(distillSnapshot(renderer1)).toContain('__playwright_style_sheet_');
const renderer2 = await snapshotter.captureSnapshot(toImpl(page), 'snapshot2');
const snapshot2 = renderer2.snapshot();
// Second snapshot should be just a copy of the first one.
expect(snapshot2.html).toEqual([[1, 13]]);
});
});
function distillSnapshot(snapshot, distillTarget = true) {