patch(playwright): exposes __name as closure variable in browser evaluated functions

Author: ruifigueira

packages/playwright-cloudflare/utils/build_injected.js

@@ -1,7 +1,7 @@
-import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { build } from 'vite';
+import { writeFile } from './utils.js';
 
 const basedir = path.dirname(fileURLToPath(import.meta.url));
 
@@ -20,25 +20,24 @@ const basedir = path.dirname(fileURLToPath(import.meta.url));
       target: 'esnext',
       lib: {
         name: 'frameSnapshotStreamer',
-        entry: path.join(basedir, '../../playwright-core/src/server/trace/recorder/snapshotterInjected.ts'),
+        entry: [
+          path.join(basedir, '../../playwright-core/src/server/trace/recorder/snapshotterInjected.ts'),
+          path.join(basedir, '../../playwright-core/src/server/isomorphic/utilityScriptSerializers.ts'),
+        ],
         formats: ['es'],
       },
       terserOptions: {
         format: {
-          // we need to ensure no comments are preserved          
+          // we need to ensure no comments are preserved
           comments: false
         }
       },
       rollupOptions: {
         output: {
           dir: path.join(basedir, '../src/injected'),
-          entryFileNames: `snapshotterInjected.js`,
+          entryFileNames: `[name].js`,
         },
       },
     },
   });
-
-  const { frameSnapshotStreamer } = await import('../src/injected/snapshotterInjected.js');
-  const body = `export const frameSnapshotStreamer = ${JSON.stringify(frameSnapshotStreamer.toString())};`;
-  fs.writeFileSync(path.join(basedir, '../src/injected/snapshotterInjected.js'), body);
 })();

packages/playwright-cloudflare/vite.config.ts

@@ -48,9 +48,8 @@ export default defineConfig({
       './transport': path.resolve(__dirname, './src/cloudflare/webSocketTransport'),
       '../transport': path.resolve(__dirname, './src/cloudflare/webSocketTransport'),
 
-      // import function injected as string, otherwise snapshotter serializes the function which can have
-      // function declared outside (e.g. `__name(...)`)
       './snapshotterInjected': path.resolve(__dirname, './src/injected/snapshotterInjected'),
+      './isomorphic/utilityScriptSerializers': path.resolve(__dirname, './src/injected/utilityScriptSerializers'),
 
       // It's not needed and this way we don't need to build and import utilsBundleImpl and babelBundleImpl
       './transform': path.resolve(__dirname, './src/mocks/transform'),

packages/playwright-core/src/server/browserContext.ts

@@ -615,7 +615,12 @@ export abstract class BrowserContext extends SdkObject {
         for (const originState of state.origins) {
           const frame = page.mainFrame();
           await frame.goto(metadata, originState.origin);
-          await frame.evaluateExpression(`(${storageScript.restore})(${utilityScriptSerializers.source}, (${ensureBuiltins})(globalThis), ${JSON.stringify(originState)})`, { world: 'utility' });
+          // function is most likely bundled with wrangler, which uses esbuild with keepNames enabled.
+          // See: https://github.com/cloudflare/workers-sdk/issues/7107
+          const restoreScript = `((__name => (${storageScript.restore}))(t => t))`;
+          const utilityScriptSerializersScript = `((__name => (${storageScript.restore}))(t => t))`;
+          const ensureBuiltinsScript = `((__name => (${ensureBuiltins}))(t => t))`;
+          await frame.evaluateExpression(`(${restoreScript})(${utilityScriptSerializersScript}, (${ensureBuiltinsScript})(globalThis), ${JSON.stringify(originState)})`, { world: 'utility' });
         }
         await page.close(internalMetadata);
       }

packages/playwright-core/src/server/screenshotter.ts

@@ -263,7 +263,10 @@ export class Screenshotter {
     if (disableAnimations)
       progress.log('  disabled all CSS animations');
     const syncAnimations = this._page._delegate.shouldToggleStyleSheetToSyncAnimations();
-    await this._page.safeNonStallingEvaluateInAllFrames('(' + inPagePrepareForScreenshots.toString() + `)(${JSON.stringify(screenshotStyle)}, ${hideCaret}, ${disableAnimations}, ${syncAnimations})`, 'utility');
+    // function is most likely bundled with wrangler, which uses esbuild with keepNames enabled.
+    // See: https://github.com/cloudflare/workers-sdk/issues/7107
+    const script = `((__name => (${inPagePrepareForScreenshots.toString()}))(t => t))`;
+    await this._page.safeNonStallingEvaluateInAllFrames('(' + script + `)(${JSON.stringify(screenshotStyle)}, ${hideCaret}, ${disableAnimations}, ${syncAnimations})`, 'utility');
     if (!process.env.PW_TEST_SCREENSHOT_NO_FONTS_READY) {
       progress.log('waiting for fonts to load...');
       await frame.nonStallingEvaluateInExistingContext('document.fonts.ready', 'utility').catch(() => {});

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

@@ -88,7 +88,10 @@ export class Snapshotter {
     ];
 
     const { javaScriptEnabled } = this._context._options;
-    const initScript = `(${frameSnapshotStreamer})("${this._snapshotStreamer}", ${javaScriptEnabled || javaScriptEnabled === undefined})`;
+    // function is most likely bundled with wrangler, which uses esbuild with keepNames enabled.
+    // See: https://github.com/cloudflare/workers-sdk/issues/7107
+    let initScript = `((__name => (${frameSnapshotStreamer}))(t => t))`;
+    initScript = `(${initScript})("${this._snapshotStreamer}", ${javaScriptEnabled || javaScriptEnabled === undefined})`;
     await this._context.addInitScript(initScript);
     await this._runInAllFrames(initScript);
   }