From 5f7609dc3ee0bba50c5c7859b6c74204d1971043 Mon Sep 17 00:00:00 2001
From: John Hobbs <john@velvetcache.org>
Date: Thu, 26 Sep 2024 10:48:42 -0500
Subject: [PATCH 1/2] Add support for Chromatic ignore parameter.

---
 packages/cypress/src/support.ts                       |  1 +
 .../cypress/tests/cypress/e2e/ignored-regions.cy.ts   |  2 +-
 packages/playwright/src/makeTest.ts                   |  3 +++
 packages/playwright/tests/ignored-regions.spec.ts     | 11 +++++++----
 packages/shared/src/types.ts                          |  3 +++
 test-server/fixtures/dynamic-content.html             |  4 +++-
 6 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/cypress/src/support.ts b/packages/cypress/src/support.ts
index 75763cad..72c53788 100644
--- a/packages/cypress/src/support.ts
+++ b/packages/cypress/src/support.ts
@@ -54,6 +54,7 @@ afterEach(() => {
               ...(Cypress.env('cropToViewport') && {
                 cropToViewport: Cypress.env('cropToViewport'),
               }),
+              ...(Cypress.env('ignore') && { ignore: Cypress.env('ignore') }),
             },
             pageUrl: url,
             viewport: {
diff --git a/packages/cypress/tests/cypress/e2e/ignored-regions.cy.ts b/packages/cypress/tests/cypress/e2e/ignored-regions.cy.ts
index 12b0f714..57968f34 100644
--- a/packages/cypress/tests/cypress/e2e/ignored-regions.cy.ts
+++ b/packages/cypress/tests/cypress/e2e/ignored-regions.cy.ts
@@ -1,6 +1,6 @@
 // NOTE: This is a test that is meant to be run through Chromatic, so it doesn't actually work
 //       with the automated test suite.
-it('ignored regions work with chromatic', () => {
+it('ignored regions work with chromatic', { env: { ignore: ['.custom-ignore'] } }, () => {
   cy.visit('/ignore');
   cy.wait(1000);
 });
diff --git a/packages/playwright/src/makeTest.ts b/packages/playwright/src/makeTest.ts
index 9aee77a1..b45965ba 100644
--- a/packages/playwright/src/makeTest.ts
+++ b/packages/playwright/src/makeTest.ts
@@ -31,6 +31,7 @@ export const performChromaticSnapshot = async (
     resourceArchiveTimeout,
     assetDomains,
     cropToViewport,
+    ignore,
   }: ChromaticConfig & { page: Page },
   use: () => Promise<void>,
   testInfo: TestInfo
@@ -73,6 +74,7 @@ export const performChromaticSnapshot = async (
       ...(pauseAnimationAtEnd && { pauseAnimationAtEnd }),
       ...(prefersReducedMotion && { prefersReducedMotion }),
       ...(cropToViewport && { cropToViewport }),
+      ...(ignore && { ignore }),
     };
 
     // TestInfo.outputDir gives us the test-specific subfolder (https://playwright.dev/docs/api/class-testconfig#test-config-output-dir);
@@ -115,6 +117,7 @@ export const makeTest = (
     resourceArchiveTimeout: [DEFAULT_GLOBAL_RESOURCE_ARCHIVE_TIMEOUT_MS, { option: true }],
     assetDomains: [[], { option: true }],
     cropToViewport: [undefined, { option: true }],
+    ignore: [undefined, { option: true }],
 
     chromaticSnapshot: [
       performChromaticSnapshot,
diff --git a/packages/playwright/tests/ignored-regions.spec.ts b/packages/playwright/tests/ignored-regions.spec.ts
index 4c49aefe..0e57a15e 100644
--- a/packages/playwright/tests/ignored-regions.spec.ts
+++ b/packages/playwright/tests/ignored-regions.spec.ts
@@ -2,8 +2,11 @@ import { test, expect } from '../src';
 
 // NOTE: This is a test that is meant to be run through Chromatic, so it doesn't actually work
 //       with the automated test suite.
-test('ignored regions work with chromatic', async ({ page }) => {
-  test.setTimeout(2000);
-  await page.goto('/ignore');
-  await setTimeout(() => {}, 1000);
+test.describe('ignore regions', () => {
+  test.use({ ignore: ['.custom-ignore'] });
+  test('work with chromatic', async ({ page }) => {
+    test.setTimeout(2000);
+    await page.goto('/ignore');
+    await setTimeout(() => {}, 1000);
+  });
 });
diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
index 88d95632..95a5a48c 100644
--- a/packages/shared/src/types.ts
+++ b/packages/shared/src/types.ts
@@ -31,6 +31,9 @@ export interface ChromaticConfig {
 
   // Crop snapshots to the viewport size.
   cropToViewport?: boolean;
+
+  // CSS selectors of elements to ignore when comparing snapshots.
+  ignore?: string[];
 }
 
 export type ChromaticStorybookParameters = Omit<ChromaticConfig, 'disableAutoSnapshot'>;
diff --git a/test-server/fixtures/dynamic-content.html b/test-server/fixtures/dynamic-content.html
index 469c65d5..6d5d9bc5 100644
--- a/test-server/fixtures/dynamic-content.html
+++ b/test-server/fixtures/dynamic-content.html
@@ -22,12 +22,14 @@
             <h1>Hello There! The current time is:</h1>
             <div data-chromatic="ignore" id="time-e2e-test-ignore"></div>
             <div class="chromatic-ignore" id="time-e2e-test-ignore-2"></div>
+            <div class="custom-ignore" id="time-e2e-test-ignore-3"></div>
         </div>
 
         <script>
             let date = new Date();
             document.getElementById('time-e2e-test-ignore').innerText = date.toTimeString();
             document.getElementById('time-e2e-test-ignore-2').innerText = date.toTimeString();
+            document.getElementById('time-e2e-test-ignore-3').innerText = date.toTimeString();
         </script>
     </body>
-</html>
\ No newline at end of file
+</html>

From 164f7d41212cfd9a799016c472ed6fc9b4db7097 Mon Sep 17 00:00:00 2001
From: John Hobbs <john@velvetcache.org>
Date: Thu, 26 Sep 2024 11:08:47 -0500
Subject: [PATCH 2/2] Restore full test name

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

diff --git a/packages/playwright/tests/ignored-regions.spec.ts b/packages/playwright/tests/ignored-regions.spec.ts
index 0e57a15e..5bf07768 100644
--- a/packages/playwright/tests/ignored-regions.spec.ts
+++ b/packages/playwright/tests/ignored-regions.spec.ts
@@ -4,7 +4,7 @@ import { test, expect } from '../src';
 //       with the automated test suite.
 test.describe('ignore regions', () => {
   test.use({ ignore: ['.custom-ignore'] });
-  test('work with chromatic', async ({ page }) => {
+  test('ignored regions work with chromatic', async ({ page }) => {
     test.setTimeout(2000);
     await page.goto('/ignore');
     await setTimeout(() => {}, 1000);