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

cherry-pick(9731): fix(snapshot): empty adopted stylesheet should not prevent node refs

Browse source
This commit is contained in:
Dmitry Gozman 2021-10-23 16:26:46 -07:00 committed by Pavel Feldman
parent 0f38535ace
commit c75bdded2b
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); this._staleStyleSheets.add(sheet);
} }
private _updateStyleElementStyleSheetTextIfNeeded(sheet: CSSStyleSheet): string | undefined { private _updateStyleElementStyleSheetTextIfNeeded(sheet: CSSStyleSheet, forceText?: boolean): string | undefined {
const data = ensureCachedData(sheet); const data = ensureCachedData(sheet);
if (this._staleStyleSheets.has(sheet)) { if (this._staleStyleSheets.has(sheet) || (forceText && data.cssText === undefined)) {
this._staleStyleSheets.delete(sheet); this._staleStyleSheets.delete(sheet);
try { try {
data.cssText = this._getSheetText(sheet); data.cssText = this._getSheetText(sheet);
} catch (e) { } catch (e) {
// Sometimes we cannot access cross-origin stylesheets. // Sometimes we cannot access cross-origin stylesheets.
data.cssText = '';
} }
} }
return data.cssText; return data.cssText;
@ -438,7 +439,7 @@ export function frameSnapshotStreamer(snapshotStreamer: string) {
const visitStyleSheet = (sheet: CSSStyleSheet) => { const visitStyleSheet = (sheet: CSSStyleSheet) => {
const data = ensureCachedData(sheet); const data = ensureCachedData(sheet);
const oldCSSText = data.cssText; const oldCSSText = data.cssText;
const cssText = this._updateStyleElementStyleSheetTextIfNeeded(sheet) || ''; const cssText = this._updateStyleElementStyleSheetTextIfNeeded(sheet, true /* forceText */)!;
if (cssText === oldCSSText) if (cssText === oldCSSText)
return { equals: true, n: [[ snapshotNumber - data.ref![0], data.ref![1] ]] }; return { equals: true, n: [[ snapshotNumber - data.ref![0], data.ref![1] ]] };
data.ref = [snapshotNumber, nodeCounter++]; 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>'); 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) { function distillSnapshot(snapshot, distillTarget = true) {