From 0153e633f7e782062005ed56b2915d6998ec6150 Mon Sep 17 00:00:00 2001 From: Todd Evanoff Date: Fri, 21 Jun 2024 16:08:37 -0700 Subject: [PATCH 01/10] modify playwright outputDir in the correct place Co-authored-by: Andrew Ortwein --- packages/playwright/src/makeTest.ts | 6 +++++- packages/shared/src/write-archive/index.test.ts | 16 ++++++++-------- packages/shared/src/write-archive/index.ts | 4 +--- 3 files changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/playwright/src/makeTest.ts b/packages/playwright/src/makeTest.ts index db734b19..5816852c 100644 --- a/packages/playwright/src/makeTest.ts +++ b/packages/playwright/src/makeTest.ts @@ -14,6 +14,7 @@ import { trackRun, DEFAULT_GLOBAL_RESOURCE_ARCHIVE_TIMEOUT_MS, } from '@chromatic-com/shared-e2e'; +import { join } from 'node:path'; import { chromaticSnapshots, takeSnapshot } from './takeSnapshot'; import { createResourceArchive } from './createResourceArchive'; @@ -72,8 +73,11 @@ export const performChromaticSnapshot = async ( ...(cropToViewport && { cropToViewport }), }; + // TestInfo.outputDir gives us the test-specific subfolder (https://playwright.dev/docs/api/class-testconfig#test-config-output-dir); + // we want to write one level above that + const outputDir = join(testInfo.outputDir, '..'); await writeTestResult( - { ...testInfo, pageUrl: page.url(), viewport: page.viewportSize() }, + { ...testInfo, outputDir, pageUrl: page.url(), viewport: page.viewportSize() }, Object.fromEntries(snapshots), resourceArchive, chromaticStorybookParams diff --git a/packages/shared/src/write-archive/index.test.ts b/packages/shared/src/write-archive/index.test.ts index 62423cbd..a94e14de 100644 --- a/packages/shared/src/write-archive/index.test.ts +++ b/packages/shared/src/write-archive/index.test.ts @@ -34,7 +34,7 @@ describe('writeTestResult', () => { // the default output directory in playwright { titlePath: ['file.spec.ts', 'Test Story'], - outputDir: resolve('test-results/test-story-chromium'), + outputDir: resolve('test-results'), pageUrl: 'http://localhost:3000/', viewport: { height: 800, width: 800 }, }, @@ -90,7 +90,7 @@ describe('writeTestResult', () => { // the default output directory in playwright { titlePath: ['file.spec.ts', 'Toy Story'], - outputDir: resolve('test-results/toy-story-chromium'), + outputDir: resolve('test-results'), pageUrl: 'http://localhost:3000/', viewport: { height: 800, width: 800 }, }, @@ -127,7 +127,7 @@ describe('writeTestResult', () => { { titlePath: ['file.spec.ts', 'Test Story'], // simulates setting a custom output directory in Playwright - outputDir: resolve('some-custom-directory/directory/test-story-chromium'), + outputDir: resolve('some-custom-directory/directory'), pageUrl: 'http://localhost:3000/', viewport: { height: 800, width: 800 }, }, @@ -151,7 +151,7 @@ describe('writeTestResult', () => { await writeTestResult( { titlePath: ['file.spec.ts', 'A grouping', 'Test Story'], - outputDir: resolve('test-results/test-story-chromium'), + outputDir: resolve('test-results'), pageUrl: 'http://localhost:3000/', viewport: { height: 800, width: 800 }, }, @@ -177,7 +177,7 @@ describe('writeTestResult', () => { '.someFunction', '.someFunction() calls something', ], - outputDir: resolve('test-results/test-story-chromium'), + outputDir: resolve('test-results'), pageUrl: 'http://localhost:3000/', viewport: { height: 800, width: 800 }, }, @@ -199,7 +199,7 @@ describe('writeTestResult', () => { await writeTestResult( { titlePath: ['some.file.spec.ts', 'Test Story'], - outputDir: resolve('test-results/test-story-chromium'), + outputDir: resolve('test-results'), pageUrl: 'http://localhost:3000/', viewport: { height: 800, width: 800 }, }, @@ -221,7 +221,7 @@ describe('writeTestResult', () => { await writeTestResult( { titlePath: ['some.file.cy.ts', 'Test Story'], - outputDir: resolve('test-results/test-story-chromium'), + outputDir: resolve('test-results'), pageUrl: 'http://localhost:3000/', viewport: { height: 800, width: 800 }, }, @@ -243,7 +243,7 @@ describe('writeTestResult', () => { await writeTestResult( { titlePath: ['file.ts', 'Test Story'], - outputDir: resolve('test-results/test-story-chromium'), + outputDir: resolve('test-results'), pageUrl: 'http://localhost:3000/', viewport: { height: 800, width: 800 }, }, diff --git a/packages/shared/src/write-archive/index.ts b/packages/shared/src/write-archive/index.ts index d5af9c10..60218f25 100644 --- a/packages/shared/src/write-archive/index.ts +++ b/packages/shared/src/write-archive/index.ts @@ -38,9 +38,7 @@ export async function writeTestResult( ); // in Storybook, `/` splits the title out into hierarchies (folders) const title = titlePathWithoutFileExtensions.join('/'); - // outputDir gives us the test-specific subfolder (https://playwright.dev/docs/api/class-testconfig#test-config-output-dir); - // we want to write one level above that - const finalOutputDir = join(outputDir, '..', 'chromatic-archives'); + const finalOutputDir = join(outputDir, 'chromatic-archives'); const archiveDir = join(finalOutputDir, 'archive'); From a53ace5249c31d8418b7cc72c05a927190e84ed8 Mon Sep 17 00:00:00 2001 From: Todd Evanoff Date: Fri, 21 Jun 2024 16:09:24 -0700 Subject: [PATCH 02/10] use the configured downloadsFolder as outputDir for cypress Co-authored-by: Andrew Ortwein --- packages/cypress/src/index.ts | 6 +++--- packages/cypress/src/support.ts | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/cypress/src/index.ts b/packages/cypress/src/index.ts index 2f80ceba..5e958dea 100644 --- a/packages/cypress/src/index.ts +++ b/packages/cypress/src/index.ts @@ -21,6 +21,7 @@ interface WriteParams { chromaticStorybookParams: ChromaticStorybookParameters; pageUrl: string; viewport: Viewport; + outputDir: string; } interface WriteArchivesParams extends WriteParams { @@ -34,6 +35,7 @@ const writeArchives = async ({ chromaticStorybookParams, pageUrl, viewport, + outputDir, }: WriteArchivesParams) => { const bufferedArchiveList = Object.entries(resourceArchive).map(([key, value]) => { return [ @@ -59,9 +61,7 @@ const writeArchives = async ({ await writeTestResult( { titlePath: testTitlePath, - // this will store it at ./cypress/downloads (the last directory doesn't matter) - // TODO: change so we don't have to do this trickery - outputDir: './cypress/downloads/some', + outputDir, pageUrl, viewport, }, diff --git a/packages/cypress/src/support.ts b/packages/cypress/src/support.ts index a4536154..c247861c 100644 --- a/packages/cypress/src/support.ts +++ b/packages/cypress/src/support.ts @@ -60,6 +60,7 @@ afterEach(() => { height: Cypress.config('viewportHeight'), width: Cypress.config('viewportWidth'), }, + outputDir: Cypress.config('downloadsFolder'), }, }); }); From 614434049b31bd3ebf4e32165526790aa251ced8 Mon Sep 17 00:00:00 2001 From: Todd Evanoff Date: Fri, 21 Jun 2024 16:13:33 -0700 Subject: [PATCH 03/10] add changeset --- .changeset/slimy-cups-protect.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/slimy-cups-protect.md diff --git a/.changeset/slimy-cups-protect.md b/.changeset/slimy-cups-protect.md new file mode 100644 index 00000000..130ac27f --- /dev/null +++ b/.changeset/slimy-cups-protect.md @@ -0,0 +1,6 @@ +--- +'@chromatic-com/playwright': patch +'@chromatic-com/cypress': patch +--- + +Use the configured `downloadsFolder` in Cypress as the output dir for archives From 835f9d82a4d0b742d395fb0896a828db52c60861 Mon Sep 17 00:00:00 2001 From: Steven Kitterman Date: Tue, 25 Jun 2024 10:50:11 -0700 Subject: [PATCH 04/10] Task for ensuring a downloads folder is created where we intend --- packages/cypress/tests/cypress.config.ts | 5 +++++ .../tests/cypress/e2e/custom-downloads-directory.cy.ts | 7 +++++++ 2 files changed, 12 insertions(+) create mode 100644 packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts diff --git a/packages/cypress/tests/cypress.config.ts b/packages/cypress/tests/cypress.config.ts index 8d2e914f..dbb4b06e 100644 --- a/packages/cypress/tests/cypress.config.ts +++ b/packages/cypress/tests/cypress.config.ts @@ -9,6 +9,11 @@ export default defineConfig({ baseUrl: 'http://localhost:3000', setupNodeEvents(on, config) { installPlugin(on, config); + on('task', { + directoryExists(directoryName) { + return true; + }, + }); }, }, }); diff --git a/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts b/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts new file mode 100644 index 00000000..ffd7b690 --- /dev/null +++ b/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts @@ -0,0 +1,7 @@ +context('using Cypress.config', () => { + it('Downloads archives to the user-specified folder', () => { + cy.visit('/viewports'); + const dirExists = cy.task('directoryExists', '/some-dir'); + console.log('DIRECTORY EXISTS', dirExists); + }); +}); From 27ce9f6b717251f841dcc00a1bd91da6e4902ebc Mon Sep 17 00:00:00 2001 From: Todd Evanoff Date: Tue, 2 Jul 2024 16:54:30 -0700 Subject: [PATCH 05/10] add test verifying that the correct cypress dir is used --- .gitignore | 1 + package.json | 4 ++-- packages/cypress/tests/cypress.config.ts | 6 +++++- .../tests/cypress/e2e/custom-downloads-directory.cy.ts | 6 ++++-- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index e8e3064e..63989f73 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,5 @@ test-archives **/playwright/.cache/ packages/playwright/test-results/ packages/cypress/tests/cypress/downloads/ +packages/cypress/tests/cypress/new-downloads/ packages/*/coverage/ diff --git a/package.json b/package.json index 1cb36ac8..d6c476f3 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,8 @@ "scripts": { "archive-storybook:playwright": "CHROMATIC_ARCHIVE_LOCATION=packages/playwright/test-results packages/playwright/dist/bin/archive-storybook.js", "build-archive-storybook:playwright": "CHROMATIC_ARCHIVE_LOCATION=packages/playwright/test-results packages/playwright/dist/bin/build-archive-storybook.js", - "archive-storybook:cypress": "CHROMATIC_ARCHIVE_LOCATION=packages/cypress/tests/cypress/downloads packages/cypress/dist/bin/archive-storybook.js", - "build-archive-storybook:cypress": "CHROMATIC_ARCHIVE_LOCATION=packages/cypress/tests/cypress/downloads packages/cypress/dist/bin/build-archive-storybook.js", + "archive-storybook:cypress": "CHROMATIC_ARCHIVE_LOCATION=packages/cypress/tests/cypress/new-downloads packages/cypress/dist/bin/archive-storybook.js", + "build-archive-storybook:cypress": "CHROMATIC_ARCHIVE_LOCATION=packages/cypress/tests/cypress/new-downloads packages/cypress/dist/bin/build-archive-storybook.js", "clean": "yarn workspaces foreach --all --parallel run clean", "prebuild": "yarn clean", "build": "yarn workspaces foreach --all --topological-dev --parallel run build", diff --git a/packages/cypress/tests/cypress.config.ts b/packages/cypress/tests/cypress.config.ts index dbb4b06e..c612060c 100644 --- a/packages/cypress/tests/cypress.config.ts +++ b/packages/cypress/tests/cypress.config.ts @@ -1,7 +1,11 @@ import { defineConfig } from 'cypress'; import { installPlugin } from '../dist'; +import { existsSync } from 'node:fs'; export default defineConfig({ + // `downloadsFolder` cannot be overridden in tests, so we're setting + // this to a non-default value for asserting in the tests + downloadsFolder: 'cypress/new-downloads', // needed since we use common mock images between Cypress and Playwright fixturesFolder: '../../../test-server/fixtures', screenshotOnRunFailure: false, @@ -11,7 +15,7 @@ export default defineConfig({ installPlugin(on, config); on('task', { directoryExists(directoryName) { - return true; + return existsSync(directoryName); }, }); }, diff --git a/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts b/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts index ffd7b690..e9c13992 100644 --- a/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts +++ b/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts @@ -1,7 +1,9 @@ context('using Cypress.config', () => { it('Downloads archives to the user-specified folder', () => { cy.visit('/viewports'); - const dirExists = cy.task('directoryExists', '/some-dir'); - console.log('DIRECTORY EXISTS', dirExists); + const chromaticArchivesDir = `${Cypress.config('downloadsFolder')}/chromatic-archives`; + cy.task('directoryExists', chromaticArchivesDir).then((dirExists) => { + expect(dirExists).true; + }); }); }); From d69ccb97a7cc49c03ec5b23eba1400a2dfccd7f8 Mon Sep 17 00:00:00 2001 From: Todd Evanoff Date: Tue, 2 Jul 2024 17:29:55 -0700 Subject: [PATCH 06/10] update for consistency --- packages/shared/src/write-archive/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/write-archive/index.ts b/packages/shared/src/write-archive/index.ts index 60218f25..002b3114 100644 --- a/packages/shared/src/write-archive/index.ts +++ b/packages/shared/src/write-archive/index.ts @@ -1,4 +1,4 @@ -import { join } from 'path'; +import { join } from 'node:path'; import { outputFile, ensureDir, outputJSONFile } from '../utils/filePaths'; import { logger } from '../utils/logger'; import { ArchiveFile } from './archive-file'; From ebbb13d4d704106ed37e9e1e4b54645669126025 Mon Sep 17 00:00:00 2001 From: Todd Evanoff Date: Tue, 2 Jul 2024 17:51:25 -0700 Subject: [PATCH 07/10] tweak test --- .../cypress/e2e/custom-downloads-directory.cy.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts b/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts index e9c13992..64897014 100644 --- a/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts +++ b/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts @@ -1,9 +1,11 @@ -context('using Cypress.config', () => { - it('Downloads archives to the user-specified folder', () => { - cy.visit('/viewports'); +it( + 'downloads archives to the user-specified folder', + { env: { disableAutoSnapshot: true } }, + () => { + cy.visit('/asset-paths/query-params'); const chromaticArchivesDir = `${Cypress.config('downloadsFolder')}/chromatic-archives`; cy.task('directoryExists', chromaticArchivesDir).then((dirExists) => { expect(dirExists).true; }); - }); -}); + } +); From b4c214d56cf66a8a9e0ef4fcfa30445baabb9620 Mon Sep 17 00:00:00 2001 From: Todd Evanoff Date: Wed, 3 Jul 2024 08:04:42 -0700 Subject: [PATCH 08/10] rename dir --- .gitignore | 2 +- package.json | 4 ++-- packages/cypress/tests/cypress.config.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index 63989f73..5a91a658 100644 --- a/.gitignore +++ b/.gitignore @@ -22,5 +22,5 @@ test-archives **/playwright/.cache/ packages/playwright/test-results/ packages/cypress/tests/cypress/downloads/ -packages/cypress/tests/cypress/new-downloads/ +packages/cypress/tests/cypress/test-downloads/ packages/*/coverage/ diff --git a/package.json b/package.json index d6c476f3..5b37dc90 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,8 @@ "scripts": { "archive-storybook:playwright": "CHROMATIC_ARCHIVE_LOCATION=packages/playwright/test-results packages/playwright/dist/bin/archive-storybook.js", "build-archive-storybook:playwright": "CHROMATIC_ARCHIVE_LOCATION=packages/playwright/test-results packages/playwright/dist/bin/build-archive-storybook.js", - "archive-storybook:cypress": "CHROMATIC_ARCHIVE_LOCATION=packages/cypress/tests/cypress/new-downloads packages/cypress/dist/bin/archive-storybook.js", - "build-archive-storybook:cypress": "CHROMATIC_ARCHIVE_LOCATION=packages/cypress/tests/cypress/new-downloads packages/cypress/dist/bin/build-archive-storybook.js", + "archive-storybook:cypress": "CHROMATIC_ARCHIVE_LOCATION=packages/cypress/tests/cypress/test-downloads packages/cypress/dist/bin/archive-storybook.js", + "build-archive-storybook:cypress": "CHROMATIC_ARCHIVE_LOCATION=packages/cypress/tests/cypress/test-downloads packages/cypress/dist/bin/build-archive-storybook.js", "clean": "yarn workspaces foreach --all --parallel run clean", "prebuild": "yarn clean", "build": "yarn workspaces foreach --all --topological-dev --parallel run build", diff --git a/packages/cypress/tests/cypress.config.ts b/packages/cypress/tests/cypress.config.ts index c612060c..12d85a86 100644 --- a/packages/cypress/tests/cypress.config.ts +++ b/packages/cypress/tests/cypress.config.ts @@ -5,7 +5,7 @@ import { existsSync } from 'node:fs'; export default defineConfig({ // `downloadsFolder` cannot be overridden in tests, so we're setting // this to a non-default value for asserting in the tests - downloadsFolder: 'cypress/new-downloads', + downloadsFolder: 'cypress/test-downloads', // needed since we use common mock images between Cypress and Playwright fixturesFolder: '../../../test-server/fixtures', screenshotOnRunFailure: false, From f74bde795646780bdbf4fe76b331102439c7ab5d Mon Sep 17 00:00:00 2001 From: Todd Evanoff Date: Wed, 3 Jul 2024 13:11:09 -0700 Subject: [PATCH 09/10] tweak assertion and add comment --- .../tests/cypress/e2e/custom-downloads-directory.cy.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts b/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts index 64897014..9520770a 100644 --- a/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts +++ b/packages/cypress/tests/cypress/e2e/custom-downloads-directory.cy.ts @@ -1,3 +1,5 @@ +// Snapshots are disabled because we're asserting on file system concerns, +// not testing anything visual it( 'downloads archives to the user-specified folder', { env: { disableAutoSnapshot: true } }, @@ -5,7 +7,7 @@ it( cy.visit('/asset-paths/query-params'); const chromaticArchivesDir = `${Cypress.config('downloadsFolder')}/chromatic-archives`; cy.task('directoryExists', chromaticArchivesDir).then((dirExists) => { - expect(dirExists).true; + expect(dirExists).to.be.true; }); } ); From a4cd9c49ab30c0253bf654a3956c92b29b4c294e Mon Sep 17 00:00:00 2001 From: Todd Evanoff Date: Wed, 3 Jul 2024 13:14:56 -0700 Subject: [PATCH 10/10] update changeset copy --- .changeset/slimy-cups-protect.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.changeset/slimy-cups-protect.md b/.changeset/slimy-cups-protect.md index 130ac27f..c72ca495 100644 --- a/.changeset/slimy-cups-protect.md +++ b/.changeset/slimy-cups-protect.md @@ -3,4 +3,5 @@ '@chromatic-com/cypress': patch --- -Use the configured `downloadsFolder` in Cypress as the output dir for archives +- Use the configured `downloadsFolder` in Cypress as the output dir for archives +- Move Playwright-related path logic out of the shared package into the Playwright package