From 176dbdc97a9f506b8f3098a51890754f684c0240 Mon Sep 17 00:00:00 2001 From: David Hunt Date: Tue, 17 Dec 2024 22:41:47 +1300 Subject: [PATCH] fix: normalize playwright paths for screenshots to run on CI --- .changeset/plenty-shoes-lick.md | 5 +++++ packages/playwright/src/PlaywrightWorld.ts | 17 +++++++++++++--- packages/playwright/src/outcomes.steps.ts | 4 ++-- .../tests/playwright-actions-html.feature | 20 +++++++++---------- packages/playwright/tests/playwright.feature | 19 +++++++++--------- packages/playwright/tests/playwright.steps.ts | 13 +++++------- vitest.workspace.ts | 1 - 7 files changed, 44 insertions(+), 35 deletions(-) create mode 100644 .changeset/plenty-shoes-lick.md diff --git a/.changeset/plenty-shoes-lick.md b/.changeset/plenty-shoes-lick.md new file mode 100644 index 0000000..d68870b --- /dev/null +++ b/.changeset/plenty-shoes-lick.md @@ -0,0 +1,5 @@ +--- +"@quickpickle/playwright": patch +--- + +Fix the screenshot paths so they run on CI diff --git a/packages/playwright/src/PlaywrightWorld.ts b/packages/playwright/src/PlaywrightWorld.ts index 0a12d8f..fbea13a 100644 --- a/packages/playwright/src/PlaywrightWorld.ts +++ b/packages/playwright/src/PlaywrightWorld.ts @@ -171,12 +171,23 @@ export class PlaywrightWorld extends QuickPickleWorld { return filepath.replace(/\/\/+/g, '/').replace(/\/[\.~]+\//g, '/') } + get screenshotDir() { + return this.sanitizeFilepath(`${this.projectRoot}/${this.worldConfig.screenshotDir}`) + } + get screenshotPath() { - return this.sanitizeFilepath(`${this.worldConfig.screenshotDir}/${this.toString().replace(/^.+?Feature: /, 'Feature: ').replace(' ' + this.info.step, '')}.png`) + return this.sanitizeFilepath(`${this.projectRoot}/${this.worldConfig.screenshotDir}/${this.toString().replace(/^.+?Feature: /, 'Feature: ').replace(' ' + this.info.step, '')}.png`) } + get screenshotFilename() { + return `${this.toString().replace(/^.+?Feature: /, 'Feature: ').replace(' ' + this.info.step, '')}.png` + } + + /** + * @deprecated Use `screenshotPath` instead + */ get fullScreenshotPath() { - return this.sanitizeFilepath(`${this.projectRoot}/${this.screenshotPath}`) + return this.screenshotPath } /** @@ -326,7 +337,7 @@ export class PlaywrightWorld extends QuickPickleWorld { locator?:Locator }) { let explodedTags = this.info.explodedIdx ? `_(${this.info.tags.join(',')})` : '' - let path = opts?.name ? this.sanitizeFilepath(`${this.projectRoot}/${this.worldConfig.screenshotDir}/${opts.name}${explodedTags}.png`) : this.fullScreenshotPath + let path = opts?.name ? this.sanitizeFilepath(`${this.screenshotDir}/${opts.name}${explodedTags}.png`) : this.screenshotPath let locator = opts?.locator ?? this.page return await locator.screenshot({ path, ...this.worldConfig.screenshotOpts }) } diff --git a/packages/playwright/src/outcomes.steps.ts b/packages/playwright/src/outcomes.steps.ts index 58ed017..e51ae07 100644 --- a/packages/playwright/src/outcomes.steps.ts +++ b/packages/playwright/src/outcomes.steps.ts @@ -194,7 +194,7 @@ Then('(the )screenshot should match', async function (world:PlaywrightWorld) { }) Then('(the )screenshot {string} should match', async function (world:PlaywrightWorld, name:string) { let explodedTags = world.info.explodedIdx ? `_(${world.info.tags.join(',')})` : '' - await expect(world.page).toMatchScreenshot(`${world.worldConfig.screenshotDir}/${name}${explodedTags}.png`, world.worldConfig.screenshotOptions) + await expect(world.page).toMatchScreenshot(`${world.screenshotDir}/${name}${explodedTags}.png`, world.worldConfig.screenshotOptions) }) Then('(the )screenshot of the {string} {word} should match', async function (world:PlaywrightWorld, identifier, role) { let locator = await world.getLocator(world.page, identifier, role) @@ -203,7 +203,7 @@ Then('(the )screenshot of the {string} {word} should match', async function (wor Then('(the )screenshot {string} of the {string} {word} should match', async function (world:PlaywrightWorld, name, identifier, role) { let locator = await world.getLocator(world.page, identifier, role) let explodedTags = world.info.explodedIdx ? `_(${world.info.tags.join(',')})` : '' - await expect(locator).toMatchScreenshot(`${world.worldConfig.screenshotDir}/${name}${explodedTags}.png`, world.worldConfig.screenshotOptions) + await expect(locator).toMatchScreenshot(`${world.screenshotDir}/${name}${explodedTags}.png`, world.worldConfig.screenshotOptions) }) // Browser context diff --git a/packages/playwright/tests/playwright-actions-html.feature b/packages/playwright/tests/playwright-actions-html.feature index 14e5823..9827db8 100644 --- a/packages/playwright/tests/playwright-actions-html.feature +++ b/packages/playwright/tests/playwright-actions-html.feature @@ -170,16 +170,15 @@ Feature: Actions step definitions on a static page @todo Scenario: Scrolling a particular div - @skip-ci Rule: Screenshots must be supported Scenario: Taking a default screenshot When I take a screenshot - Then the file "screenshots/Feature: Actions step definitions on a static page_Taking a default screenshot_01.png" should exist--delete it + Then the screenshot "Feature: Actions step definitions on a static page_Taking a default screenshot_01.png" should exist--delete it Scenario: Taking a named screenshot When I take a screenshot named "pickles" - Then the file "screenshots/pickles.png" should exist--delete it + Then the screenshot "pickles.png" should exist--delete it @nojs @js @sequential Scenario: Taking a default screenshot with exploded tags @@ -191,14 +190,13 @@ Feature: Actions step definitions on a static page @sequential Scenario: Cleaning up the screenshots with exploded tags - Then the file "screenshots/Feature: Actions step definitions on a static page_Taking a default screenshot with exploded tags (@concurrent,@skip-ci,@sequential,@js)_01.png" should exist--delete it - And the file "screenshots/Feature: Actions step definitions on a static page_Taking a default screenshot with exploded tags (@concurrent,@skip-ci,@sequential,@nojs)_01.png" should exist--delete it - And the file "screenshots/temp_(@concurrent,@skip-ci,@slowmo,@sequential,@nojs,@webkit,@mobile).png" should exist--delete it - And the file "screenshots/temp_(@concurrent,@skip-ci,@slowmo,@sequential,@nojs,@webkit,@desktop).png" should exist--delete it - And the file "screenshots/temp_(@concurrent,@skip-ci,@slowmo,@sequential,@js,@webkit,@mobile).png" should exist--delete it - And the file "screenshots/temp_(@concurrent,@skip-ci,@slowmo,@sequential,@js,@webkit,@desktop).png" should exist--delete it - - @skip-ci + Then the screenshot "Feature: Actions step definitions on a static page_Taking a default screenshot with exploded tags (@concurrent,@sequential,@js)_01.png" should exist--delete it + And the screenshot "Feature: Actions step definitions on a static page_Taking a default screenshot with exploded tags (@concurrent,@sequential,@nojs)_01.png" should exist--delete it + And the screenshot "temp_(@concurrent,@slowmo,@sequential,@nojs,@webkit,@mobile).png" should exist--delete it + And the screenshot "temp_(@concurrent,@slowmo,@sequential,@nojs,@webkit,@desktop).png" should exist--delete it + And the screenshot "temp_(@concurrent,@slowmo,@sequential,@js,@webkit,@mobile).png" should exist--delete it + And the screenshot "temp_(@concurrent,@slowmo,@sequential,@js,@webkit,@desktop).png" should exist--delete it + Rule: Different browser sizes must be supported Background: load the simple file diff --git a/packages/playwright/tests/playwright.feature b/packages/playwright/tests/playwright.feature index 3bae04b..abfb0ad 100644 --- a/packages/playwright/tests/playwright.feature +++ b/packages/playwright/tests/playwright.feature @@ -38,7 +38,7 @@ Feature: Basic tests of Playwright browser and steps When I load the file "tests/examples/example.html" Then I should see an "h1" element with text "HTML Test Page" - @skip-ci @sequential + @sequential Rule: Visual regression testing must be supported Example: Passing visual regression test @@ -60,13 +60,13 @@ Feature: Basic tests of Playwright browser and steps @fails Example: Failing visual regression test When I load the file "tests/examples/example.html" - Then the file "screenshots/visual-regression-simple-page.png.diff.png" should not exist - And the file "screenshots/visual-regression-simple-page.png.actual.png" should not exist + Then the screenshot "visual-regression-simple-page.png.diff.png" should not exist + And the screenshot "visual-regression-simple-page.png.actual.png" should not exist And the screenshot "visual-regression-simple-page" should match Scenario: Delete the visual regression failure file - Then the file "screenshots/visual-regression-simple-page.png.diff.png" should not exist - And the file "screenshots/visual-regression-simple-page.png.actual.png" should exist--delete it + Then the screenshot "visual-regression-simple-page.png.diff.png" should not exist + And the screenshot "visual-regression-simple-page.png.actual.png" should exist--delete it Rule: Setting screenshot options must be supported @@ -93,24 +93,23 @@ Feature: Basic tests of Playwright browser and steps ``` Then the screenshot should match - @skip-ci Rule: Screenshots should be placed in the proper directory Scenario: Taking a screenshot When I take a screenshot - Then the file "screenshots/Feature: Basic tests of Playwright browser and steps_Taking a screenshot_01.png" should exist--delete it + Then the screenshot "Feature: Basic tests of Playwright browser and steps_Taking a screenshot_01.png" should exist--delete it Scenario: Taking a named screenshot When I take a screenshot named "test" - Then the file "screenshots/test.png" should exist--delete it + Then the screenshot "test.png" should exist--delete it Scenario: Taking a screenshot of an element Given I load the file "tests/examples/example.html" When I take a screenshot of the "Image" link - Then the file "screenshots/Feature: Basic tests of Playwright browser and steps_Taking a screenshot of an element_02.png" should exist--delete it + Then the screenshot "Feature: Basic tests of Playwright browser and steps_Taking a screenshot of an element_02.png" should exist--delete it Scenario: Taking a named screenshot of an element Given I load the file "tests/examples/example.html" When I take a screenshot of the "XKCD Comic" img named "test2" - Then the file "screenshots/test2.png" should exist--delete it + Then the screenshot "test2.png" should exist--delete it diff --git a/packages/playwright/tests/playwright.steps.ts b/packages/playwright/tests/playwright.steps.ts index e935176..d99cbae 100644 --- a/packages/playwright/tests/playwright.steps.ts +++ b/packages/playwright/tests/playwright.steps.ts @@ -3,9 +3,6 @@ import type { PlaywrightWorld, PlaywrightWorldConfig, PlaywrightWorldConfigSetti import yaml from 'js-yaml' import { expect } from '@playwright/test' -import path from 'node:path' -import url from 'node:url' -export const projectRoot = path.resolve(path.dirname(url.fileURLToPath(import.meta.url)), '..') import fs from 'fs' Given('the following world config:', async (world:PlaywrightWorld, rawConf:DocString|DataTable) => { @@ -23,13 +20,13 @@ Given('the following world config:', async (world:PlaywrightWorld, rawConf:DocSt console.log('world config', world.worldConfig) }) -// Filesystem -Then('the file {string} should exist(--delete it)', async function (world:PlaywrightWorld, filepath:string) { - let fullpath = world.sanitizeFilepath(`${projectRoot}/${filepath}`) +// Screenshots +Then('the screenshot {string} should exist(--delete it)', async function (world:PlaywrightWorld, filepath:string) { + let fullpath = world.sanitizeFilepath(`${world.screenshotDir}/${filepath}`) await expect(fs.existsSync(fullpath)).toBeTruthy(); if (world.info.step?.match(/--delete it$/)) fs.unlinkSync(fullpath) }) -Then('the file {string} should not exist', async function (world:PlaywrightWorld, filepath:string) { - let fullpath = world.sanitizeFilepath(`${projectRoot}/${filepath}`) +Then('the screenshot {string} should not exist', async function (world:PlaywrightWorld, filepath:string) { + let fullpath = world.sanitizeFilepath(`${world.screenshotDir}/${filepath}`) await expect(fs.existsSync(fullpath)).toBeFalsy(); }) diff --git a/vitest.workspace.ts b/vitest.workspace.ts index 7beaabe..23aade2 100644 --- a/vitest.workspace.ts +++ b/vitest.workspace.ts @@ -37,7 +37,6 @@ export default defineWorkspace([ quickpickle: { skipTags: ['@skip','@wip','@skip-ci'], worldConfig: { - screenshotDir: 'packages/playwright/screenshots', } } }