fix: normalize playwright paths for screenshots to run on CI

.changeset/plenty-shoes-lick.md

@@ -0,0 +1,5 @@
+---
+"@quickpickle/playwright": patch
+---
+
+Fix the screenshot paths so they run on CI

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 })
   }

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

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

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
 

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();
 })

vitest.workspace.ts

@@ -37,7 +37,6 @@ export default defineWorkspace([
     quickpickle: {
       skipTags: ['@skip','@wip','@skip-ci'],
       worldConfig: {
-        screenshotDir: 'packages/playwright/screenshots',
       }
     }
   }