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, 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; 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 @@

Hello There! The current time is:

+
- \ No newline at end of file +