@opice/harness 0.0.3 → 0.1.0

package/src/accessible.ts

@@ -0,0 +1,38 @@
+import type { Locator, Page } from 'playwright'
+import { getPage } from './context.js'
+
+/** The ARIA role union accepted by Playwright's `getByRole`. */
+type Role = Parameters<Page['getByRole']>[0]
+
+/**
+ * Accessible-name selectors — `byRole` / `byLabel` / `byText`.
+ *
+ * opice prefers `data-testid` (see `el`), but real apps often can't be
+ * annotated — third-party UIs, generated form-field ids, components you don't
+ * own. These map straight onto Playwright's accessibility-aware locators, which
+ * compute the real ARIA accessible name and fire real user gestures. No
+ * in-page resolver, no stamping — the previous engine (agent-browser) was
+ * CSS-only and couldn't do this, which is a large part of why opice moved to
+ * Playwright.
+ *
+ * All three return a `Locator`, so the full Locator API and `expect(locator)`
+ * assertions apply.
+ */
+
+/**
+ * Find an element by ARIA role and (optionally) its accessible name.
+ * `name` does a substring, case-insensitive match by default.
+ */
+export function byRole(role: Role, name?: string): Locator {
+	return getPage().getByRole(role, name == null ? undefined : { name })
+}
+
+/** Find a form control by its associated `<label>` (or `aria-label`) text. */
+export function byLabel(text: string): Locator {
+	return getPage().getByLabel(text)
+}
+
+/** Find an element by its visible text (substring, case-insensitive). */
+export function byText(text: string): Locator {
+	return getPage().getByText(text)
+}

package/src/command.ts

@@ -0,0 +1,134 @@
+import { existsSync } from 'node:fs'
+import path from 'node:path'
+import { pathToFileURL } from 'node:url'
+import type { Locator, Page } from 'playwright'
+import { z } from 'zod'
+import { getPage } from './context.js'
+import { locatorOn } from './element.js'
+
+/**
+ * The shared command registry.
+ *
+ * A command is a named, schema-validated browser verb implemented once over a
+ * Playwright page. The same command object is used on both faces:
+ *
+ * - **authoring** — the `opice-browser` daemon loads it and exposes it to the
+ *   agent (`opice-browser <name> …`),
+ * - **tests** — the harness loads the same module so a test can call the verb
+ *   directly.
+ *
+ * Built-in verbs (open/click/fill/byRole/…) ship with the `opice-browser`
+ * daemon; user-land verbs live in a repo's `browser-tools.ts` and are picked up
+ * by `loadUserCommands`. Both are the *same* `Command` objects — that is the
+ * unification that closes the authoring↔test vocabulary gap.
+ */
+
+/** Page + accessibility-aware helpers handed to every command implementation. */
+export interface CommandCtx {
+	page: Page
+	/** Resolve a test-id (bare word) or raw CSS selector to a locator. */
+	el(selectorOrTestId: string): Locator
+	byRole(role: Parameters<Page['getByRole']>[0], name?: string): Locator
+	byLabel(text: string): Locator
+	byText(text: string): Locator
+}
+
+export interface Command<S extends z.ZodType = z.ZodType> {
+	name: string
+	/** One-line description, surfaced in `opice-browser commands`. */
+	description?: string
+	params: S
+	run: (ctx: CommandCtx, args: z.infer<S>) => Promise<unknown>
+}
+
+/** Define a browser command. See `CommandCtx` for what `ctx` provides. */
+export function command<S extends z.ZodType>(
+	name: string,
+	params: S,
+	run: (ctx: CommandCtx, args: z.infer<S>) => Promise<unknown>,
+	description?: string,
+): Command<S> {
+	return { name, params, run, description }
+}
+
+/** Build the command context bound to a specific page. */
+export function makeCtx(page: Page): CommandCtx {
+	return {
+		page,
+		el: (sel) => locatorOn(page, sel),
+		byRole: (role, name) => page.getByRole(role, name == null ? undefined : { name }),
+		byLabel: (text) => page.getByLabel(text),
+		byText: (text) => page.getByText(text),
+	}
+}
+
+/** Validate args against a command's schema and run it on `page`. */
+export async function runCommand(page: Page, cmd: Command, rawArgs: unknown): Promise<unknown> {
+	const args = cmd.params.parse(rawArgs)
+	return cmd.run(makeCtx(page), args)
+}
+
+/**
+ * Invoke a command against the active scenario page from inside a test. Pair
+ * with a direct import of the verb from `browser-tools.ts` so the args are
+ * type-checked against its schema:
+ *
+ * ```ts
+ * import { call } from '@opice/harness'
+ * import { fullEnum } from '../browser-tools'
+ * await call(fullEnum, { label: 'Typ', option: 'Faktura' })
+ * ```
+ */
+export async function call<S extends z.ZodType>(cmd: Command<S>, args: z.infer<S>): Promise<unknown> {
+	return runCommand(getPage(), cmd, args)
+}
+
+/** Duck-type check: is a module export a `Command`? */
+function isCommand(value: unknown): value is Command {
+	return (
+		typeof value === 'object'
+		&& value !== null
+		&& typeof (value as Command).name === 'string'
+		&& typeof (value as Command).run === 'function'
+		&& 'params' in value
+	)
+}
+
+/**
+ * Locate a repo's `browser-tools.ts` (or `.js`/`.mjs`), walking up from `from`.
+ * Returns the absolute path, or null if none is found before the filesystem
+ * root or a `package.json` boundary without one above it.
+ */
+export function findUserCommandsFile(from: string = process.cwd()): string | null {
+	let dir = path.resolve(from)
+	for (;;) {
+		for (const name of ['browser-tools.ts', 'browser-tools.js', 'browser-tools.mjs']) {
+			const candidate = path.join(dir, name)
+			if (existsSync(candidate)) return candidate
+		}
+		const parent = path.dirname(dir)
+		if (parent === dir) return null
+		dir = parent
+	}
+}
+
+/**
+ * Load user-land commands from a repo's `browser-tools.ts`. Returns a map keyed
+ * by command name (empty if the file is absent). Throws on a duplicate name.
+ */
+export async function loadUserCommands(from?: string): Promise<Map<string, Command>> {
+	const registry = new Map<string, Command>()
+	const file = findUserCommandsFile(from)
+	if (!file) return registry
+	const mod = (await import(pathToFileURL(file).href)) as Record<string, unknown>
+	for (const value of Object.values(mod)) {
+		if (!isCommand(value)) continue
+		if (registry.has(value.name)) {
+			throw new Error(`browser-tools.ts: duplicate command name "${value.name}" (${file})`)
+		}
+		registry.set(value.name, value)
+	}
+	return registry
+}
+
+export { z }

package/src/context.ts

@@ -0,0 +1,55 @@
+import { chromium, type Browser, type BrowserContext, type Page } from 'playwright'
+
+/**
+ * The live Playwright page for the running scenario. `browserTest` launches a
+ * fresh browser + context + page per scenario (`beforeAll`) and tears it down
+ * (`afterAll`); the DSL — `el`, `byRole`, navigation — reads the current page
+ * from here. This module replaces the old agent-browser CLI session handling:
+ * there is no shell-out and no daemon, the browser runs in-process under
+ * `bun test`.
+ */
+
+let browser: Browser | null = null
+let context: BrowserContext | null = null
+let page: Page | null = null
+
+/** Headed mode for local debugging (`OPICE_HEADED=1` or Playwright's `PWDEBUG`). */
+function headed(): boolean {
+	return !!(process.env['OPICE_HEADED'] || process.env['PWDEBUG'])
+}
+
+/** The active page, or throw if called outside a `browserTest` scenario. */
+export function getPage(): Page {
+	if (!page) {
+		throw new Error('opice: no active page — call DSL helpers inside a browserTest scenario.')
+	}
+	return page
+}
+
+/** The active browser context (for cookies/storage, new tabs, etc.). */
+export function getContext(): BrowserContext {
+	if (!context) {
+		throw new Error('opice: no active browser context — call inside a browserTest scenario.')
+	}
+	return context
+}
+
+/** Launch a fresh isolated browser + context + page. Called from `beforeAll`. */
+export async function launchPage(): Promise<Page> {
+	browser = await chromium.launch({ headless: !headed() })
+	context = await browser.newContext()
+	page = await context.newPage()
+	return page
+}
+
+/** Close the page, context, and browser. Called from `afterAll`. */
+export async function closePage(): Promise<void> {
+	try {
+		await context?.close()
+	} finally {
+		await browser?.close()
+		page = null
+		context = null
+		browser = null
+	}
+}

package/src/element.ts

@@ -1,116 +1,91 @@
-import { exec, q } from './agent-browser.js'
+import type { Locator, Page } from 'playwright'
+import { getPage } from './context.js'
 
 const POLL_INTERVAL = 200
 const POLL_TIMEOUT = 10_000
-const ACTION_SETTLE_MS = 500
 
 /**
- * Auto-wrap bare identifiers as `[data-testid="…"]` selectors; treat anything
- * with CSS-flavoured characters as a raw selector. Heuristic — if you need a
- * plain-tag selector (e.g. `h1`), give it some structure (e.g. `main h1`) or
- * use a descendant/attribute form.
+ * Resolve a selector into a `Locator` on an explicit page — the shared core
+ * behind `el()` and the command-registry context. Bare identifiers become
+ * test-ids (`getByTestId`, matching `data-testid`); anything with CSS-flavoured
+ * characters (`[ ] . # : > ` or a space) is a raw CSS selector.
  */
-function resolveSelector(selectorOrTestId: string): string {
+export function locatorOn(page: Page, selectorOrTestId: string): Locator {
 	if (/[\[\].#:> ]/.test(selectorOrTestId)) {
-		return selectorOrTestId
+		return page.locator(selectorOrTestId)
 	}
-	return `[data-testid="${selectorOrTestId}"]`
+	return page.getByTestId(selectorOrTestId)
 }
 
 /**
- * Poll a condition until it returns true or timeout.
- * Use instead of fixed sleep — stable on both fast local and slow CI.
+ * Resolve a selector into a Playwright `Locator`.
+ *
+ * Bare identifiers are auto-wrapped as test-ids (`page.getByTestId`, which
+ * matches `data-testid` by default); anything with CSS-flavoured characters
+ * (`[ ] . # : > ` or a space) is treated as a raw CSS selector. Heuristic — if
+ * you need a plain-tag selector (e.g. `h1`), give it structure (`main h1`).
+ *
+ * The returned value is a real Playwright `Locator`, so the full Locator API
+ * (`.click()`, `.fill()`, `.textContent()`, `.first()`, `.nth()`, …) and the
+ * web-first `expect(locator)` assertions are available. All actions auto-wait
+ * for actionability and fire real user gestures.
  */
-export function waitFor(
-	condition: () => boolean,
+export function el(selectorOrTestId: string): Locator {
+	return locatorOn(getPage(), selectorOrTestId)
+}
+
+/**
+ * Build a `[data-testid="..."]` selector string, for composing into a larger
+ * CSS selector: `el(`${tid('row')} button`)`. For a plain test-id, prefer
+ * `el('row')` directly.
+ */
+export function tid(testId: string): string {
+	return `[data-testid="${testId}"]`
+}
+
+/**
+ * Poll a (possibly async) condition until it returns true or times out.
+ *
+ * Prefer Playwright's retrying assertions — `await expect(el('x')).toBeVisible()`,
+ * `.toHaveText(...)` — which auto-wait and give better failure messages. Keep
+ * `waitFor` for arbitrary predicates that don't map to a locator assertion.
+ */
+export async function waitFor(
+	condition: () => boolean | Promise<boolean>,
 	{ timeout = POLL_TIMEOUT, interval = POLL_INTERVAL, message }: { timeout?: number; interval?: number; message?: string } = {},
-): void {
+): Promise<void> {
 	const start = Date.now()
 	while (Date.now() - start < timeout) {
 		try {
-			if (condition()) return
+			if (await condition()) return
 		} catch {
 			// condition threw — treat as not yet ready
 		}
-		Bun.sleepSync(interval)
+		await new Promise((resolve) => setTimeout(resolve, interval))
 	}
-	if (!condition()) {
+	if (!(await condition())) {
 		const elapsed = Date.now() - start
 		const hint = message ?? condition.toString().slice(0, 120)
 		throw new Error(`waitFor timed out after ${elapsed}ms: ${hint}`)
 	}
 }
 
-export interface ElementHandle {
-	readonly exists: boolean
-	readonly text: string
-	readonly value: string
-	readonly isDisabled: boolean
-	attr(name: string): string
-	count(): number
-	click(): void
-	fill(value: string): void
-	select(optionText: string): void
-}
-
-export function el(selector: string): ElementHandle {
-	const sel = resolveSelector(selector)
-	const quoted = q(sel)
-	return {
-		get exists(): boolean {
-			return parseInt(exec(`agent-browser get count ${quoted}`), 10) > 0
-		},
-		get text(): string {
-			return exec(`agent-browser get text ${quoted}`)
-		},
-		get value(): string {
-			return exec(`agent-browser get value ${quoted}`)
-		},
-		get isDisabled(): boolean {
-			return exec(`agent-browser is enabled ${quoted}`) !== 'true'
-		},
-		attr(name: string): string {
-			return exec(`agent-browser get attr ${name} ${quoted}`)
-		},
-		count(): number {
-			return parseInt(exec(`agent-browser get count ${quoted}`), 10) || 0
-		},
-		click(): void {
-			exec(`agent-browser scrollintoview ${quoted}`)
-			exec(`agent-browser click ${quoted}`)
-			Bun.sleepSync(ACTION_SETTLE_MS)
-		},
-		fill(value: string): void {
-			exec(`agent-browser scrollintoview ${quoted}`)
-			exec(`agent-browser fill ${quoted} ${q(value)}`)
-			Bun.sleepSync(ACTION_SETTLE_MS)
-		},
-		select(optionText: string): void {
-			exec(`agent-browser scrollintoview ${quoted}`)
-			exec(`agent-browser select ${quoted} ${q(optionText)}`)
-			Bun.sleepSync(ACTION_SETTLE_MS)
-		},
-	}
+/** Fixed sleep. Avoid when possible — prefer `waitFor` or retrying assertions. */
+export async function wait(ms: number): Promise<void> {
+	await new Promise((resolve) => setTimeout(resolve, ms))
 }
 
 /**
- * Build a `[data-testid="..."]` selector for compound selectors.
- * Usage: el(`${tid('parent')} button`)
+ * Evaluate JavaScript in the page and return its result. Thin wrapper over
+ * `page.evaluate`; the value is the real JS value (not a JSON string).
  */
-export function tid(testId: string): string {
-	return `[data-testid="${testId}"]`
-}
-
-export function wait(ms: number): void {
-	Bun.sleepSync(ms)
-}
-
-export function evalJs(js: string): string {
-	return exec(`agent-browser eval ${q(js)}`)
+export function evalJs<T = unknown>(js: string): Promise<T> {
+	return getPage().evaluate(js) as Promise<T>
 }
 
-export function screenshot(path?: string): string {
+/** Capture a screenshot to `path` (or a temp file) and return the path. */
+export async function screenshot(path?: string): Promise<string> {
 	const target = path ?? `/tmp/opice-screenshot-${Date.now()}.png`
-	exec(`agent-browser screenshot ${target}`)
+	await getPage().screenshot({ path: target })
 	return target
 }

package/src/index.ts

@@ -1,5 +1,10 @@
 export { el, tid, waitFor, wait, evalJs, screenshot } from './element.js'
-export type { ElementHandle } from './element.js'
+
+export { byLabel, byRole, byText } from './accessible.js'
+
+export { back, currentPath, currentUrl, forward, open, reload } from './navigation.js'
+
+export { getPage, getContext } from './context.js'
 
 export { browserTest, step } from './scenario.js'
 export type { BrowserTestOptions } from './scenario.js'
@@ -9,3 +14,13 @@ export type { Reporter, ReporterConfig, StepEvent, ScenarioStart, ScenarioFinish
 
 export { parseOpiceDsn } from './dsn.js'
 export type { OpiceDsn } from './dsn.js'
+
+export { command, call, runCommand, makeCtx, loadUserCommands, findUserCommandsFile, z } from './command.js'
+export type { Command, CommandCtx } from './command.js'
+
+// Playwright's web-first `expect` (retrying locator matchers + generic matchers)
+// works under `bun:test`; re-export it so tests use a single `expect`.
+export { expect } from '@playwright/test'
+
+// The DSL returns Playwright Locators directly — re-export the type.
+export type { Locator } from 'playwright'

package/src/navigation.ts

@@ -0,0 +1,41 @@
+import { getPage } from './context.js'
+
+/**
+ * Page navigation primitives. `browserTest` opens the scenario URL for you in
+ * `beforeAll`; these are for mid-scenario navigation — following a hard link,
+ * reloading after mutating storage/cookies, or going back/forward.
+ *
+ * Each navigating call waits for the `load` event (Playwright's default), so
+ * the old agent-browser reload caveat (a reload from inside `eval` getting
+ * dropped) no longer applies — `reload()` drives the page directly.
+ */
+
+/** Navigate to a URL in the current page. */
+export async function open(url: string): Promise<void> {
+	await getPage().goto(url)
+}
+
+/** Reload the current page. */
+export async function reload(): Promise<void> {
+	await getPage().reload()
+}
+
+/** Go back in history. */
+export async function back(): Promise<void> {
+	await getPage().goBack()
+}
+
+/** Go forward in history. */
+export async function forward(): Promise<void> {
+	await getPage().goForward()
+}
+
+/** The current full URL (`location.href`). */
+export function currentUrl(): string {
+	return getPage().url()
+}
+
+/** The current path (`location.pathname`). */
+export function currentPath(): string {
+	return new URL(getPage().url()).pathname
+}

package/src/reporter.ts

@@ -26,10 +26,14 @@ export interface ReporterConfig {
 	apiKey: string
 	branch?: string
 	commit?: string
+	/** 'ci' for runs from automation, 'local' for opted-in dev runs. */
+	source?: 'ci' | 'local'
 }
 
 export interface StepEvent {
 	scenarioId: string
+	/** Authoring order within the scenario, assigned at step() call time. */
+	sequence: number
 	name: string
 	status: 'passed' | 'failed'
 	durationMs: number
@@ -96,6 +100,7 @@ class HttpReporter implements Reporter {
 		const response = await this.fetch('POST', '/api/v1/runs', {
 			branch: this.config.branch,
 			commit: this.config.commit,
+			source: this.config.source,
 		})
 		const runId = response['runId'] as string
 		// Synchronous write so the CLI can pick this up even if the test
@@ -136,6 +141,7 @@ class HttpReporter implements Reporter {
 			? await this.encodeScreenshot(event.screenshotPath)
 			: undefined
 		await this.fetch('POST', `/api/v1/runs/${runId}/scenarios/${event.scenarioId}/steps`, {
+			sequence: event.sequence,
 			name: event.name,
 			status: event.status,
 			durationMs: event.durationMs,
@@ -240,12 +246,24 @@ export function configureFromEnv(env: NodeJS.ProcessEnv = process.env): Reporter
 	if (!endpoint || !projectId || !apiKey) {
 		return new NoopReporter()
 	}
+	// Reporting is opt-in outside CI. A local `bun test` while authoring would
+	// otherwise stream half-finished runs onto the shared dashboard (they never
+	// get the CLI's POST /finish, so they'd sit there as "running" forever).
+	// CI reports automatically; OPICE_REPORT=always forces it locally, =never
+	// silences it everywhere.
+	const isCI = !!(env['CI'] || env['GITHUB_ACTIONS'])
+	const mode = (env['OPICE_REPORT'] ?? 'auto').toLowerCase()
+	const shouldReport = mode === 'never' ? false : mode === 'always' ? true : isCI
+	if (!shouldReport) {
+		return new NoopReporter()
+	}
 	const reporter = new HttpReporter({
 		endpoint,
 		projectId,
 		apiKey,
 		branch: env['OPICE_BRANCH'] ?? env['GITHUB_REF_NAME'],
 		commit: env['OPICE_COMMIT'] ?? env['GITHUB_SHA'],
+		source: isCI ? 'ci' : 'local',
 	})
 	setReporter(reporter)
 	return reporter

package/src/scenario.ts

@@ -1,10 +1,21 @@
-import { describe, beforeAll, afterAll } from 'bun:test'
-import crypto from 'node:crypto'
+import { createRequire } from 'node:module'
 import path from 'node:path'
-import { exec, setSession } from './agent-browser.js'
-import { waitFor, screenshot } from './element.js'
+import { closePage, launchPage } from './context.js'
+import { screenshot } from './element.js'
 import { getReporter } from './reporter.js'
 
+/**
+ * `bun:test` is resolved lazily, at the moment `browserTest` registers a
+ * scenario — never at module load. That keeps `@opice/harness` importable
+ * under plain Node (the `opice-browser` authoring daemon imports the command
+ * registry from this package and runs on Node, where `bun:test` doesn't
+ * exist). Tests still register synchronously: `require` is sync under Bun.
+ */
+const require = createRequire(import.meta.url)
+function bunTest(): typeof import('bun:test') {
+	return require('bun:test') as typeof import('bun:test')
+}
+
 const PLAYGROUND_URL = process.env['PLAYGROUND_URL'] ?? 'http://localhost:15180'
 
 export interface BrowserTestOptions {
@@ -51,50 +62,49 @@ function defaultScenarioFile(testFile: string | undefined): string | undefined {
 let currentScenarioId: string | null = null
 let currentScenarioStart: number = 0
 let currentScenarioFailures = 0
+// Monotonic per-scenario step counter. Assigned synchronously at each step()
+// call so order reflects authoring order — step records are POSTed
+// fire-and-forget and would otherwise be sequenced by arrival order at the
+// worker, which screenshot-encoding latency can reshuffle.
+let currentScenarioStepSeq = 0
 
 /**
  * Register a top-level browser test scenario.
  *
- * Each `browserTest(name, fn)` opens its own agent-browser session, navigates
- * to the playground URL, runs the given `fn` (which typically contains nested
- * `describe`/`test` blocks), and closes the session in `afterAll`.
+ * Each `browserTest(name, fn)` launches its own isolated Playwright browser +
+ * context + page, navigates to the playground URL, runs the given `fn` (which
+ * typically contains nested `describe`/`test` blocks), and tears the browser
+ * down in `afterAll`.
  */
 export function browserTest(name: string, fn: () => void, options: BrowserTestOptions | string = {}): void {
 	const opts: BrowserTestOptions = typeof options === 'string' ? { hash: options } : options
 	const reporter = getReporter()
 	const testFile = captureTestFile()
 	const scenarioFile = opts.scenarioFile ?? defaultScenarioFile(testFile)
+	const { describe, beforeAll, afterAll } = bunTest()
 
 	describe(name, () => {
 		beforeAll(async () => {
-			const session = `opice-${crypto.randomUUID().slice(0, 8)}`
-			setSession(session)
 			currentScenarioStart = Date.now()
 			currentScenarioFailures = 0
+			currentScenarioStepSeq = 0
 			try {
 				currentScenarioId = await reporter.startScenario({ name, hash: opts.hash, testFile, scenarioFile })
 			} catch {
 				currentScenarioId = null
 			}
+			const page = await launchPage()
 			const base = opts.url ?? PLAYGROUND_URL
 			const url = opts.hash ? `${base}#${opts.hash}` : base
-			exec(`agent-browser open ${url}`)
-			waitFor(() => {
-				try {
-					return exec('agent-browser get title').length > 0
-				} catch {
-					return false
-				}
-			}, { timeout: 15_000 })
+			await page.goto(url)
 		}, 30_000)
 
 		afterAll(async () => {
 			try {
-				exec('agent-browser close')
+				await closePage()
 			} catch {
 				// ignore close errors
 			}
-			setSession(null)
 			if (currentScenarioId) {
 				// Drain pending step records (incl. their screenshot uploads)
 				// before marking the scenario done. step() fires recordStep
@@ -123,14 +133,19 @@ export function browserTest(name: string, fn: () => void, options: BrowserTestOp
 /**
  * A reportable step inside a scenario. Captures duration + screenshot on
  * finish, forwards to the active reporter (no-op unless configured via env).
+ *
+ * The body may be sync or async; `step` always returns a promise, so call it
+ * with `await step('…', async () => { … })`.
  */
-export function step(name: string, fn: () => void): void {
+export async function step(name: string, fn: () => void | Promise<void>): Promise<void> {
 	const reporter = getReporter()
+	// Capture order at call time, before the fire-and-forget record below.
+	const sequence = currentScenarioStepSeq++
 	const start = Date.now()
 	let status: 'passed' | 'failed' = 'passed'
 	let error: string | undefined
 	try {
-		fn()
+		await fn()
 	} catch (e) {
 		status = 'failed'
 		error = e instanceof Error ? e.message : String(e)
@@ -140,13 +155,14 @@ export function step(name: string, fn: () => void): void {
 		const durationMs = Date.now() - start
 		let screenshotPath: string | undefined
 		try {
-			screenshotPath = screenshot()
+			screenshotPath = await screenshot()
 		} catch {
 			// screenshot failure shouldn't fail the test
 		}
 		if (currentScenarioId) {
 			void reporter.recordStep({
 				scenarioId: currentScenarioId,
+				sequence,
 				name,
 				status,
 				durationMs,