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

Author: dgozman

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

@@ -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++];

tests/snapshotter.spec.ts

@@ -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) {