Merge pull request #210 from chromaui/andrew/ap-5218-tweak-version-of…

…-rrweb-used-by-chromatic-by-default Properly load rrweb-snapshot on AMD-based web pages
chromaui · Nov 26, 2024 · cb4dd2a · cb4dd2a
2 parents a2a8f09 + f78e3ce
commit cb4dd2a
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 1 deletion.
diff --git a/.changeset/little-donuts-push.md b/.changeset/little-donuts-push.md
@@ -0,0 +1,5 @@
+---
+'@chromatic-com/playwright': patch
+---
+
+Add support for AMD module-based web pages
diff --git a/packages/playwright/src/takeSnapshot.ts b/packages/playwright/src/takeSnapshot.ts
@@ -35,7 +35,19 @@ async function takeSnapshot(
   // Serialize and capture the DOM
   const domSnapshot: elementNode = await page.evaluate(dedent`
     ${rrweb};
-    rrwebSnapshot.snapshot(document);
+    // page.evaluate returns the value of the function being evaluated. In this case, it means that
+    // it is returning either the resolved value of the Promise or the return value of the call to
+    // the snapshot function. See https://playwright.dev/docs/api/class-page#page-evaluate.
+    if (typeof define === "function" && define.amd) {
+      // AMD support is detected, so we need to load rrwebSnapshot asynchronously
+      new Promise((resolve) => {
+        require(['rrwebSnapshot'], (rrwebSnapshot) => {
+          resolve(rrwebSnapshot.snapshot(document));
+        });
+      });
+    } else {
+      rrwebSnapshot.snapshot(document);
+    }
   `);
 
   const bufferedSnapshot = Buffer.from(JSON.stringify(domSnapshot));

diff --git a/packages/playwright/tests/amd.spec.ts b/packages/playwright/tests/amd.spec.ts
@@ -0,0 +1,6 @@
+import { test, expect } from '../src';
+
+test('pages with AMD modules are archived', async ({ page }) => {
+  await page.goto('/amd');
+  await expect(page.getByText('Sum of')).toBeVisible();
+});
diff --git a/test-server/fixtures/amd.html b/test-server/fixtures/amd.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>AMD Example</title>
+    <script
+      data-main="scripts/amd"
+      src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
+    ></script>
+  </head>
+  <body>
+    This is a basic page with some math content below that is loaded from an AMD module:
+    <div id="output"></div>
+  </body>
+</html>
diff --git a/test-server/fixtures/assets/scripts/amd.js b/test-server/fixtures/assets/scripts/amd.js
@@ -0,0 +1,12 @@
+requirejs.config({
+  basePath: 'fixtures/amd',
+  paths: {
+    lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min',
+  },
+});
+
+require(['lodash'], function (_) {
+  const numbers = [1, 2, 3, 4, 5];
+  const sum = _.sum(numbers);
+  document.getElementById('output').textContent = `Sum of ${numbers.join('+')} = ${sum}`;
+});
diff --git a/test-server/server.js b/test-server/server.js
@@ -132,6 +132,10 @@ app.get('/constructable-stylesheets/:page', (req, res) => {
   res.sendFile(path.join(__dirname, `fixtures/constructable-stylesheets/${page}.html`));
 });
 
+app.get('/amd', (req, res) => {
+  res.sendFile(path.join(__dirname, 'fixtures/amd.html'));
+});
+
 app.listen(port, () => {
   console.log(`Example app listening on port ${port}`);
 });