@quickpickle/vitest-browser 0.0.3 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quickpickle/vitest-browser",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Support files for running Gherkin/Cucumber tests in Vitest Browser mode, for testing components.",
   "keywords": [
     "BDD",
@@ -98,7 +98,7 @@
     "vitest-browser-react": "^0.1.1",
     "vitest-browser-svelte": "^0.1.0",
     "vitest-browser-vue": "^0.2.0",
-    "quickpickle": "^1.7.1"
+    "quickpickle": "^1.8.0"
   },
   "scripts": {
     "build": "rollup -c && FORMAT=cjs rollup -c",

package/src/VitestBrowserWorld.ts

@@ -2,7 +2,7 @@ import { Before, QuickPickleWorld, QuickPickleWorldInterface } from 'quickpickle
 import type { BrowserPage, Locator, UserEvent, ScreenshotOptions } from '@vitest/browser/context'
 import { defaultsDeep } from 'lodash-es'
 import type { TestContext } from 'vitest';
-import { InfoConstructor } from 'quickpickle/dist/world';
+import type { InfoConstructor } from 'quickpickle/dist/world';
 
 /// <reference types="@vitest/browser/providers/playwright" />
 
@@ -18,21 +18,48 @@ export const defaultVitestWorldConfig:VitestWorldConfig = {
   screenshotOptions: {},          // options for the default screenshot comparisons
 }
 
+export type ActionsInterface = {
+  clicks: any[];
+  doubleClicks: any[];
+}
+
 export type VitestBrowserWorldInterface = QuickPickleWorldInterface & {
+  /**
+   * The `render` function must be provided by the World Constructor
+   * and must be tailored for the framework being used. It should render
+   * the component, and then use the parent element to set the `page` property
+   * of the World.
+   *
+   * @param name string|any The compoenent to render
+   * @param props any The properties to use when rendering the component
+   * @param renderOptions any Options to pass to the render function
+   * @returns Promise<void>
+   */
   render: (name:string|any, props?:any, renderOptions?:any)=>Promise<void>;
-  renderFn: (component:any, props?:any, renderOptions?:any)=>void|Promise<void>;
+  /**
+   * The `cleanup` function must be provided by the World Constructor
+   * and must be tailored for the framework being used.
+   *
+   * @returns void
+   */
   cleanup: ()=>Promise<void>;
-  cleanupFn: ()=>void|Promise<void>;
-  page: BrowserPage;
-  userEvent: UserEvent
+  actions: ActionsInterface
+  browserPage: BrowserPage;
+  page: Locator;
+  userEvent: UserEvent;
 }
 
 export class VitestBrowserWorld extends QuickPickleWorld implements VitestBrowserWorldInterface {
 
-  renderFn: (component:any, props:any, renderOptions:any)=>void;
-  cleanupFn: ()=>void;
-  page!: BrowserPage;
+  actions:ActionsInterface = {
+    clicks: [],
+    doubleClicks: [],
+  };
+  browserPage!: BrowserPage;
   userEvent!: UserEvent;
+  async render(name:string|any,props?:any,renderOptions?:any){};
+  async cleanup(){};
+  private _page:Locator|null = null;
 
   constructor(context:TestContext, info:InfoConstructor) {
     info = defaultsDeep(info || {}, { config: { worldConfig: defaultVitestWorldConfig } } )
@@ -40,39 +67,45 @@ export class VitestBrowserWorld extends QuickPickleWorld implements VitestBrowse
     if (!info.config.worldConfig.screenshotDir && info.config.worldConfig?.screenshotOptions?.customSnapshotsDir) {
       this.info.config.worldConfig.screenshotDir = info.config.worldConfig.screenshotOptions.customSnapshotsDir
     }
-    this.renderFn = ()=>{};
-    this.cleanupFn = ()=>{};
   }
 
   async init() {
     let browserContext = await import('@vitest/browser/context')
-    this.page = browserContext.page;
+    this.browserPage = browserContext.page;
     this.userEvent = browserContext.userEvent;
   }
 
-  async render(name:string|any, props?:any, renderOptions?:any) {
-    let component = typeof name === 'string'
-      ? await import(`${this.projectRoot}/${this.worldConfig.componentDir}/${name}`.replace(/\/+/g, '/') /* @vite-ignore */ )
-      : name
-    await this.renderFn(component, props, renderOptions)
-  };
-
-  async cleanup() {
-    await this.cleanupFn()
+  get screenshotDir() {
+    return this.sanitizePath(this.worldConfig.screenshotDir)
   }
 
-  sanitizeFilepath(filepath:string) {
-    return filepath.replace(/\/\/+/g, '/').replace(/\/[\.~]+\//g, '/')
+  get screenshotFilename() {
+    return `${this.toString().replace(/^.+?Feature: /, '').replace(' ' + this.info.step, '')}.png`
   }
 
-  get screenshotDir() {
-    return this.sanitizeFilepath(`${this.projectRoot}/${this.worldConfig.screenshotDir}`)
+  async screenshot(options:{name?:string, locator?:Locator} = {}) {
+    let locator = options.locator || this.page
+    let path = options.name
+      ? this.fullPath(`${this.screenshotDir}/${options.name}${(this.info.explodedIdx ? ` (${this.info.tags.join(',')})` : '')}.png`.replace(/\.png\.png$/i, '.png'))
+      : this.fullPath(`${this.screenshotDir}/${this.screenshotFilename}`)
+    await locator.screenshot({ path })
   }
 
-  get screenshotFilename() {
-    return `${this.toString().replace(/^.+?Feature: /, '').replace(' ' + this.info.step, '')}.png`
+  get page():Locator {
+    if (!this._page) throw new Error('You must render a component before running tests.')
+    return this._page
   }
 
+  set page(value:HTMLElement) {
+    while (value.parentNode !== null && value.nodeName !== 'BODY') value = value.parentNode as HTMLBodyElement
+    this._page = this.browserPage.elementLocator(value)
+    value.addEventListener('click', (e)=>{
+      this.actions.clicks.push(e.target)
+    })
+    value.addEventListener('dblclick', (e)=>{
+      this.actions.doubleClicks.push(e.target)
+    })
+  }
 
   /**
     * Gets a locator based on a certain logic
@@ -138,6 +171,7 @@ export class VitestBrowserWorld extends QuickPickleWorld implements VitestBrowse
   async scroll(locator:Locator, direction:"up"|"down"|"left"|"right", px = 100) {
     let horiz = direction.includes('t')
     let el = await locator.element()
+    if (el.nodeName === 'BODY' && el.parentElement) el = el.parentElement
     if (horiz) await el.scrollBy(direction === 'right' ? px : -px, 0)
     else await el.scrollBy(0, direction === 'down' ? px : -px)
   }

package/src/actions.steps.ts

@@ -157,6 +157,14 @@ When('I wait (for ){float} second(s)', async function (world:VitestBrowserWorld,
 // ================
 // Scrolling
 
+When('I scroll down/up/left/right', async function (world:VitestBrowserWorld) {
+  let direction = world.info.step?.match(/(down|up|left|right)$/)![0] as 'down'|'up'|'left'|'right'
+  await world.scroll(world.page, direction)
+})
+When('I scroll down/up/left/right {int}(px)( pixels)', async function (world:VitestBrowserWorld, num) {
+  let direction = world.info.step?.match(/(down|up|left|right)(?= \d)/)![0] as 'down'|'up'|'left'|'right'
+  await world.scroll(world.page, direction, num)
+})
 When('I scroll (the ){string} {word} down/up/left/right', async function (world:VitestBrowserWorld, identifier:string, role:string) {
   let locator = world.getLocator(world.page, identifier, role)
   let direction = world.info.step?.match(/(down|up|left|right)$/)![0] as 'down'|'up'|'left'|'right'
@@ -167,3 +175,21 @@ When('I scroll (the ){string} {word} down/up/left/right {int}(px)( pixels)', asy
   let direction = world.info.step?.match(/(down|up|left|right)(?= \d)/)![0] as 'down'|'up'|'left'|'right'
   await world.scroll(locator, direction, num)
 })
+
+// ================
+// Screenshots
+
+Then('(I )take (a )screenshot', async function (world:VitestBrowserWorld) {
+  await world.screenshot()
+})
+Then('(I )take (a )screenshot named {string}', async function (world:VitestBrowserWorld, name:string) {
+  await world.screenshot({ name })
+})
+Then('(I )take (a )screenshot of the {string} {word}', async function (world:VitestBrowserWorld, identifier:string, role:string) {
+  let locator = world.getLocator(world.page, identifier, role)
+  await world.screenshot({ locator })
+})
+Then('(I )take (a )screenshot of the {string} {word} named {string}', async function (world:VitestBrowserWorld, identifier:string, role:string, name:string) {
+  let locator = world.getLocator(world.page, identifier, role)
+  await world.screenshot({ locator, name })
+})

package/src/frameworks/ReactBrowserWorld.ts

@@ -3,6 +3,17 @@ import { render, cleanup } from 'vitest-browser-react'
 import type { TestContext } from "vitest";
 import type { InfoConstructor } from "quickpickle/dist/world";
 import React from 'react';
+import { defaultsDeep } from 'lodash-es'
+
+export const defaultReactOptions = {
+  /**
+   * The default extension to use when rendering components
+   * (if none is provided in the step)
+   */
+  defaultComponentExtension: 'tsx',
+}
+
+export type ReactWorldConfigSetting = Partial<typeof defaultReactOptions>
 
 export class ReactBrowserWorld extends VitestBrowserWorld {
 
@@ -10,19 +21,18 @@ export class ReactBrowserWorld extends VitestBrowserWorld {
   cleanupFn = cleanup
 
   constructor(context:TestContext, info:InfoConstructor) {
+    info.config.worldConfig = defaultsDeep(info.config.worldConfig, defaultReactOptions)
     super(context, info)
   }
 
-    // override VitestBrowserWorld.render
-  async render(name: string | any, props?: any, renderOptions?: any) {
-    let Component: any;
-
+  async render(name:string|any, props?:any, renderOptions?:any) {
+    let Component:any;
+    // Set the default extension if not provided
+    if (typeof name === 'string' && !name.match(/\.[jt]sx?$/))
+      name += '.' + this.worldConfig.defaultComponentExtension;
     if (typeof name === 'string') {
       // dynamic import returns the module object
-      const mod = await import(
-        `${this.projectRoot}/${this.worldConfig.componentDir}/${name}`.replace(/\/+/g,'/')
-        /* @vite-ignore */
-      );
+      let mod = await import(`${this.fullPath(`${this.worldConfig.componentDir}/${name}`)}` /* @vite-ignore */ )
       // try .default first, then fall back to any other export
       Component = mod.default ?? Object.values(mod)[0];
       if (!Component) {
@@ -35,7 +45,10 @@ export class ReactBrowserWorld extends VitestBrowserWorld {
     }
 
     // now call reactRender with the actual component
-    await this.renderFn(React.createElement(Component, props), renderOptions);
+    let result = await render(React.createElement(Component, props), renderOptions);
+    this.page = result.container;
   }
 
+  async cleanup() { await cleanup(); }
+
 }

package/src/frameworks/SvelteBrowserWorld.ts

@@ -5,11 +5,19 @@ import { InfoConstructor } from "quickpickle/dist/world";
 
 export class SvelteBrowserWorld extends VitestBrowserWorld {
 
-  renderFn = render
-  cleanupFn = cleanup
-
   constructor(context:TestContext, info:InfoConstructor) {
     super(context, info)
   }
 
+  async render(name:string|any, props?:any, renderOptions?:any) {
+    if (typeof name === 'string' && !name.match(/\.svelte$/)) name += '.svelte'
+    let component = typeof name === 'string'
+      ? await import(`${this.fullPath(`${this.worldConfig.componentDir}/${name}`)}` /* @vite-ignore */ )
+      : name
+    let result = await render(component, props, renderOptions)
+    this.page = result.container
+  };
+
+  async cleanup() { await cleanup(); }
+
 }

package/src/frameworks/VueBrowserWorld.ts

@@ -5,19 +5,20 @@ import type { InfoConstructor } from "quickpickle/dist/world";
 
 export class VueBrowserWorld extends VitestBrowserWorld {
 
-  renderFn = render
-  cleanupFn = cleanup
-
   constructor(context:TestContext, info:InfoConstructor) {
     super(context, info)
   }
 
   async render(name:string|any, props?:any, renderOptions?:any) {
+    if (typeof name === 'string' && !name.match(/\.vue$/)) name += '.vue'
     let mod = typeof name === 'string'
-      ? await import(`${this.projectRoot}/${this.worldConfig.componentDir}/${name}`.replace(/\/+/g, '/') /* @vite-ignore */ )
+      ? await import(`${this.fullPath(`${this.worldConfig.componentDir}/${name}`)}` /* @vite-ignore */ )
       : name;
     let component = mod.default ?? mod;
-    await this.renderFn(component, { props, ...renderOptions })
+    let result = await render(component, { props, ...renderOptions })
+    this.page = result.container
   };
 
+  async cleanup() { await cleanup(); }
+
 }

package/src/outcomes.steps.ts

@@ -1,9 +1,33 @@
 import { Then } from "quickpickle";
 import type { VitestBrowserWorld } from "./VitestBrowserWorld";
 import { expect } from 'vitest'
+import { BrowserPage, Locator } from "@vitest/browser/context";
 
 /// <reference types="@vitest/browser/providers/playwright" />
 
+expect.extend({
+  async toBeInTheViewport(locator:Locator) {
+    let frame = await locator.element()
+    while (frame.parentElement && frame.tagName !== 'HTML') {
+      frame = frame.parentElement
+    }
+    const viewport = await frame.getBoundingClientRect();
+    const rect = await locator.element().getBoundingClientRect();
+    if (rect) {
+      const inViewport = (rect.right > 0 && rect.bottom > 0 && rect.top < viewport.height && rect.left < viewport.width);
+      return {
+        message: () => `expected ${locator.toString()} to be in viewport`,
+        pass: inViewport,
+      };
+    } else {
+      return {
+        message: () => `could not get bounding box for ${locator.toString()}`,
+        pass: false,
+      };
+    }
+  }
+})
+
 // ================
 // Text on page
 
@@ -39,6 +63,21 @@ Then('I should not/NOT see a/an/the {string} (element )with (the )(text ){string
   await world.expectElement(locator, false)
 })
 
+// ================
+// Actions
+Then('{string} should have been clicked/doubleclicked/dblclicked', async function (world:VitestBrowserWorld, text) {
+  let single = world.info.step?.match(/ clicked$/)
+  if (single) expect(world.actions.clicks.find((el) => (el && el?.textContent === text))).not.toBeNull()
+  else expect(world.actions.doubleClicks.find((el) => (el && el?.textContent === text))).not.toBeNull()
+})
+
+Then('(the ){string} {word} should have been clicked/doubleclicked/dblclicked', async function (world:VitestBrowserWorld, identifier, role) {
+  let single = world.info.step?.match(/ clicked$/)
+  let element = world.getLocator(world.page, identifier, role)
+  if (single) expect(world.actions.clicks.find((el) => (el === element))).not.toBeNull()
+  else expect(world.actions.doubleClicks.find((el) => (el === element))).not.toBeNull()
+})
+
 // ================
 // Element state
 Then('a/an/the {string} {word} should be visible/hidden/invisible', async function (world:VitestBrowserWorld, identifier, role) {
@@ -116,6 +155,25 @@ Then('a/an/the {string} (element )with (the )(text ){string} should be unfocused
   await expect(locator).not.toHaveFocus()
 })
 
+Then('a/an/the {string} {word} should be in(side) (of )the viewport', async function (world:VitestBrowserWorld, identifier, role) {
+  let locator = await world.getLocator(world.page, identifier, role)
+  // @ts-ignore
+  await expect(locator).toBeInTheViewport()
+})
+Then('a/an/the {string} {word} should be out(side) (of )the viewport', async function (world:VitestBrowserWorld, identifier, role) {
+  let locator = await world.getLocator(world.page, identifier, role)
+  // @ts-ignore
+  expect(locator).not.toBeInTheViewport()
+})
+// Then('a/an/the {string} (element )with (the )(text ){string} should be in(side) (of )the viewport', async function (world:VitestBrowserWorld, identifier, text) {
+//   let locator = await world.getLocator(world.page, identifier, 'element', text)
+//   await isInViewport(world, locator)
+// })
+// Then('a/an/the {string} (element )with (the )(text ){string} should be out(side) (of )the viewport', async function (world:VitestBrowserWorld, identifier, text) {
+//   let locator = await world.getLocator(world.page, identifier, 'element', text)
+//   await isInViewport(world, locator)
+// })
+
 // Values
 Then('a/an/the (value of ){string} should contain/include/be/equal {string}', async function (world:VitestBrowserWorld, identifier, expected) {
   let exact = world.info.step?.match(/ should (?:be|equal) ['"]/) ? true : false
@@ -155,6 +213,23 @@ Then('a/an/the (value of )(the ){string} {word} should not/NOT contain/include/b
   }
 })
 
+Then('a/an/the (value of ){string} should be/equal {int}', async function (world:VitestBrowserWorld, identifier, expected) {
+  let locator = await world.getLocator(world.page, identifier, 'input')
+  await expect(locator).toHaveValue(expected)
+})
+Then('a/an/the (value of )(the ){string} {word} should be/equal {int}', async function (world:VitestBrowserWorld, identifier, role, expected) {
+  let locator = await world.getLocator(world.page, identifier, role)
+  await expect(locator).toHaveValue(expected)
+})
+Then('a/an/the (value of )(the ){string} should not/NOT be/equal {int}', async function (world:VitestBrowserWorld, identifier, expected) {
+  let locator = await world.getLocator(world.page, identifier, 'input')
+  await expect(locator).not.toHaveValue(expected)
+})
+Then('a/an/the (value of )(the ){string} {word} should not/NOT be/equal {int}', async function (world:VitestBrowserWorld, identifier, role, expected) {
+  let locator = await world.getLocator(world.page, identifier, role)
+  await expect(locator).not.toHaveValue(expected)
+})
+
 // Visual regression testing
 Then('(the )screenshot/snapshot should match', async function (world:VitestBrowserWorld) {
   await expect(world.page).toMatchImageSnapshot({

package/tests/generic/browser-actions.feature

@@ -0,0 +1,193 @@
+Feature: Actions step definitions in Vitest Browser
+
+  As a developer or tester
+  I need to be sure that the step definitions work as promised
+
+  Background: Load the example HTML page
+    Given I render the "Example" component
+
+  Rule: Interaction: Clicking must be supported
+
+    Scenario: clicking on exact text
+      When I click on "Text"
+      Then "Text" should have been clicked
+      When I click on "Do CSS transitions affect Playwright awaits?"
+      And I wait for 1000ms
+      Then I should see "AI says:"
+
+    @should-fail
+    Scenario: clicking on inexact text FAILS
+      When I click on "Do CSS transitions"
+
+    @should-fail
+    Scenario: clicking on hidden elements FAILS
+      When I click on "Hidden item"
+
+    @should-fail
+    Scenario: clicking on invisible elements FAILS
+      When I click on "Invisible item"
+
+    @todo
+    Scenario: clicking on elements by css selector
+      When I click the 'a[href="#faq"]' element
+      Then the url should contain "faq"
+
+    Scenario: clicking on elements by role
+      When I click the "Image" link
+      Then the "Image" link should have been clicked
+
+  Rule: Interaction: Focusing must be supported
+
+    Scenario: focusing on exact text
+      When I focus on "Text"
+      Then the "Text" link should be focused
+
+    @should-fail
+    Scenario: focusing on hidden elements fails
+      When I focus on "Do CSS transitions affect Playwright awaits?"
+
+    @should-fail
+    Scenario: focusing on non-selectable elements FAILS
+      When I focus on "Item 1"
+
+    @should-fail
+    Scenario: focusing on inexact text FAILS
+      When I focus on "List"
+
+    @todo
+    Scenario: Focusing on elements by css selector should work
+      When I focus the 'a[href="#faq"]' element
+      Then the "FAQ" link should be focused
+
+    Scenario: Focusing on elements by role should work
+      When I focus the "Image" link
+      Then the "Image" link should be focused
+
+  Rule: Typing must be supported
+
+    Scenario: Typing text into a textbox
+      When for "name" I type "David Hunt"
+      Then the value of "name" should be "David Hunt"
+      When for the "name" textbox I type " Sam Ziegler"
+      Then the value of the "name" textbox should be "David Hunt Sam Ziegler"
+
+    Scenario: Navigating through links
+      When I focus the "Lists" link
+      Then the "Lists" link should be focused
+      When I type the following keys: Tab Tab
+      Then the "Form" link should be focused
+      When I type the following keys: {Shift>} Tab {/Shift}
+      Then the "Table" link should be focused
+
+    Scenario: Navigating through form elements
+      When I activate the "Name" textbox
+      And I type the following keys: Tab Tab
+      Then the "Message" textbox should be focused
+      When I type the following keys: {Shift>} Tab {Shift}
+      Then the "Email" textbox should be focused
+
+  Rule: Form entry must be supported
+
+    @should-fail
+    Scenario: filling a disabled field FAILS
+      When for "From" I enter "anything"
+
+    Scenario: Filling one textbox
+      When for "Name" I fill in "David Hunt"
+      Then the value of "Name" should be "David Hunt"
+      When for "Name" I enter "Sam Ziegler"
+      Then the value of "Name" should be "Sam Ziegler"
+      When for "Name" I enter ""
+      Then the value of "Name" should be ""
+
+    Scenario: Filling a date field
+      When for "Date" I fill in "2024-10-21"
+      Then the value of "Date" should be "2024-10-21"
+
+    Scenario: Filling a number field
+      When for "Number" I enter "9"
+      Then the value of "Number" should be 9
+
+    Scenario: Selecting an option
+      When for "Color" I select "Red"
+      Then the value of "Color" should be "red"
+      When for "Color" I enter "- none -"
+      Then the value of "Color" should be ""
+
+    Scenario: Checking and unchecking a checkbox
+      When I check "I agree"
+      Then the "I agree" checkbox should be checked
+
+    Scenario: Checking a radio button
+      When I check "later"
+      Then the "later" radio should be checked
+      And the "now" radio should be unchecked
+
+    Scenario: Filling a whole form
+      When I fill in the following fields:
+        | Name | David Hunt |
+        | Email | git@github.com |
+        | Message | Hope this works! |
+        | Date | 2024-11-01 |
+        | Number | 493 |
+        | Color: | blue |
+        | later | true |
+        | I agree | no |
+      Then the value of "Name" should be "David Hunt"
+      And the value of "Email" should contain "git"
+      And the value of "Message" should be "Hope this works!"
+      And the value of "Date" should be "2024-11-01"
+      And the value of "Number" should be 493
+      And the value of "Color" should be "blue"
+      And the "later" radio should be checked
+      And the "I agree" checkbox should be unchecked
+
+  Rule: Waiting must be supported
+
+    Scenario: waiting for visible text works ONLY if the animation starts immediately
+      When I click on "Do CSS transitions affect Playwright awaits?"
+      Then I should see "AI says:"
+
+    @fails
+    Scenario: waiting for invisible text DOES NOT WORK
+      When I click on "Do CSS transitions affect Playwright awaits?"
+      Then I should NOT see "AI says:"
+
+  Rule: Scrolling must be supported
+
+    Scenario: Scrolling the full page
+      When I scroll down
+      Then the "HTML Test Page" heading should be outside the viewport
+      When I scroll up
+      Then the "HTML Test Page" heading should be inside the viewport
+
+    @todo
+    Scenario: Scrolling a particular div
+
+  Rule: Screenshots must be supported
+
+    Scenario: Taking a default screenshot
+      When I take a screenshot
+      Then the screenshot "Actions step definitions in Vitest Browser_Taking a default screenshot_01.png" should exist--delete it
+
+    Scenario: Taking a named screenshot
+      When I take a screenshot named "pickles"
+      Then the screenshot "pickles.png" should exist--delete it
+
+    @tag1 @tag2 @sequential
+    Scenario: Taking a default screenshot with exploded tags
+      When I take a screenshot
+
+    @tag1 @tag2 @sequential
+    Scenario: Taking a named screenshot with exploded tags
+      When I take a screenshot named "temp"
+
+    @sequential
+    Scenario: Cleaning up the screenshots with exploded tags
+      Then the screenshot "Actions step definitions in Vitest Browser_Taking a default screenshot with exploded tags (sequential,tag1)_01.png" should exist--delete it
+      And the screenshot "Actions step definitions in Vitest Browser_Taking a default screenshot with exploded tags (sequential,tag2)_01.png" should exist--delete it
+
+    @sequential @skip-ci
+    Scenario: Cleaning up the screenshots with exploded tags
+      And the screenshot "temp (sequential,tag1).png" should exist--delete it
+      And the screenshot "temp (sequential,tag2).png" should exist--delete it

package/tests/generic/browser-generic.feature

@@ -0,0 +1,79 @@
+@todo
+Feature: Basic tests of Vitest Browser Mode and steps
+
+  @skip-ci
+  Rule: Visual regression testing must be supported
+
+    Example: Passing visual regression test
+      When I render the "Example" component
+      Then the screenshot should match
+
+    Example: Passing named visual regression test
+      When I render the "Example" component
+      Then the screenshot "visual-regression-example-page" should match
+
+    Example: Passing visual regression test of an element
+      When I render the "Example" component
+      Then the screenshot of the "XKCD Comic" img should match
+
+    Example: Passing named visual regression test of an element
+      When I render the "Example" component
+      Then the screenshot "visual-regression-faq-section" of the "#faq" element should match
+
+    @fails
+    Example: Failing visual regression test
+      When I render the "Example" component
+      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 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
+
+  @todo
+  Rule: Setting screenshot options must be supported
+
+    Scenario: Setting a screenshot mask
+      Given I render the "Example" component
+      And the following world config:
+        ```yaml
+        screenshotOptions:
+          mask:
+            - form
+        ```
+      Then the screenshot should match
+
+    Scenario: Setting a clip area
+      Given I render the "Example" component
+      And the following world config:
+        ```yaml
+          screenshotOptions:
+            clip:
+              x: 0
+              y: 60
+              width: 300
+              height: 180
+        ```
+      Then the screenshot should match
+
+  Rule: Screenshots should be placed in the proper directory
+
+    Scenario: Taking a screenshot
+      When I take a screenshot
+      Then the screenshot "Feature Basic tests of Vitest Browser Mode 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 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 screenshot "Feature Basic tests of Vitest Browser Mode 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 screenshot "test2.png" should exist--delete it
+