feat(playwright): add screenshots for elements

fix: visual regression screenshots going in the wrong folder

.changeset/fluffy-spies-hang.md

@@ -0,0 +1,5 @@
+---
+"@quickpickle/playwright": patch
+---
+
+added screenshots for elements, and fixed save location for visual regression tests

packages/playwright/src/actions.steps.ts

@@ -172,6 +172,17 @@ Then('(I )take (a )screenshot named {string}', async function (world:PlaywrightW
   let path = sanitizeFilepath(`${projectRoot}/${world.worldConfig.screenshotDir}/${name}${explodedTags}.png`)
   await world.page.screenshot({ path })
 })
+Then('(I )take (a )screenshot of the {string} {word}', async function (world:PlaywrightWorld, identifier:string, role:string) {
+  let locator = await getLocator(world.page, identifier, role)
+  let path = sanitizeFilepath(`${projectRoot}/${defaultScreenshotPath(world)}`)
+  await locator.screenshot({ path })
+})
+Then('(I )take (a )screenshot of the {string} {word} named {string}', async function (world:PlaywrightWorld, identifier:string, role:string, name:string) {
+  let locator = await getLocator(world.page, identifier, role)
+  let explodedTags = world.info.explodedIdx ? `_(${world.info.tags.join(',')})` : ''
+  let path = sanitizeFilepath(`${projectRoot}/${world.worldConfig.screenshotDir}/${name}${explodedTags}.png`)
+  await locator.screenshot({ path })
+})
 
 // ================
 // Browser size

packages/playwright/src/outcomes.steps.ts

@@ -2,7 +2,7 @@ import { Then } from "quickpickle";
 import type { PlaywrightWorld } from "./PlaywrightWorld";
 import { expect, Locator, Page } from '@playwright/test'
 import './snapshotMatcher'
-import { defaultScreenshotPath, getLocator, testMetatag } from "./helpers";
+import { defaultScreenshotPath, getLocator, sanitizeFilepath, testMetatag } from "./helpers";
 
 // ================
 // Text on page
@@ -256,10 +256,20 @@ Then('the meta( )tag {string} should not/NOT contain/include/be/equal {string}',
 
 // Visual regression testing
 Then('(the )screenshot should match', async function (world:PlaywrightWorld) {
-  await expect(world.page).toMatchScreenshot(`${world.worldConfig.screenshotDir}/${defaultScreenshotPath(world)}`)
+  await expect(world.page).toMatchScreenshot(defaultScreenshotPath(world))
 })
 Then('(the )screenshot {string} should match', async function (world:PlaywrightWorld, name:string) {
-  await expect(world.page).toMatchScreenshot(`${world.worldConfig.screenshotDir}/${name}.png`)
+  let explodedTags = world.info.explodedIdx ? `_(${world.info.tags.join(',')})` : ''
+  await expect(world.page).toMatchScreenshot(`${world.worldConfig.screenshotDir}/${name}${explodedTags}.png`)
+})
+Then('(the )screenshot of the {string} {word} should match', async function (world:PlaywrightWorld, identifier, role) {
+  let locator = await getLocator(world.page, identifier, role)
+  await expect(locator).toMatchScreenshot(defaultScreenshotPath(world))
+})
+Then('(the )screenshot {string} of the {string} {word} should match', async function (world:PlaywrightWorld, name, identifier, role) {
+  let locator = await getLocator(world.page, identifier, role)
+  let explodedTags = world.info.explodedIdx ? `_(${world.info.tags.join(',')})` : ''
+  await expect(locator).toMatchScreenshot(`${world.worldConfig.screenshotDir}/${name}${explodedTags}.png`)
 })
 
 // Browser context

packages/playwright/tests/playwright.feature

@@ -46,15 +46,46 @@ Feature: Basic tests of Playwright browser and steps
       Then the screenshot should match
 
     Example: Passing named visual regression test
+      When I load the file "tests/examples/simple.html"
+      Then the screenshot "visual-regression-simple-page" should match
+
+    Example: Passing visual regression test of an element
+      When I load the file "tests/examples/example.html"
+      Then the screenshot of the "XKCD Comic" img should match
+
+    Example: Passing named visual regression test of an element
       When I load the file "tests/examples/example.html"
-      Then the screenshot "playwright-example" should match
+      Then the screenshot "visual-regression-faq-section" of the "#faq" element should match
 
     @fails
     Example: Failing visual regression test
-      When I load the file "tests/examples/simple.html"
-      Then the file "screenshots/playwright-example.png.diff.png" should not exist
-      And the screenshot "playwright-example" should match
+      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
+      And the screenshot "visual-regression-simple-page" should match
 
     Scenario: Delete the visual regression failure file
-      Then the file "screenshots/playwright-example.png.diff.png" should not exist
-      And the file "screenshots/playwright-example.png.actual.png" should exist--delete it
+      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
+
+  @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
+
+    Scenario: Taking a named screenshot
+      When I take a screenshot named "test"
+      Then the file "screenshots/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
+
+    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
+