Merge pull request #203 from chromaui/jmhobbs/cap-1390-allow-ignoring…

…-elements-from-test-configuration Add support for Chromatic ignore parameter.
chromaui · Sep 26, 2024 · f803208 · f803208
2 parents cf4e059 + 164f7d4
commit f803208
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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('ignored regions 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
@@ -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
@@ -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>
+</html>