From ec0bdc43fc4237aacd1c5cdb0d96c378e8308a42 Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Wed, 10 Jan 2024 13:05:40 -0800
Subject: [PATCH 01/22] If using electron and no port is specified, fail with
 this message instead of with a random JS syntax error

---
 src/cypress-api/index.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/cypress-api/index.ts b/src/cypress-api/index.ts
index 334c17b5..15c46f7f 100644
--- a/src/cypress-api/index.ts
+++ b/src/cypress-api/index.ts
@@ -131,13 +131,17 @@ export const onBeforeBrowserLaunch = (
 
   if (portArg) {
     [, portString] = portArg.split('=');
-  } else {
+  } else if (process.env.ELECTRON_EXTRA_LAUNCH_ARGS) {
     // Electron doesn't pass along the address and port in the launch options, so we need to read the port from the
     // environment variable that we'll require the user to use (this assumes the host will be 127.0.0.1).
     const entry = process.env.ELECTRON_EXTRA_LAUNCH_ARGS.split(' ').find((item) =>
       item.startsWith('--remote-debugging-port')
     );
     [, portString] = entry.split('=');
+  } else {
+    throw new Error(
+      'Please provide a port number \nExample: ELECTRON_EXTRA_LAUNCH_ARGS=--remote-debugging-port=<port-number> yarn cypress run'
+    );
   }
 
   port = parseInt(portString, 10);

From c97722a3734a539b2e5e60d016f830d3faee6610 Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Wed, 10 Jan 2024 13:09:57 -0800
Subject: [PATCH 02/22] Comment in some Cypress tests that work now that we're
 using CDP

---
 tests/cypress/e2e/archiving-assets.cy.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/tests/cypress/e2e/archiving-assets.cy.ts b/tests/cypress/e2e/archiving-assets.cy.ts
index 3bd568d6..78322bfe 100644
--- a/tests/cypress/e2e/archiving-assets.cy.ts
+++ b/tests/cypress/e2e/archiving-assets.cy.ts
@@ -2,8 +2,7 @@ it('Assets / query params determine which asset is served', () => {
   cy.visit('/asset-paths/query-params');
 });
 
-// TODO: Unskip when Cypress support achieves parity with Playwright
-it.skip('Assets / asset doesnt prevent directory from being created', () => {
+it('Assets / asset doesnt prevent directory from being created', () => {
   cy.visit('/asset-paths/asset-at-directory-name');
 });
 
@@ -27,8 +26,7 @@ it.skip('Assets / external asset is archived', () => {
   cy.visit('/asset-paths/external-asset-archived');
 });
 
-// TODO: Unskip when Cypress support achieves parity with Playwright
-it.skip('Assets / assets from css urls are archived', () => {
+it('Assets / assets from css urls are archived', () => {
   cy.visit('/asset-paths/css-urls');
 });
 

From 27a7ff6406d6daf512608eb046a4aef37498b920 Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Wed, 10 Jan 2024 15:18:51 -0800
Subject: [PATCH 03/22] Cypress tests can be skipped

---
 packages/cypress/src/support.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/cypress/src/support.ts b/packages/cypress/src/support.ts
index c0ab3c59..b32a73d9 100644
--- a/packages/cypress/src/support.ts
+++ b/packages/cypress/src/support.ts
@@ -11,6 +11,9 @@ beforeEach(() => {
 });
 
 afterEach(() => {
+  if (Cypress.env('disableAutoCapture')) {
+    return;
+  }
   // can we be sure this always fires after all the requests are back?
   cy.document().then((doc) => {
     const snap = snapshot(doc);

From 84313c3963266836e4a957b7e697b1278040d8d7 Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Wed, 10 Jan 2024 15:35:01 -0800
Subject: [PATCH 04/22] External domains can be archived with Cypress

---
 packages/cypress/src/index.ts                  | 10 +++++++---
 packages/cypress/src/support.ts                |  5 ++++-
 .../tests/cypress/e2e/archiving-assets.cy.ts   | 18 +++++++++++-------
 test-server/server.js                          | 10 +++-------
 4 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/cypress/src/index.ts b/packages/cypress/src/index.ts
index 218e26da..5d94e299 100644
--- a/packages/cypress/src/index.ts
+++ b/packages/cypress/src/index.ts
@@ -65,7 +65,11 @@ let watcher: Watcher = null;
 let host = '';
 let port = 0;
 
-const setupNetworkListener = async (): Promise<null> => {
+const setupNetworkListener = async ({
+  allowedDomains,
+}: {
+  allowedDomains?: string[];
+}): Promise<null> => {
   try {
     const { webSocketDebuggerUrl } = await Version({
       host,
@@ -77,7 +81,7 @@ const setupNetworkListener = async (): Promise<null> => {
     });
 
     if (!watcher) {
-      watcher = new Watcher(cdp);
+      watcher = new Watcher(cdp, allowedDomains);
       await watcher.watch();
     }
   } catch (err) {
@@ -110,7 +114,7 @@ interface TaskParams {
 export const prepareArchives = async ({ action, payload }: TaskParams) => {
   switch (action) {
     case 'setup-network-listener':
-      return setupNetworkListener();
+      return setupNetworkListener(payload);
     case 'save-archives':
       return saveArchives(payload);
     default:
diff --git a/packages/cypress/src/support.ts b/packages/cypress/src/support.ts
index b32a73d9..b5f40787 100644
--- a/packages/cypress/src/support.ts
+++ b/packages/cypress/src/support.ts
@@ -7,7 +7,10 @@ beforeEach(() => {
   // then cleaned up before the next test is run
   // (see https://docs.cypress.io/guides/core-concepts/variables-and-aliases#Aliases)
   cy.wrap([]).as('manualSnapshots');
-  cy.task('prepareArchives', { action: 'setup-network-listener' });
+  cy.task('prepareArchives', {
+    action: 'setup-network-listener',
+    payload: { allowedDomains: Cypress.env('allowedArchiveDomains') },
+  });
 });
 
 afterEach(() => {
diff --git a/packages/cypress/tests/cypress/e2e/archiving-assets.cy.ts b/packages/cypress/tests/cypress/e2e/archiving-assets.cy.ts
index 78322bfe..b4e79e75 100644
--- a/packages/cypress/tests/cypress/e2e/archiving-assets.cy.ts
+++ b/packages/cypress/tests/cypress/e2e/archiving-assets.cy.ts
@@ -18,13 +18,17 @@ it('Assets / external asset is not archived (but still renders)', () => {
   cy.visit('/asset-paths/external-asset-not-archived');
 });
 
-// TODO: Unskip when Cypress support achieves parity with Playwright
-it.skip('Assets / external asset is archived', () => {
-  // mock the external image (which we'll archive)
-  cy.intercept('https://some.external/domain/image.png', { fixture: 'pink.png' });
-
-  cy.visit('/asset-paths/external-asset-archived');
-});
+// domain of external image in test (to archive)
+it(
+  'Assets / external asset is archived',
+  { env: { allowedArchiveDomains: ['some.external'] } },
+  () => {
+    // mock the external image (which we'll archive)
+    cy.intercept('https://some.external/domain/image.png', { fixture: 'pink.png' });
+
+    cy.visit('/asset-paths/external-asset-archived');
+  }
+);
 
 it('Assets / assets from css urls are archived', () => {
   cy.visit('/asset-paths/css-urls');
diff --git a/test-server/server.js b/test-server/server.js
index f8907ab7..ec422a16 100644
--- a/test-server/server.js
+++ b/test-server/server.js
@@ -13,8 +13,9 @@ app.get('/', (req, res) => {
   res.send(`${htmlIntro}<body>Testing</body>${htmlOutro}`);
 });
 
-app.get('/asset-paths', (req, res) => {
-  res.sendFile(path.join(__dirname, 'fixtures/asset-paths.html'));
+// Asset path pages
+app.get('/asset-paths/:page', (req, res) => {
+  res.sendFile(path.join(__dirname, `fixtures/asset-paths/${req.params.page}.html`));
 });
 
 app.get('/ignore', (req, res) => {
@@ -74,11 +75,6 @@ app.get('/background-img.png', (req, res) => {
   res.sendFile(path.join(__dirname, 'fixtures/purple.png'));
 });
 
-// Asset path pages
-app.get('/asset-paths/:page', (req, res) => {
-  res.sendFile(path.join(__dirname, `fixtures/asset-paths/${req.params.page}.html`));
-});
-
 app.listen(port, () => {
   console.log(`Example app listening on port ${port}`);
 });

From 0c27fb09ed413167dda0a4a6769211c5c45dd4e0 Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Wed, 10 Jan 2024 16:00:57 -0800
Subject: [PATCH 05/22] Chromatic params are passed from Cypress to the
 generated storybook

---
 packages/cypress/src/support.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/cypress/src/support.ts b/packages/cypress/src/support.ts
index b5f40787..823ac615 100644
--- a/packages/cypress/src/support.ts
+++ b/packages/cypress/src/support.ts
@@ -30,7 +30,19 @@ afterEach(() => {
             testTitle: Cypress.currentTest.title,
             domSnapshots: [...manualSnapshots, snap],
             chromaticStorybookParams: {
-              diffThreshold: Cypress.env('diffThreshold'),
+              ...(Cypress.env('diffThreshold') && { diffThreshold: Cypress.env('diffThreshold') }),
+              ...(Cypress.env('delay') && { delay: Cypress.env('delay') }),
+              ...(Cypress.env('diffIncludeAntiAliasing') && {
+                diffIncludeAntiAliasing: Cypress.env('diffIncludeAntiAliasing'),
+              }),
+              ...(Cypress.env('diffThreshold') && { diffThreshold: Cypress.env('diffThreshold') }),
+              ...(Cypress.env('forcedColors') && { forcedColors: Cypress.env('forcedColors') }),
+              ...(Cypress.env('pauseAnimationAtEnd') && {
+                pauseAnimationAtEnd: Cypress.env('pauseAnimationAtEnd'),
+              }),
+              ...(Cypress.env('prefersReducedMotion') && {
+                prefersReducedMotion: Cypress.env('prefersReducedMotion'),
+              }),
             },
             pageUrl: url,
           },

From db41688195364a98b6b92b6ab9ef744b6bf2eefd Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Thu, 11 Jan 2024 15:09:21 -0800
Subject: [PATCH 06/22] Delay story created

---
 .../cypress/tests/cypress/e2e/options.cy.ts   |  3 +++
 test-server/fixtures/options/delay.html       | 27 +++++++++++++++++++
 test-server/server.js                         |  5 ++++
 3 files changed, 35 insertions(+)
 create mode 100644 packages/cypress/tests/cypress/e2e/options.cy.ts
 create mode 100644 test-server/fixtures/options/delay.html

diff --git a/packages/cypress/tests/cypress/e2e/options.cy.ts b/packages/cypress/tests/cypress/e2e/options.cy.ts
new file mode 100644
index 00000000..f1a8046a
--- /dev/null
+++ b/packages/cypress/tests/cypress/e2e/options.cy.ts
@@ -0,0 +1,3 @@
+it('Options / delay', /*{ env: { delay: 200 } },*/ () => {
+  cy.visit('/options/delay');
+});
diff --git a/test-server/fixtures/options/delay.html b/test-server/fixtures/options/delay.html
new file mode 100644
index 00000000..f2469387
--- /dev/null
+++ b/test-server/fixtures/options/delay.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+  <head>
+    <style>
+      /* don't show the image at the beginning */
+      img {
+        visibility: hidden;
+        animation-name: make-shown;
+        animation-duration: 2ms;
+        animation-delay: 150ms;
+        animation-fill-mode: forwards;
+      }
+
+      @keyframes make-shown {
+        0% {
+          visibility: hidden;
+        }
+        100% {
+          visibility: visible;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <img src="/img?url=fixtures/blue.png"/>
+  </body>
+</html>
\ No newline at end of file
diff --git a/test-server/server.js b/test-server/server.js
index ec422a16..eae0e140 100644
--- a/test-server/server.js
+++ b/test-server/server.js
@@ -18,6 +18,11 @@ app.get('/asset-paths/:page', (req, res) => {
   res.sendFile(path.join(__dirname, `fixtures/asset-paths/${req.params.page}.html`));
 });
 
+// Options pages
+app.get('/options/:page', (req, res) => {
+  res.sendFile(path.join(__dirname, `fixtures/options/${req.params.page}.html`));
+});
+
 app.get('/ignore', (req, res) => {
   res.sendFile(path.join(__dirname, 'fixtures/dynamic-content.html'));
 });

From 05dbf672a233487b244a85887cf855d80aa55dca Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Thu, 11 Jan 2024 15:18:18 -0800
Subject: [PATCH 07/22] Playwright version of delay test

---
 packages/playwright/tests/options.spec.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 packages/playwright/tests/options.spec.ts

diff --git a/packages/playwright/tests/options.spec.ts b/packages/playwright/tests/options.spec.ts
new file mode 100644
index 00000000..c40b027f
--- /dev/null
+++ b/packages/playwright/tests/options.spec.ts
@@ -0,0 +1,7 @@
+import { test } from '../src';
+
+test.describe(() => {
+  test('Options / delay', async ({ page }) => {
+    await page.goto('/options/delay');
+  });
+});

From 149c871733019f84a95fea95a516af5b9d4cbc24 Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Thu, 11 Jan 2024 15:45:36 -0800
Subject: [PATCH 08/22] Delay long enough to actually fail without option
 passed

---
 .../tests/cypress/e2e/archiving-assets.cy.ts   | 18 +++++++-----------
 test-server/fixtures/options/delay.html        |  2 +-
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/cypress/tests/cypress/e2e/archiving-assets.cy.ts b/packages/cypress/tests/cypress/e2e/archiving-assets.cy.ts
index b4e79e75..78322bfe 100644
--- a/packages/cypress/tests/cypress/e2e/archiving-assets.cy.ts
+++ b/packages/cypress/tests/cypress/e2e/archiving-assets.cy.ts
@@ -18,17 +18,13 @@ it('Assets / external asset is not archived (but still renders)', () => {
   cy.visit('/asset-paths/external-asset-not-archived');
 });
 
-// domain of external image in test (to archive)
-it(
-  'Assets / external asset is archived',
-  { env: { allowedArchiveDomains: ['some.external'] } },
-  () => {
-    // mock the external image (which we'll archive)
-    cy.intercept('https://some.external/domain/image.png', { fixture: 'pink.png' });
-
-    cy.visit('/asset-paths/external-asset-archived');
-  }
-);
+// TODO: Unskip when Cypress support achieves parity with Playwright
+it.skip('Assets / external asset is archived', () => {
+  // mock the external image (which we'll archive)
+  cy.intercept('https://some.external/domain/image.png', { fixture: 'pink.png' });
+
+  cy.visit('/asset-paths/external-asset-archived');
+});
 
 it('Assets / assets from css urls are archived', () => {
   cy.visit('/asset-paths/css-urls');
diff --git a/test-server/fixtures/options/delay.html b/test-server/fixtures/options/delay.html
index f2469387..d5dec45b 100644
--- a/test-server/fixtures/options/delay.html
+++ b/test-server/fixtures/options/delay.html
@@ -7,7 +7,7 @@
         visibility: hidden;
         animation-name: make-shown;
         animation-duration: 2ms;
-        animation-delay: 150ms;
+        animation-delay: 1000ms;
         animation-fill-mode: forwards;
       }
 

From 3d244a87add205a6b771acecc57550dc1456bfeb Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Thu, 11 Jan 2024 16:02:22 -0800
Subject: [PATCH 09/22] Delay prop passed so tests pass

---
 packages/cypress/tests/cypress/e2e/options.cy.ts | 2 +-
 packages/playwright/tests/options.spec.ts        | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/cypress/tests/cypress/e2e/options.cy.ts b/packages/cypress/tests/cypress/e2e/options.cy.ts
index f1a8046a..d0097667 100644
--- a/packages/cypress/tests/cypress/e2e/options.cy.ts
+++ b/packages/cypress/tests/cypress/e2e/options.cy.ts
@@ -1,3 +1,3 @@
-it('Options / delay', /*{ env: { delay: 200 } },*/ () => {
+it('Options / delay', { env: { delay: 1200 } }, () => {
   cy.visit('/options/delay');
 });
diff --git a/packages/playwright/tests/options.spec.ts b/packages/playwright/tests/options.spec.ts
index c40b027f..09ad1500 100644
--- a/packages/playwright/tests/options.spec.ts
+++ b/packages/playwright/tests/options.spec.ts
@@ -1,6 +1,8 @@
 import { test } from '../src';
 
 test.describe(() => {
+  test.use({ delay: 1200 });
+
   test('Options / delay', async ({ page }) => {
     await page.goto('/options/delay');
   });

From d126cd894b7d04f950ee2b33b7d88ff6ddcb9016 Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Thu, 11 Jan 2024 16:40:49 -0800
Subject: [PATCH 10/22] Diff threshold stories created

---
 .../cypress/tests/cypress/e2e/options.cy.ts   |  4 ++++
 packages/playwright/tests/options.spec.ts     |  8 +++++++
 .../fixtures/options/diff-threshold.html      | 21 +++++++++++++++++++
 3 files changed, 33 insertions(+)
 create mode 100644 test-server/fixtures/options/diff-threshold.html

diff --git a/packages/cypress/tests/cypress/e2e/options.cy.ts b/packages/cypress/tests/cypress/e2e/options.cy.ts
index d0097667..112563b3 100644
--- a/packages/cypress/tests/cypress/e2e/options.cy.ts
+++ b/packages/cypress/tests/cypress/e2e/options.cy.ts
@@ -1,3 +1,7 @@
 it('Options / delay', { env: { delay: 1200 } }, () => {
   cy.visit('/options/delay');
 });
+
+it('Options / diff threshold' /*, { env: { diffThreshold: 1 } }*/, () => {
+  cy.visit('/options/diff-threshold');
+});
diff --git a/packages/playwright/tests/options.spec.ts b/packages/playwright/tests/options.spec.ts
index 09ad1500..83e1eef9 100644
--- a/packages/playwright/tests/options.spec.ts
+++ b/packages/playwright/tests/options.spec.ts
@@ -7,3 +7,11 @@ test.describe(() => {
     await page.goto('/options/delay');
   });
 });
+
+test.describe(() => {
+  // test.use({ diffThreshold: 1 });
+
+  test('Options / diff threshold', async ({ page }) => {
+    await page.goto('/options/diff-threshold');
+  });
+});
diff --git a/test-server/fixtures/options/diff-threshold.html b/test-server/fixtures/options/diff-threshold.html
new file mode 100644
index 00000000..8f576fa0
--- /dev/null
+++ b/test-server/fixtures/options/diff-threshold.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+  <head>
+    <style>
+      h1 {
+        font-family: monospace;
+      }
+    </style>    
+  </head>
+  <body>
+    <h1></h1>
+
+  <script>      
+      const randomInteger = Math.ceil(Math.random() * 10);
+      const isEven = randomInteger % 2 === 0;
+      // number is either 6 or 8... should always have no diff since diff threshold is so high
+      // and those 2 numbers are very similar in look
+      document.querySelector('h1').innerText = isEven ? 8 : 6;
+  </script>
+  </body>
+</html>
\ No newline at end of file

From c85509cc84d90598794fc6f4f44209c25118789d Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Thu, 11 Jan 2024 16:48:03 -0800
Subject: [PATCH 11/22] Diff threshold tests pass (don't show a diff even when
 there is a slight one).

---
 .../cypress/tests/cypress/e2e/options.cy.ts   |  6 ++++-
 packages/playwright/tests/options.spec.ts     | 10 ++++++-
 .../options/pause-animation-at-end.html       | 26 +++++++++++++++++++
 3 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 test-server/fixtures/options/pause-animation-at-end.html

diff --git a/packages/cypress/tests/cypress/e2e/options.cy.ts b/packages/cypress/tests/cypress/e2e/options.cy.ts
index 112563b3..a1e4700c 100644
--- a/packages/cypress/tests/cypress/e2e/options.cy.ts
+++ b/packages/cypress/tests/cypress/e2e/options.cy.ts
@@ -2,6 +2,10 @@ it('Options / delay', { env: { delay: 1200 } }, () => {
   cy.visit('/options/delay');
 });
 
-it('Options / diff threshold' /*, { env: { diffThreshold: 1 } }*/, () => {
+it('Options / diff threshold', { env: { diffThreshold: 1 } }, () => {
   cy.visit('/options/diff-threshold');
 });
+
+it('Options / pause animation at end', /*{ env: { pauseAnimationAtEnd: true } },*/ () => {
+  cy.visit('/options/pause-animation-at-end');
+});
diff --git a/packages/playwright/tests/options.spec.ts b/packages/playwright/tests/options.spec.ts
index 83e1eef9..1936ba42 100644
--- a/packages/playwright/tests/options.spec.ts
+++ b/packages/playwright/tests/options.spec.ts
@@ -9,9 +9,17 @@ test.describe(() => {
 });
 
 test.describe(() => {
-  // test.use({ diffThreshold: 1 });
+  test.use({ diffThreshold: 1 });
 
   test('Options / diff threshold', async ({ page }) => {
     await page.goto('/options/diff-threshold');
   });
 });
+
+test.describe(() => {
+  // test.use({ pauseAnimationAtEnd: true });
+
+  test('Options / pause animation at end', async ({ page }) => {
+    await page.goto('/options/pause-animation-at-end');
+  });
+});
diff --git a/test-server/fixtures/options/pause-animation-at-end.html b/test-server/fixtures/options/pause-animation-at-end.html
new file mode 100644
index 00000000..4f5944df
--- /dev/null
+++ b/test-server/fixtures/options/pause-animation-at-end.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+  <head>
+    <style>  
+      img {
+        opacity: 0;
+        animation-name: make-shown;
+        /* image takes forever to fade in */
+        animation-duration: 20s;        
+        animation-fill-mode: forwards;
+      }
+
+      @keyframes make-shown {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <img src="/img?url=fixtures/blue.png"/>
+  </body>
+</html>
\ No newline at end of file

From e8bb49d435f2d94589a767e7c4f198ef77915f9f Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Fri, 12 Jan 2024 11:59:42 -0800
Subject: [PATCH 12/22] Forced-colors story added

---
 packages/cypress/tests/cypress/e2e/options.cy.ts |  4 ++++
 packages/playwright/tests/options.spec.ts        |  8 ++++++++
 test-server/fixtures/options/forced-colors.html  | 13 +++++++++++++
 3 files changed, 25 insertions(+)
 create mode 100644 test-server/fixtures/options/forced-colors.html

diff --git a/packages/cypress/tests/cypress/e2e/options.cy.ts b/packages/cypress/tests/cypress/e2e/options.cy.ts
index a1e4700c..e742c1cb 100644
--- a/packages/cypress/tests/cypress/e2e/options.cy.ts
+++ b/packages/cypress/tests/cypress/e2e/options.cy.ts
@@ -9,3 +9,7 @@ it('Options / diff threshold', { env: { diffThreshold: 1 } }, () => {
 it('Options / pause animation at end', /*{ env: { pauseAnimationAtEnd: true } },*/ () => {
   cy.visit('/options/pause-animation-at-end');
 });
+
+it('Options / force high-contrast' /*, { env: { forcedColors: true } }*/, () => {
+  cy.visit('/options/forced-colors');
+});
diff --git a/packages/playwright/tests/options.spec.ts b/packages/playwright/tests/options.spec.ts
index 1936ba42..9a5f870c 100644
--- a/packages/playwright/tests/options.spec.ts
+++ b/packages/playwright/tests/options.spec.ts
@@ -23,3 +23,11 @@ test.describe(() => {
     await page.goto('/options/pause-animation-at-end');
   });
 });
+
+test.describe(() => {
+  // test.use({ forcedColors: true });
+
+  test('Options / force high-contrast', async ({ page }) => {
+    await page.goto('/options/forced-colors');
+  });
+});
diff --git a/test-server/fixtures/options/forced-colors.html b/test-server/fixtures/options/forced-colors.html
new file mode 100644
index 00000000..6467df0f
--- /dev/null
+++ b/test-server/fixtures/options/forced-colors.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <head>
+    <style>  
+      h1 {
+        color: #eee;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>This title is hard to read without high-contrast mode.</h1>    
+  </body>
+</html>
\ No newline at end of file

From 89f2dbd1f7d044f846efa15e21562dff0f2c28ca Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Fri, 12 Jan 2024 12:11:28 -0800
Subject: [PATCH 13/22] Forced colors are passed through

---
 packages/cypress/tests/cypress/e2e/options.cy.ts | 2 +-
 packages/playwright/tests/options.spec.ts        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/cypress/tests/cypress/e2e/options.cy.ts b/packages/cypress/tests/cypress/e2e/options.cy.ts
index e742c1cb..cea327f0 100644
--- a/packages/cypress/tests/cypress/e2e/options.cy.ts
+++ b/packages/cypress/tests/cypress/e2e/options.cy.ts
@@ -10,6 +10,6 @@ it('Options / pause animation at end', /*{ env: { pauseAnimationAtEnd: true } },
   cy.visit('/options/pause-animation-at-end');
 });
 
-it('Options / force high-contrast' /*, { env: { forcedColors: true } }*/, () => {
+it('Options / force high-contrast', { env: { forcedColors: true } }, () => {
   cy.visit('/options/forced-colors');
 });
diff --git a/packages/playwright/tests/options.spec.ts b/packages/playwright/tests/options.spec.ts
index 9a5f870c..84bb22a6 100644
--- a/packages/playwright/tests/options.spec.ts
+++ b/packages/playwright/tests/options.spec.ts
@@ -25,7 +25,7 @@ test.describe(() => {
 });
 
 test.describe(() => {
-  // test.use({ forcedColors: true });
+  test.use({ forcedColors: true });
 
   test('Options / force high-contrast', async ({ page }) => {
     await page.goto('/options/forced-colors');

From 69809fe1116a22ce78eadfc4d46739402c24350f Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Fri, 12 Jan 2024 12:13:07 -0800
Subject: [PATCH 14/22] Use proper value for forcedColors

---
 packages/cypress/tests/cypress/e2e/options.cy.ts | 2 +-
 packages/playwright/tests/options.spec.ts        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/cypress/tests/cypress/e2e/options.cy.ts b/packages/cypress/tests/cypress/e2e/options.cy.ts
index cea327f0..3c63246c 100644
--- a/packages/cypress/tests/cypress/e2e/options.cy.ts
+++ b/packages/cypress/tests/cypress/e2e/options.cy.ts
@@ -10,6 +10,6 @@ it('Options / pause animation at end', /*{ env: { pauseAnimationAtEnd: true } },
   cy.visit('/options/pause-animation-at-end');
 });
 
-it('Options / force high-contrast', { env: { forcedColors: true } }, () => {
+it('Options / force high-contrast', { env: { forcedColors: 'active' } }, () => {
   cy.visit('/options/forced-colors');
 });
diff --git a/packages/playwright/tests/options.spec.ts b/packages/playwright/tests/options.spec.ts
index 84bb22a6..50d47030 100644
--- a/packages/playwright/tests/options.spec.ts
+++ b/packages/playwright/tests/options.spec.ts
@@ -25,7 +25,7 @@ test.describe(() => {
 });
 
 test.describe(() => {
-  test.use({ forcedColors: true });
+  test.use({ forcedColors: 'active' });
 
   test('Options / force high-contrast', async ({ page }) => {
     await page.goto('/options/forced-colors');

From a26a87b5d8170323867f41f3fd059c94f49ce02a Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Fri, 12 Jan 2024 12:19:27 -0800
Subject: [PATCH 15/22] Expected-case notes on options stories

---
 test-server/fixtures/options/delay.html                  | 1 +
 test-server/fixtures/options/diff-threshold.html         | 1 +
 test-server/fixtures/options/pause-animation-at-end.html | 1 +
 3 files changed, 3 insertions(+)

diff --git a/test-server/fixtures/options/delay.html b/test-server/fixtures/options/delay.html
index d5dec45b..80f9c726 100644
--- a/test-server/fixtures/options/delay.html
+++ b/test-server/fixtures/options/delay.html
@@ -23,5 +23,6 @@
   </head>
   <body>
     <img src="/img?url=fixtures/blue.png"/>
+    <h4>The image should be snapshotted since we're waiting until the delayed-revealed image is visible.</h4>
   </body>
 </html>
\ No newline at end of file
diff --git a/test-server/fixtures/options/diff-threshold.html b/test-server/fixtures/options/diff-threshold.html
index 8f576fa0..437cfa19 100644
--- a/test-server/fixtures/options/diff-threshold.html
+++ b/test-server/fixtures/options/diff-threshold.html
@@ -9,6 +9,7 @@
   </head>
   <body>
     <h1></h1>
+    <h4>Number above should have no diff, even though it switches between 6 and 8, since the diff threshold is so high</h4>
 
   <script>      
       const randomInteger = Math.ceil(Math.random() * 10);
diff --git a/test-server/fixtures/options/pause-animation-at-end.html b/test-server/fixtures/options/pause-animation-at-end.html
index 4f5944df..4c16f767 100644
--- a/test-server/fixtures/options/pause-animation-at-end.html
+++ b/test-server/fixtures/options/pause-animation-at-end.html
@@ -22,5 +22,6 @@
   </head>
   <body>
     <img src="/img?url=fixtures/blue.png"/>
+    <h4>The image should be snapshotted since we're forcing animations to the end (when the image is fully opaque).</h4>
   </body>
 </html>
\ No newline at end of file

From 691257bc6f05e6ffeb3c312cf85188ff228732ea Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Fri, 12 Jan 2024 12:24:04 -0800
Subject: [PATCH 16/22] Prefers reduced motion story created

---
 .../cypress/tests/cypress/e2e/options.cy.ts   |  4 ++++
 packages/playwright/tests/options.spec.ts     |  8 ++++++++
 .../options/prefers-reduced-motion.html       | 19 +++++++++++++++++++
 3 files changed, 31 insertions(+)
 create mode 100644 test-server/fixtures/options/prefers-reduced-motion.html

diff --git a/packages/cypress/tests/cypress/e2e/options.cy.ts b/packages/cypress/tests/cypress/e2e/options.cy.ts
index 3c63246c..d5b4eba2 100644
--- a/packages/cypress/tests/cypress/e2e/options.cy.ts
+++ b/packages/cypress/tests/cypress/e2e/options.cy.ts
@@ -13,3 +13,7 @@ it('Options / pause animation at end', /*{ env: { pauseAnimationAtEnd: true } },
 it('Options / force high-contrast', { env: { forcedColors: 'active' } }, () => {
   cy.visit('/options/forced-colors');
 });
+
+it('Options / prefers reduced motion', /*{ env: { prefersReducedMotion: 'reduce' } },*/ () => {
+  cy.visit('/options/prefers-reduced-motion');
+});
diff --git a/packages/playwright/tests/options.spec.ts b/packages/playwright/tests/options.spec.ts
index 50d47030..ce2f54a0 100644
--- a/packages/playwright/tests/options.spec.ts
+++ b/packages/playwright/tests/options.spec.ts
@@ -31,3 +31,11 @@ test.describe(() => {
     await page.goto('/options/forced-colors');
   });
 });
+
+test.describe(() => {
+  test.use({ prefersReducedMotion: 'reduce' });
+
+  test('Options / prefers reduced motion', async ({ page }) => {
+    await page.goto('/options/prefers-reduced-motion');
+  });
+});
diff --git a/test-server/fixtures/options/prefers-reduced-motion.html b/test-server/fixtures/options/prefers-reduced-motion.html
new file mode 100644
index 00000000..cc84e127
--- /dev/null
+++ b/test-server/fixtures/options/prefers-reduced-motion.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+  <head>
+    <style>  
+      h1 {
+        visibility: hidden;
+      }
+
+      @media (prefers-reduced-motion) {
+        h1 {
+          visibility: visible;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <h1>This message should appear when prefers-reduced-motion is enabled.</h1>    
+  </body>
+</html>
\ No newline at end of file

From 0a1a2d230e6573a9b97a07e04c21a4ea71f5c91c Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Fri, 12 Jan 2024 12:27:44 -0800
Subject: [PATCH 17/22] Properly not passing param yet

---
 packages/playwright/tests/options.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playwright/tests/options.spec.ts b/packages/playwright/tests/options.spec.ts
index ce2f54a0..13a1e6b3 100644
--- a/packages/playwright/tests/options.spec.ts
+++ b/packages/playwright/tests/options.spec.ts
@@ -33,7 +33,7 @@ test.describe(() => {
 });
 
 test.describe(() => {
-  test.use({ prefersReducedMotion: 'reduce' });
+  // test.use({ prefersReducedMotion: 'reduce' });
 
   test('Options / prefers reduced motion', async ({ page }) => {
     await page.goto('/options/prefers-reduced-motion');

From 3f4853b0ee09aa25550d60fc434f7ce08ac34513 Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Fri, 12 Jan 2024 12:31:55 -0800
Subject: [PATCH 18/22] Reduced motion stories will pass

---
 packages/cypress/tests/cypress/e2e/options.cy.ts | 2 +-
 packages/playwright/tests/options.spec.ts        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/cypress/tests/cypress/e2e/options.cy.ts b/packages/cypress/tests/cypress/e2e/options.cy.ts
index d5b4eba2..c2b4221c 100644
--- a/packages/cypress/tests/cypress/e2e/options.cy.ts
+++ b/packages/cypress/tests/cypress/e2e/options.cy.ts
@@ -14,6 +14,6 @@ it('Options / force high-contrast', { env: { forcedColors: 'active' } }, () => {
   cy.visit('/options/forced-colors');
 });
 
-it('Options / prefers reduced motion', /*{ env: { prefersReducedMotion: 'reduce' } },*/ () => {
+it('Options / prefers reduced motion', { env: { prefersReducedMotion: 'reduce' } }, () => {
   cy.visit('/options/prefers-reduced-motion');
 });
diff --git a/packages/playwright/tests/options.spec.ts b/packages/playwright/tests/options.spec.ts
index 13a1e6b3..ce2f54a0 100644
--- a/packages/playwright/tests/options.spec.ts
+++ b/packages/playwright/tests/options.spec.ts
@@ -33,7 +33,7 @@ test.describe(() => {
 });
 
 test.describe(() => {
-  // test.use({ prefersReducedMotion: 'reduce' });
+  test.use({ prefersReducedMotion: 'reduce' });
 
   test('Options / prefers reduced motion', async ({ page }) => {
     await page.goto('/options/prefers-reduced-motion');

From 98876ce0b2700030547613353d044d17d7193aa9 Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Fri, 12 Jan 2024 12:33:56 -0800
Subject: [PATCH 19/22] Animation is paused at end

---
 packages/cypress/tests/cypress/e2e/options.cy.ts | 2 +-
 packages/playwright/tests/options.spec.ts        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/cypress/tests/cypress/e2e/options.cy.ts b/packages/cypress/tests/cypress/e2e/options.cy.ts
index c2b4221c..97ec424d 100644
--- a/packages/cypress/tests/cypress/e2e/options.cy.ts
+++ b/packages/cypress/tests/cypress/e2e/options.cy.ts
@@ -6,7 +6,7 @@ it('Options / diff threshold', { env: { diffThreshold: 1 } }, () => {
   cy.visit('/options/diff-threshold');
 });
 
-it('Options / pause animation at end', /*{ env: { pauseAnimationAtEnd: true } },*/ () => {
+it('Options / pause animation at end', { env: { pauseAnimationAtEnd: true } }, () => {
   cy.visit('/options/pause-animation-at-end');
 });
 
diff --git a/packages/playwright/tests/options.spec.ts b/packages/playwright/tests/options.spec.ts
index ce2f54a0..00b21983 100644
--- a/packages/playwright/tests/options.spec.ts
+++ b/packages/playwright/tests/options.spec.ts
@@ -17,7 +17,7 @@ test.describe(() => {
 });
 
 test.describe(() => {
-  // test.use({ pauseAnimationAtEnd: true });
+  test.use({ pauseAnimationAtEnd: true });
 
   test('Options / pause animation at end', async ({ page }) => {
     await page.goto('/options/pause-animation-at-end');

From 848bb3781c8551ca823a2f39e727dee49941ee86 Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Fri, 12 Jan 2024 12:39:08 -0800
Subject: [PATCH 20/22] Shorten animation time so capture is quicker

---
 test-server/fixtures/options/pause-animation-at-end.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test-server/fixtures/options/pause-animation-at-end.html b/test-server/fixtures/options/pause-animation-at-end.html
index 4c16f767..be4346c2 100644
--- a/test-server/fixtures/options/pause-animation-at-end.html
+++ b/test-server/fixtures/options/pause-animation-at-end.html
@@ -5,8 +5,8 @@
       img {
         opacity: 0;
         animation-name: make-shown;
-        /* image takes forever to fade in */
-        animation-duration: 20s;        
+        /* image takes awhile to fade in */
+        animation-duration: 2s;        
         animation-fill-mode: forwards;
       }
 

From 180ebf6eb1f03a37941007586248a396f253cf2a Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Tue, 16 Jan 2024 12:18:37 -0800
Subject: [PATCH 21/22] Page route handlers below asset handlers so pages don't
 steal handlers with their wildcard-ness

---
 test-server/server.js | 70 +++++++++++++++++++++----------------------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/test-server/server.js b/test-server/server.js
index eae0e140..d981ed6b 100644
--- a/test-server/server.js
+++ b/test-server/server.js
@@ -8,41 +8,6 @@ const port = 3000;
 const htmlIntro = `<!doctype html><html>`;
 const htmlOutro = `</html>`;
 
-// Pages
-app.get('/', (req, res) => {
-  res.send(`${htmlIntro}<body>Testing</body>${htmlOutro}`);
-});
-
-// Asset path pages
-app.get('/asset-paths/:page', (req, res) => {
-  res.sendFile(path.join(__dirname, `fixtures/asset-paths/${req.params.page}.html`));
-});
-
-// Options pages
-app.get('/options/:page', (req, res) => {
-  res.sendFile(path.join(__dirname, `fixtures/options/${req.params.page}.html`));
-});
-
-app.get('/ignore', (req, res) => {
-  res.sendFile(path.join(__dirname, 'fixtures/dynamic-content.html'));
-});
-
-app.get('/forms', (req, res) => {
-  res.sendFile(path.join(__dirname, 'fixtures/forms.html'));
-});
-
-// Send a redirect to the GET handler with the same path to ensure we're not caching POST responses and serving
-// it instead of the real GET response.
-app.post('/form-success', (req, res) => {
-  res.send(
-    `${htmlIntro}<head><meta http-equiv="refresh" content="0; URL=/form-success" /></head><body></body>${htmlOutro}`
-  );
-});
-
-app.get('/form-success', (req, res) => {
-  res.send(`${htmlIntro}<body><p>OK!</p></body>${htmlOutro}`);
-});
-
 // Assets
 
 app.get('/css.urls.css', (req, res) => {
@@ -80,6 +45,41 @@ app.get('/background-img.png', (req, res) => {
   res.sendFile(path.join(__dirname, 'fixtures/purple.png'));
 });
 
+// Pages
+app.get('/', (req, res) => {
+  res.send(`${htmlIntro}<body>Testing</body>${htmlOutro}`);
+});
+
+// Asset path pages
+app.get('/asset-paths/:page', (req, res) => {
+  res.sendFile(path.join(__dirname, `fixtures/asset-paths/${req.params.page}.html`));
+});
+
+// Options pages
+app.get('/options/:page', (req, res) => {
+  res.sendFile(path.join(__dirname, `fixtures/options/${req.params.page}.html`));
+});
+
+app.get('/ignore', (req, res) => {
+  res.sendFile(path.join(__dirname, 'fixtures/dynamic-content.html'));
+});
+
+app.get('/forms', (req, res) => {
+  res.sendFile(path.join(__dirname, 'fixtures/forms.html'));
+});
+
+// Send a redirect to the GET handler with the same path to ensure we're not caching POST responses and serving
+// it instead of the real GET response.
+app.post('/form-success', (req, res) => {
+  res.send(
+    `${htmlIntro}<head><meta http-equiv="refresh" content="0; URL=/form-success" /></head><body></body>${htmlOutro}`
+  );
+});
+
+app.get('/form-success', (req, res) => {
+  res.send(`${htmlIntro}<body><p>OK!</p></body>${htmlOutro}`);
+});
+
 app.listen(port, () => {
   console.log(`Example app listening on port ${port}`);
 });

From 2372cdc3af0df9aedbb590e82b74b349d97ea923 Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Tue, 16 Jan 2024 15:14:23 -0800
Subject: [PATCH 22/22] Account for option renaming

---
 packages/cypress/src/support.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/cypress/src/support.ts b/packages/cypress/src/support.ts
index 823ac615..8c4da6f2 100644
--- a/packages/cypress/src/support.ts
+++ b/packages/cypress/src/support.ts
@@ -9,12 +9,12 @@ beforeEach(() => {
   cy.wrap([]).as('manualSnapshots');
   cy.task('prepareArchives', {
     action: 'setup-network-listener',
-    payload: { allowedDomains: Cypress.env('allowedArchiveDomains') },
+    payload: { allowedDomains: Cypress.env('assetDomains') },
   });
 });
 
 afterEach(() => {
-  if (Cypress.env('disableAutoCapture')) {
+  if (Cypress.env('disableAutoSnapshot')) {
     return;
   }
   // can we be sure this always fires after all the requests are back?