From 06efb68a17895a82e3a94e193ac12e3ba5222de7 Mon Sep 17 00:00:00 2001 From: Andrew Ortwein Date: Wed, 20 Nov 2024 16:37:17 -0500 Subject: [PATCH 1/6] Add new AMD-based page to test server --- test-server/fixtures/amd.html | 14 ++++++++++++++ test-server/fixtures/assets/scripts/amd.js | 12 ++++++++++++ test-server/server.js | 4 ++++ 3 files changed, 30 insertions(+) create mode 100644 test-server/fixtures/amd.html create mode 100644 test-server/fixtures/assets/scripts/amd.js diff --git a/test-server/fixtures/amd.html b/test-server/fixtures/amd.html new file mode 100644 index 00000000..2fcb50e7 --- /dev/null +++ b/test-server/fixtures/amd.html @@ -0,0 +1,14 @@ + + + + AMD Example + + + + This is a basic page with some math content below that is loaded from an AMD module: +
+ + diff --git a/test-server/fixtures/assets/scripts/amd.js b/test-server/fixtures/assets/scripts/amd.js new file mode 100644 index 00000000..51d1f156 --- /dev/null +++ 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 index d7de18d0..901b3ea1 100644 --- 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}`); }); From c66d89c0a2998da06ec2c3d909d8bde9b50c0037 Mon Sep 17 00:00:00 2001 From: Andrew Ortwein Date: Wed, 20 Nov 2024 16:39:22 -0500 Subject: [PATCH 2/6] Add AMD test (that should fail) to Playwright test suite --- packages/playwright/tests/amd.spec.ts | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 packages/playwright/tests/amd.spec.ts diff --git a/packages/playwright/tests/amd.spec.ts b/packages/playwright/tests/amd.spec.ts new file mode 100644 index 00000000..c7285d15 --- /dev/null +++ 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(); +}); From 257a48e670519a918c76b14603dde2463d5786ee Mon Sep 17 00:00:00 2001 From: Andrew Ortwein Date: Wed, 20 Nov 2024 16:41:26 -0500 Subject: [PATCH 3/6] Detect AMD API and define rrweb-snapshot appropriately --- packages/playwright/src/takeSnapshot.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/playwright/src/takeSnapshot.ts b/packages/playwright/src/takeSnapshot.ts index 8cb1ead6..0db43145 100644 --- a/packages/playwright/src/takeSnapshot.ts +++ b/packages/playwright/src/takeSnapshot.ts @@ -35,7 +35,15 @@ async function takeSnapshot( // Serialize and capture the DOM const domSnapshot: elementNode = await page.evaluate(dedent` ${rrweb}; - rrwebSnapshot.snapshot(document); + if (typeof define === "function" && define.amd) { + new Promise((resolve) => { + require(['rrwebSnapshot'], (rrwebSnapshot) => { + resolve(rrwebSnapshot.snapshot(document)); + }); + }); + } else { + rrwebSnapshot.snapshot(document); + } `); const bufferedSnapshot = Buffer.from(JSON.stringify(domSnapshot)); From e2dd287dd7d9c44ed39ea638f5cf3880b3898da7 Mon Sep 17 00:00:00 2001 From: Andrew Ortwein Date: Thu, 21 Nov 2024 22:25:09 -0500 Subject: [PATCH 4/6] Explain section about loading async for AMD --- packages/playwright/src/takeSnapshot.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/playwright/src/takeSnapshot.ts b/packages/playwright/src/takeSnapshot.ts index 0db43145..7beeaa7b 100644 --- a/packages/playwright/src/takeSnapshot.ts +++ b/packages/playwright/src/takeSnapshot.ts @@ -36,6 +36,7 @@ async function takeSnapshot( const domSnapshot: elementNode = await page.evaluate(dedent` ${rrweb}; 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)); From 1d6eff2ea973173815a9ad9f5f3602a687d65226 Mon Sep 17 00:00:00 2001 From: Andrew Ortwein Date: Mon, 25 Nov 2024 18:16:38 -0500 Subject: [PATCH 5/6] Add comment explaining unusual return behavior of page.evaluate --- packages/playwright/src/takeSnapshot.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/playwright/src/takeSnapshot.ts b/packages/playwright/src/takeSnapshot.ts index 7beeaa7b..8ec08f04 100644 --- a/packages/playwright/src/takeSnapshot.ts +++ b/packages/playwright/src/takeSnapshot.ts @@ -35,6 +35,9 @@ async function takeSnapshot( // Serialize and capture the DOM const domSnapshot: elementNode = await page.evaluate(dedent` ${rrweb}; + // 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) => { From f78e3ce33d1cb79ccb97de10314a305c0ee3e1f2 Mon Sep 17 00:00:00 2001 From: Andrew Ortwein Date: Mon, 25 Nov 2024 18:42:55 -0500 Subject: [PATCH 6/6] Add changeset --- .changeset/little-donuts-push.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/little-donuts-push.md diff --git a/.changeset/little-donuts-push.md b/.changeset/little-donuts-push.md new file mode 100644 index 00000000..48cc84b7 --- /dev/null +++ b/.changeset/little-donuts-push.md @@ -0,0 +1,5 @@ +--- +'@chromatic-com/playwright': patch +--- + +Add support for AMD module-based web pages