@quickpickle/vitest-browser 0.0.2

package/src/VitestBrowserWorld.ts

@@ -0,0 +1,205 @@
+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';
+
+/// <reference types="@vitest/browser/providers/playwright" />
+
+export type VitestWorldConfig = {
+  componentDir?:        string;
+  screenshotDir?:       string;
+  screenshotOptions?:   Partial<ScreenshotOptions>;
+}
+
+export const defaultVitestWorldConfig:VitestWorldConfig = {
+  componentDir: '',               // directory in which components are kept, relative to project root
+  screenshotDir: 'screenshots',   // directory in which to save screenshots, relative to project root (default: "screenshots")
+  screenshotOptions: {},          // options for the default screenshot comparisons
+}
+
+export type VitestBrowserWorldInterface = QuickPickleWorldInterface & {
+  render: (name:string|any, props?:any, renderOptions?:any)=>Promise<void>;
+  renderFn: (component:any, props?:any, renderOptions?:any)=>void|Promise<void>;
+  cleanup: ()=>Promise<void>;
+  cleanupFn: ()=>void|Promise<void>;
+  page: BrowserPage;
+  userEvent: UserEvent
+}
+
+export class VitestBrowserWorld extends QuickPickleWorld implements VitestBrowserWorldInterface {
+
+  renderFn: (component:any, props:any, renderOptions:any)=>void;
+  cleanupFn: ()=>void;
+  page!: BrowserPage;
+  userEvent!: UserEvent;
+
+  constructor(context:TestContext, info:InfoConstructor) {
+    info = defaultsDeep(info || {}, { config: { worldConfig: defaultVitestWorldConfig } } )
+    super(context, info);
+    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.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()
+  }
+
+  sanitizeFilepath(filepath:string) {
+    return filepath.replace(/\/\/+/g, '/').replace(/\/[\.~]+\//g, '/')
+  }
+
+  get screenshotDir() {
+    return this.sanitizeFilepath(`${this.projectRoot}/${this.worldConfig.screenshotDir}`)
+  }
+
+  get screenshotFilename() {
+    return `${this.toString().replace(/^.+?Feature: /, '').replace(' ' + this.info.step, '')}.png`
+  }
+
+
+  /**
+    * Gets a locator based on a certain logic
+    * @example getLocator(page, 'Cancel', 'button') => page.getByRole('button', { name: 'Cancel' })
+    * @example getLocator(page, 'Search', 'input') => page.getByLabel('Search').or(page.getByPlaceholder('Search'))
+    * @example getLocator(page, 'ul.fourteen-points li', 'element', 'Open covenants of peace') => page.locator('ul.fourteen-points li').filter({ hasText: 'Open covenants of peace' })
+    *
+    * @param el The locator or page inside which to get a new locator
+    * @param identifier The value, label, placeholder, or css selector, depending on role
+    * @param role An ARIA role, "input", or "element"
+    * @param text Optional text to match inside the locator
+    * @returns Promise<void>
+    */
+  getLocator(el:Locator|BrowserPage, identifier:string, role:string|'element'|'input', text:string|null=null) {
+    let locator:Locator
+    if (role === 'element') throw new Error('Using "element" for CSS selectors is not yet supported; use an aria role or "input" instead.')
+    else if (role === 'input') locator = el.getByLabelText(identifier).or(el.getByPlaceholder(identifier))
+    else locator = el.getByRole(role as any, { name: identifier })
+    if (text && role !== 'input') return locator.filter({ hasText: text })
+    return locator
+  }
+
+  /**
+    * Sets a value on a form element based on its type (select, checkbox/radio, or other input)
+    * @example setValue(locator, "Option 1, Option 2") => Selects multiple options in a select element
+    * @example setValue(locator, "true") => Checks a checkbox/radio button
+    * @example setValue(locator, "false") => Unchecks a checkbox/radio button
+    * @example setValue(locator, "Some text") => Fills a text input with "Some text"
+    *
+    * @param locator The Playwright locator for the form element
+    * @param value The value to set - can be string or other value type
+    * @returns Promise<void>
+    */
+  async setValue(locator:Locator, value:string|any) {
+    let el = await locator.element()
+    let tag = el.tagName.toLowerCase()
+    if (!tag) throw new Error(`Could not find element with locator: ${locator.toString()}`)
+    if (tag === 'select') {
+      let values = value.split(/\s*(?<!\\),\s*/).map((v:string) => v.replace(/\\,/g, ','))
+      await locator.selectOptions(values)
+    }
+    else if (isCheckboxOrRadio(el)) {
+      let check = !( ['false','no','unchecked','','null','undefined','0'].includes(value.toString().toLowerCase()) )
+      if (check) el.checked = true
+      else el.checked = false
+    }
+    else {
+      await locator.fill(value)
+    }
+  }
+
+  /**
+    * Scrolls the mouse wheel in a specified direction by a given number of pixels
+    * @example scroll("down", 100) => Scrolls down 100 pixels
+    * @example scroll("up", 50) => Scrolls up 50 pixels
+    * @example scroll("left", 200) => Scrolls left 200 pixels
+    * @example scroll("right") => Scrolls right using default 100 pixels
+    *
+    * @param direction The direction to scroll: "up", "down", "left", or "right"
+    * @param px The number of pixels to scroll (defaults to 100)
+    * @returns Promise<void>
+    */
+  async scroll(locator:Locator, direction:"up"|"down"|"left"|"right", px = 100) {
+    let horiz = direction.includes('t')
+    let el = await locator.element()
+    if (horiz) await el.scrollBy(direction === 'right' ? px : -px, 0)
+    else await el.scrollBy(0, direction === 'down' ? px : -px)
+  }
+
+  /**
+    * A helper function for parsing text on a page or in an element.
+    * Can be used to check for the presence OR absence of visible OR hidden text.
+    * Examples:
+    * @example expectText(locator, 'text', true, true) // expect that a locator with the text is visible (and there may be hidden ones)
+    * @example expectText(locator, 'text', false, true) // expect that NO locator with the text is visible (but there may be hidden ones)
+    * @example expectText(locator, 'text', true, false) // expect that a HIDDEN locator with the text IS FOUND on the page (but there may be visible ones)
+    * @example expectText(locator, 'text', false, false) // expect that NO hidden locator with the text is found on the page (but there may be visible ones)
+    *
+    * @param locator the locator to check
+    * @param text the text to be found
+    * @param toBePresent whether a locator with the text should be present
+    * @param toBeVisible whether the locator with the text should be visible
+    * @returns void
+    */
+  async expectText(locator:Locator|BrowserPage, text:string, toBePresent:boolean=true, toBeVisible:boolean=true) {
+    try {
+      await this.expectElement(locator.getByText(text), toBePresent, toBeVisible)
+    }
+    catch(e) {
+      let message = `The${toBeVisible ? '' : ' hidden'} text "${text}" was unexpectedly ${toBePresent ? 'not present' : 'present'}.`
+      throw new Error(message)
+    }
+  }
+
+  /**
+    * A helper function for parsing elements on a page or in an element.
+    * Can be used to check for the presence OR absence of visible OR hidden elements.
+    * Examples:
+    * @example expectElement(locator, true) // expect that an element is visible (and there may be hidden ones)
+    * @example expectElement(locator, false) // expect that NO element is visible (but there may be hidden ones)
+    * @example expectElement(locator, true, false) // expect that a HIDDEN element IS FOUND on the page (but there may be visible ones)
+    * @example expectElement(locator, false, false) // expect that NO hidden element is found on the page (but there may be visible ones)
+    *
+    * @param locator the locator to check
+    * @param toBePresent whether an element should be present
+    * @param toBeVisible whether the element should be visible
+    */
+  async expectElement(locator:Locator, toBePresent:boolean=true, toBeVisible:boolean=true) {
+    let allElements = await locator.elements()
+    let matchingElements = allElements.filter(el => toBeVisible === el.checkVisibility({ opacityProperty:true, visibilityProperty:true }))
+    if (toBePresent === (matchingElements.length === 0)) throw new Error(`The${toBeVisible ? '' : ' hidden'} element "${locator}" was unexpectedly ${toBePresent ? 'not present' : 'present'}.`)
+  }
+
+  /**
+   * Waits for a certain amount of time
+   * @param ms number
+   */
+  async waitForTimeout(ms:number) {
+    await new Promise(r => setTimeout(r, ms))
+  }
+
+}
+
+function isCheckboxOrRadio(el:any):el is HTMLInputElement {
+  return el.type === 'checkbox' || el.type === 'radio'
+}
+
+Before(async (world:VitestBrowserWorld) => {
+  await world.cleanup()
+})

package/src/actions.steps.ts

@@ -0,0 +1,169 @@
+import { Given, When, Then, DataTable } from "quickpickle";
+import { type VitestBrowserWorld } from "./VitestBrowserWorld";
+import { expect } from 'vitest';
+
+/// <reference types="@vitest/browser/providers/playwright" />
+
+/**
+ * RENDERING COMPONENTS
+ */
+
+Given('I render (the ){string}( component)', async(world:VitestBrowserWorld, name:string) => {
+  await world.render(name);
+})
+
+Given('I render (the ){string}( component) with the following props/properties:', async(world:VitestBrowserWorld, name:string, props:DataTable) => {
+  let propsObj = props.raw().reduce((acc:{[key:string]:any}, row:string[]) => {
+    let value
+    try {
+      value = JSON.parse(row[1])
+    } catch (e) {
+      value = row[1]
+    }
+    acc[row[0]] = value
+    return acc
+  }, {})
+  await world.render(name, propsObj);
+})
+
+
+// ================
+// Interaction
+
+When('I click/press/tap/touch (on ){string}', async function (world:VitestBrowserWorld, identifier) {
+  let locator = world.page.getByText(identifier, { exact:true })
+  await locator.click({ timeout:world.worldConfig.stepTimeout })
+})
+When('I click/press/tap/touch (on )the {string} {word}', async function (world:VitestBrowserWorld, identifier, role) {
+  let locator = world.getLocator(world.page, identifier, role)
+  await locator.click({ timeout:world.worldConfig.stepTimeout })
+})
+
+When('I focus/select/activate (on ){string}', async function (world:VitestBrowserWorld, identifier) {
+  let locator = world.page.getByText(identifier, { exact:true });
+  (locator.element() as HTMLElement)?.focus()
+  await expect(locator).toHaveFocus()
+})
+When('I focus/select/activate (on )the {string} {word}', async function (world:VitestBrowserWorld, identifier, role) {
+  let locator = world.getLocator(world.page, identifier, role);
+  (locator.element() as HTMLElement).focus()
+  await expect(locator).toHaveFocus()
+})
+
+// ================
+// Typing
+
+When("for/in/on (the ){string} I type {string}", async function (world: VitestBrowserWorld, identifier: string, value: string) {
+  const locator = world.getLocator(world.page, identifier, 'input');
+  const element = locator.element() as HTMLElement;
+  element.focus();
+  await world.userEvent.keyboard(value);
+})
+When("for/in/on (the ){string} {word} I type {string}", async function (world: VitestBrowserWorld, identifier: string, role: string, value: string) {
+  const locator = world.getLocator(world.page, identifier, role);
+  const element = locator.element() as HTMLElement;
+  element.focus();
+  await world.userEvent.keyboard(value);
+})
+
+When('I type the following keys: {}', async function (world: VitestBrowserWorld, keys: string) {
+  for (let key of keys.split(' ')) {
+    if (key !== '{{' && key !== '[[' && !key.match(/^[\{\[].+[\}\]]$/)) key = `{${key}}`
+    await world.userEvent.keyboard(key);
+  }
+})
+When("for/in/on (the ){string} I type the following keys: {}", async function (world:VitestBrowserWorld, identifier: string, keys: string) {
+  const locator = world.getLocator(world.page, identifier, 'input');
+  const element = locator.element() as HTMLElement;
+  element.focus();
+  for (let key of keys.split(' ')) {
+    if (key !== '{{' && key !== '[[' && !key.match(/^[\{\[].+[\}\]]$/)) key = `{${key}}`
+    await world.userEvent.keyboard(key);
+  }
+})
+When("for/in/on (the ){string} {word} I type the following keys: {}", async function (world:VitestBrowserWorld, identifier: string, role: string, keys: string) {
+  const locator = world.getLocator(world.page, identifier, role);
+  const element = locator.element() as HTMLElement;
+  element.focus();
+  for (let key of keys.split(' ')) {
+    if (key !== '{{' && key !== '[[' && !key.match(/^[\{\[].+[\}\]]$/)) key = `{${key}}`
+    await world.userEvent.keyboard(key);
+  }
+})
+
+// ================
+// Forms
+
+When("for/in/on (the ){string} I enter/fill/select (in ){string}", async function (world:VitestBrowserWorld, identifier, value) {
+  let locator = world.getLocator(world.page, identifier, 'input')
+  await world.setValue(locator, value)
+})
+When("for/in/on (the ){string} {word} I enter/fill/select (in ){string}", async function (world:VitestBrowserWorld, identifier, role, value) {
+  let locator = world.getLocator(world.page, identifier, role)
+  await world.setValue(locator, value)
+})
+When("for/in/on (the ){string} I enter/fill/select (in )the following( text):", async function (world:VitestBrowserWorld, identifier, value) {
+  let locator = world.getLocator(world.page, identifier, 'input')
+  await world.setValue(locator, value.toString())
+})
+When("for/in/on (the ){string} {word} I enter/fill/select (in )the following( text):", async function (world:VitestBrowserWorld, identifier, role, value) {
+  let locator = world.getLocator(world.page, identifier, role)
+  await world.setValue(locator, value.toString())
+})
+When('I enter/fill (in )the following( fields):', async function (world:VitestBrowserWorld, table:DataTable) {
+  let rows = table.raw()
+  let hasRole = rows[0].length === 3
+  for (let row of table.raw()) {
+    let [identifier, role, value] = row
+    if (!hasRole) {
+      value = role
+      role = 'input'
+    }
+    let locator = world.getLocator(world.page, identifier, role)
+    await world.setValue(locator, value)
+  }
+})
+
+When('I check (the ){string}( radio)( checkbox)( box)', async function (world:VitestBrowserWorld, indentifier) {
+  let locator = world.getLocator(world.page, indentifier, 'input')
+  await world.setValue(locator, 'on')
+})
+When('I uncheck (the ){string}( checkbox)( box)', async function (world:VitestBrowserWorld, indentifier) {
+  let locator = world.getLocator(world.page, indentifier, 'input')
+  await world.setValue(locator, 'off')
+})
+
+// ================
+// Waiting
+
+// When('I wait for {string} to be attached/detatched/visible/hidden', async function (world:VitestBrowserWorld, text) {
+//   let state = world.info.step?.match(/(attached|detatched|visible|hidden)$/)![0] as 'attached'|'detached'|'visible'|'hidden'
+//   let locator = world.page.getByText(text)
+//   await locator.waitFor({ state, timeout:world.worldConfig.stepTimeout })
+// })
+// When('I wait for a/an/the {string} {word} to be attached/detatched/visible/hidden', async function (world:VitestBrowserWorld, identifier, role) {
+//   let state = world.info.step?.match(/(attached|detatched|visible|hidden)$/)![0] as 'attached'|'detached'|'visible'|'hidden'
+//   let locator = world.getLocator(world.page, identifier, role)
+//   await locator.waitFor({ state, timeout:world.worldConfig.stepTimeout })
+// })
+
+When('I wait (for ){int}ms', async function (world:VitestBrowserWorld, num) {
+  await world.waitForTimeout(num)
+})
+When('I wait (for ){float} second(s)', async function (world:VitestBrowserWorld, num) {
+  await world.waitForTimeout(num * 1000)
+})
+
+// ================
+// Scrolling
+
+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'
+  await world.scroll(locator, direction)
+})
+When('I scroll (the ){string} {word} down/up/left/right {int}(px)( pixels)', async function (world:VitestBrowserWorld, identifier, role, num) {
+  let locator = world.getLocator(world.page, identifier, role)
+  let direction = world.info.step?.match(/(down|up|left|right)(?= \d)/)![0] as 'down'|'up'|'left'|'right'
+  await world.scroll(locator, direction, num)
+})

package/src/frameworks/ReactBrowserWorld.ts

@@ -0,0 +1,41 @@
+import { VitestBrowserWorld } from "../VitestBrowserWorld";
+import { render, cleanup } from 'vitest-browser-react'
+import type { TestContext } from "vitest";
+import type { InfoConstructor } from "quickpickle/dist/world";
+import React from 'react';
+
+export class ReactBrowserWorld extends VitestBrowserWorld {
+
+  renderFn = render
+  cleanupFn = cleanup
+
+  constructor(context:TestContext, info:InfoConstructor) {
+    super(context, info)
+  }
+
+    // override VitestBrowserWorld.render
+  async render(name: string | any, props?: any, renderOptions?: any) {
+    let Component: any;
+
+    if (typeof name === 'string') {
+      // dynamic import returns the module object
+      const mod = await import(
+        `${this.projectRoot}/${this.worldConfig.componentDir}/${name}`.replace(/\/+/g,'/')
+        /* @vite-ignore */
+      );
+      // try .default first, then fall back to any other export
+      Component = mod.default ?? Object.values(mod)[0];
+      if (!Component) {
+        throw new Error(
+          `Could not find a React component export in module "${name}".`
+        );
+      }
+    } else {
+      Component = name;
+    }
+
+    // now call reactRender with the actual component
+    await this.renderFn(React.createElement(Component, props), renderOptions);
+  }
+
+}

package/src/frameworks/SvelteBrowserWorld.ts

@@ -0,0 +1,15 @@
+import { VitestBrowserWorld } from "../VitestBrowserWorld";
+import { render, cleanup } from 'vitest-browser-svelte';
+import type { TestContext } from "vitest";
+import { InfoConstructor } from "quickpickle/dist/world";
+
+export class SvelteBrowserWorld extends VitestBrowserWorld {
+
+  renderFn = render
+  cleanupFn = cleanup
+
+  constructor(context:TestContext, info:InfoConstructor) {
+    super(context, info)
+  }
+
+}

package/src/frameworks/VueBrowserWorld.ts

@@ -0,0 +1,23 @@
+import { VitestBrowserWorld } from "../VitestBrowserWorld";
+import { render, cleanup } from 'vitest-browser-vue'
+import type { TestContext } from "vitest";
+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) {
+    let mod = typeof name === 'string'
+      ? await import(`${this.projectRoot}/${this.worldConfig.componentDir}/${name}`.replace(/\/+/g, '/') /* @vite-ignore */ )
+      : name;
+    let component = mod.default ?? mod;
+    await this.renderFn(component, { props, ...renderOptions })
+  };
+
+}

package/src/frameworks/react.ts

@@ -0,0 +1,4 @@
+import { setWorldConstructor } from "quickpickle";
+import { ReactBrowserWorld } from "./ReactBrowserWorld";
+
+setWorldConstructor(ReactBrowserWorld);

package/src/frameworks/svelte.ts

@@ -0,0 +1,4 @@
+import { setWorldConstructor } from "quickpickle";
+import { SvelteBrowserWorld } from "./SvelteBrowserWorld";
+
+setWorldConstructor(SvelteBrowserWorld);

package/src/frameworks/vue.ts

@@ -0,0 +1,4 @@
+import { setWorldConstructor } from "quickpickle";
+import { VueBrowserWorld } from "./VueBrowserWorld";
+
+setWorldConstructor(VueBrowserWorld);

package/src/outcomes.steps.ts

@@ -0,0 +1,190 @@
+import { Then } from "quickpickle";
+import type { VitestBrowserWorld } from "./VitestBrowserWorld";
+import { expect } from 'vitest'
+
+/// <reference types="@vitest/browser/providers/playwright" />
+
+// ================
+// Text on page
+
+Then('I should see {string}( on the page)', async function (world:VitestBrowserWorld, text) {
+  await world.expectText(world.page, text)
+})
+Then('I should not/NOT see {string}( on the page)', async function (world:VitestBrowserWorld, text) {
+  await world.expectText(world.page, text, false)
+})
+Then('the text {string} should be visible( on the page)', async function (world:VitestBrowserWorld, text) {
+  await world.expectText(world.page, text)
+})
+Then('the text {string} should not/NOT be visible( on the page)', async function (world:VitestBrowserWorld, text) {
+  await world.expectText(world.page, text, false)
+})
+
+// ================
+// Elements on page
+Then('I should see a/an/the {string} {word}', async function (world:VitestBrowserWorld, identifier, role) {
+  let locator = await world.getLocator(world.page, identifier, role)
+  await world.expectElement(locator)
+})
+Then('I should not/NOT see a/an/the {string} {word}', async function (world:VitestBrowserWorld, identifier, role) {
+  let locator = await world.getLocator(world.page, identifier, role)
+  await world.expectElement(locator, false)
+})
+Then('I should see a/an/the {string} (element )with (the )(text ){string}', async function (world:VitestBrowserWorld, identifier, text) {
+  let locator = await world.getLocator(world.page, identifier, 'element', text)
+  await world.expectElement(locator)
+})
+Then('I should not/NOT see a/an/the {string} (element )with (the )(text ){string}', async function (world:VitestBrowserWorld, identifier, text) {
+  let locator = await world.getLocator(world.page, identifier, 'element', text)
+  await world.expectElement(locator, false)
+})
+
+// ================
+// Element state
+Then('a/an/the {string} {word} should be visible/hidden/invisible', async function (world:VitestBrowserWorld, identifier, role) {
+  let state = world.info.step?.match(/(\w+)$/)![0]
+  let locator = world.getLocator(world.page, identifier, role)
+  await world.expectElement(locator, true, state === 'visible')
+})
+Then('a/an/the {string} (element )with (the )(text ){string} should be visible/hidden/invisible', async function (world:VitestBrowserWorld, identifier, text) {
+  let state = world.info.step?.match(/(\w+)$/)![0]
+  let locator = world.getLocator(world.page, identifier, 'element', text)
+  await world.expectElement(locator, true, state === 'visible')
+})
+// Then('a/an/the {string} {word} should be attached/detatched', async function (world:VitestBrowserWorld, identifier, role) {
+//   let state = world.info.step?.match(/(\w)$/)![0] as 'attached'|'detached'
+//   let locator = world.getLocator(world.page, identifier, role)
+//   await locator.waitFor({ state, timeout:world.worldConfig.stepTimeout })
+// })
+// Then('a/an/the {string} (element )with (the )(text ){string} should be attached/detatched', async function (world:VitestBrowserWorld, identifier, text) {
+//   let state = world.info.step?.match(/(\w)$/)![0] as 'attached'|'detached'
+//   let locator = world.getLocator(world.page, identifier, 'element', text)
+//   await locator.waitFor({ state, timeout:world.worldConfig.stepTimeout })
+// })
+
+// disabled / enabled
+Then('a/an/the {string} {word} should be disabled', async function (world:VitestBrowserWorld, identifier, role) {
+  let locator = await world.getLocator(world.page, identifier, role)
+  await expect(locator).toBeDisabled()
+})
+Then('a/an/the {string} {word} should be enabled', async function (world:VitestBrowserWorld, identifier, role) {
+  let locator = await world.getLocator(world.page, identifier, role)
+  await expect(locator).toBeEnabled()
+})
+Then('a/an/the {string} (element )with (the )(text ){string} should be disabled', async function (world:VitestBrowserWorld, identifier, text) {
+  let locator = await world.getLocator(world.page, identifier, 'element', text)
+  await expect(locator).toBeDisabled()
+})
+Then('a/an/the {string} (element )with (the )(text ){string} should be enabled', async function (world:VitestBrowserWorld, identifier, text) {
+  let locator = await world.getLocator(world.page, identifier, 'element', text)
+  await expect(locator).toBeEnabled()
+})
+
+// checked / unchecked
+Then('a/an/the {string} {word} should be checked', async function (world:VitestBrowserWorld, identifier, role) {
+  let locator = await world.getLocator(world.page, identifier, role)
+  await expect(locator).toBeChecked()
+})
+Then('a/an/the {string} {word} should be unchecked', async function (world:VitestBrowserWorld, identifier, role) {
+  let locator = await world.getLocator(world.page, identifier, role)
+  await expect(locator).not.toBeChecked()
+})
+Then('a/an/the {string} (element )with (the )(text ){string} should be checked', async function (world:VitestBrowserWorld, identifier, text) {
+  let locator = await world.getLocator(world.page, identifier, 'element', text)
+  await expect(locator).toBeChecked()
+})
+Then('a/an/the {string} (element )with (the )(text ){string} should be unchecked', async function (world:VitestBrowserWorld, identifier, text) {
+  let locator = await world.getLocator(world.page, identifier, 'element', text)
+  await expect(locator).not.toBeChecked()
+})
+
+// focused / unfocused
+Then('a/an/the {string} {word} should be focused/active', async function (world:VitestBrowserWorld, identifier, role) {
+  let locator = await world.getLocator(world.page, identifier, role)
+  await expect(locator).toHaveFocus()
+})
+Then('a/an/the {string} {word} should be unfocused/blurred', async function (world:VitestBrowserWorld, identifier, role) {
+  let locator = await world.getLocator(world.page, identifier, role)
+  await expect(locator).not.toHaveFocus()
+})
+Then('a/an/the {string} (element )with (the )(text ){string} should be focused/active', async function (world:VitestBrowserWorld, identifier, text) {
+  let locator = await world.getLocator(world.page, identifier, 'element', text)
+  await expect(locator).toHaveFocus()
+})
+Then('a/an/the {string} (element )with (the )(text ){string} should be unfocused/blurred', async function (world:VitestBrowserWorld, identifier, text) {
+  let locator = await world.getLocator(world.page, identifier, 'element', text)
+  await expect(locator).not.toHaveFocus()
+})
+
+// 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
+  let locator = await world.getLocator(world.page, identifier, 'input')
+  if (exact) await expect(locator).toHaveValue(expected)
+  else {
+    let actual = (await locator.element() as HTMLInputElement)?.value ?? ''
+    await expect(actual).toContain(expected)
+  }
+})
+Then('a/an/the (value of )(the ){string} {word} should contain/include/be/equal {string}', async function (world:VitestBrowserWorld, identifier, role, expected) {
+  let exact = world.info.step?.match(/ should (?:be|equal) ['"]/) ? true : false
+  let locator = await world.getLocator(world.page, identifier, role)
+  if (exact) await expect(locator).toHaveValue(expected)
+  else {
+    let actual = (await locator.element() as HTMLInputElement)?.value ?? ''
+    await expect(actual).toContain(expected)
+  }
+})
+
+Then('a/an/the (value of )(the ){string} should not/NOT contain/include/be/equal {string}', async function (world:VitestBrowserWorld, identifier, expected) {
+  let exact = world.info.step?.match(/ should (?:not|NOT) (?:be|equal) ['"]/) ? true : false
+  let locator = await world.getLocator(world.page, identifier, 'input')
+  if (exact) await expect(locator).not.toHaveValue(expected)
+  else {
+    let actual = (await locator.element() as HTMLInputElement)?.value ?? ''
+    await expect(actual).not.toContain(expected)
+  }
+})
+Then('a/an/the (value of )(the ){string} {word} should not/NOT contain/include/be/equal {string}', async function (world:VitestBrowserWorld, identifier, role, expected) {
+  let exact = world.info.step?.match(/ should (?:not|NOT) (?:be|equal) ['"]/) ? true : false
+  let locator = await world.getLocator(world.page, identifier, role)
+  if (exact) await expect(locator).not.toHaveValue(expected)
+  else {
+    let actual = (await locator.element() as HTMLInputElement)?.value ?? ''
+    await expect(actual).not.toContain(expected)
+  }
+})
+
+// Visual regression testing
+Then('(the )screenshot/snapshot should match', async function (world:VitestBrowserWorld) {
+  await expect(world.page).toMatchImageSnapshot({
+    ...world.worldConfig.screenshotOptions,
+    customSnapshotsDir: world.screenshotDir,
+    customSnapshotIdentifier: world.screenshotFilename,
+  })
+})
+Then('(the )screenshot/snapshot {string} should match', async function (world:VitestBrowserWorld, name:string) {
+  let explodedTags = world.info.explodedIdx ? `_(${world.info.tags.join(',')})` : ''
+  await expect(world.page).toMatchImageSnapshot({
+    ...world.worldConfig.screenshotOptions,
+    customSnapshotsDir: world.screenshotDir,
+    customSnapshotIdentifier: `${name}${explodedTags}`,
+  })
+})
+Then('(the )screenshot/snapshot of the {string} {word} should match', async function (world:VitestBrowserWorld, identifier, role) {
+  let locator = await world.getLocator(world.page, identifier, role)
+  await expect(locator).toMatchImageSnapshot({
+    ...world.worldConfig.screenshotOptions,
+    customSnapshotsDir: world.screenshotDir,
+    customSnapshotIdentifier: world.screenshotFilename,
+  })
+})
+Then('(the )screenshot/snapshot {string} of the {string} {word} should match', async function (world:VitestBrowserWorld, name, identifier, role) {
+  let locator = await world.getLocator(world.page, identifier, role)
+  let explodedTags = world.info.explodedIdx ? `_(${world.info.tags.join(',')})` : ''
+  await expect(locator).toMatchImageSnapshot({
+    ...world.worldConfig.screenshotOptions,
+    customSnapshotsDir: world.screenshotDir,
+    customSnapshotIdentifier: `${name}${explodedTags}`,
+  })
+})