Playwright Labs

A collection of Playwright fixtures, utilities, and best practices for building reliable, maintainable test automation.

Packages

Package	Description	Install
@playwright-labs/decorators	OOP-style decorators for Playwright — @describe, @test, @step, @param, @use.define, @beforeAll, @afterAll, @beforeEach, @afterEach, and more	npm i @playwright-labs/decorators
@playwright-labs/fixture-abort	AbortController & AbortSignal fixtures with custom matchers (toBeAborted, toBeActive, toAbortWithin, etc.)	npm i @playwright-labs/fixture-abort
@playwright-labs/fixture-ajv-ts	Schema validation fixture using ajv-ts with toMatchSchema matcher	npm i @playwright-labs/fixture-ajv-ts ajv-ts
@playwright-labs/fixture-allure	Allure reporting fixture (useAllure), function/method decorators for steps, parameter masking (PARAMETER.MASKED)	npm i @playwright-labs/fixture-allure allure-js-commons
@playwright-labs/fixture-env	Type-safe environment variable management with ajv-ts or zod schema validation	npm i @playwright-labs/fixture-env
@playwright-labs/fixture-faker	Fake data generation fixture using @faker-js/faker with multi-locale support	npm i @playwright-labs/fixture-faker @faker-js/faker
@playwright-labs/fixture-testcontainers	Playwright fixture for Testcontainers — start real Docker containers in tests with automatic cleanup and 13 custom expect matchers	npm i @playwright-labs/fixture-testcontainers testcontainers
@playwright-labs/fixture-timers	Promise-based Node.js timer fixtures (setTimeout, setInterval, setImmediate, scheduler) with timing matchers	npm i @playwright-labs/fixture-timers
@playwright-labs/otel-core	Shared OTel primitives (Counter, Histogram, UpDownCounter, Span) with stdout serialization bridge — used internally by reporter-otel and fixture-otel	npm i @playwright-labs/otel-core
@playwright-labs/reporter-otel	OpenTelemetry reporter — exports test traces and metrics to any OTLP-compatible backend (Jaeger, Grafana Tempo, Prometheus, Datadog)	npm i @playwright-labs/reporter-otel
@playwright-labs/fixture-otel	OTel metric fixtures (useCounter, useHistogram, useUpDownCounter, useSpan), withSpan callback helper, and custom matchers	npm i @playwright-labs/fixture-otel
@playwright-labs/reporter-email	Email reporter for test run notifications via nodemailer (50+ email services supported)	npm i @playwright-labs/reporter-email
@playwright-labs/slack-buildkit	Framework-agnostic Slack Block Kit builder with a custom React JSX runtime — write messages as TSX, render to Block Kit JSON; includes <Table>/<Tr>/<Th>/<Td> for GFM tables	npm i @playwright-labs/slack-buildkit
@playwright-labs/reporter-slack	Slack reporter for Playwright — sends rich Block Kit notifications via Incoming Webhook or Web API; ships BaseTemplate, WithOptionsTemplate, and WithTableTemplate	npm i @playwright-labs/reporter-slack
@playwright-labs/selectors-angular	Angular-aware selector engine (angular= syntax), expect matchers, and $ng fixture for inspecting component inputs, outputs, signals, and directives at runtime	npm i @playwright-labs/selectors-angular
@playwright-labs/selectors-react	React-aware selector engine (react= syntax), expect matchers, and $r fixture for inspecting component props, state (hooks), and context via the fiber tree	npm i @playwright-labs/selectors-react
@playwright-labs/selectors-vue	Vue 3-aware selector engine (vue= syntax), expect matchers, and $v fixture for inspecting component props, Composition API setup state, and Options API data	npm i @playwright-labs/selectors-vue
@playwright-labs/sql-core	Compile-time SQL validator via TypeScript template literal types — sql tag, SqlStatement<P> phantom brand, SQLParams<S> FSM type, SQLite/pg/mysql2 adapters	npm i @playwright-labs/sql-core
@playwright-labs/fixture-sql	Playwright fixture for SQL database testing — auto-open/close connections, sql and useSql fixtures, works with SQLite, PostgreSQL, and MySQL	npm i @playwright-labs/fixture-sql
@playwright-labs/ts-plugin-sql	TypeScript language service plugin for sql tagged templates — table/column autocomplete, structural diagnostics, and hover types from your live DB schema	npm i @playwright-labs/ts-plugin-sql
@playwright-labs/playwright-best-practices	AI-optimized best practices guide — 10+ rules across 8 categories with real-world examples	pnpx add-skill https://github.com/vitalics/playwright-labs/tree/main/packages/playwright-best-practices

Examples

Runnable examples showing each package integrated with real infrastructure.

Example	Packages demonstrated	What it shows
reporter-otel	reporter-otel · fixture-otel	Full OTel stack (OTel Collector → Jaeger + Prometheus + Grafana) — traces per test/step, built-in metrics, custom counters/histograms/spans
reporter-email	reporter-email	Live preview server for all email templates (plain HTML, Tailwind, shadcn/ui, charts)
selectors-angular	selectors-angular	Angular application used to test the angular= selector engine and component inspection
selectors-react	selectors-react	React application used to test the react= selector engine and fiber-tree inspection
selectors-vue	selectors-vue	Vue 3 application used to test the vue= selector engine and Composition API inspection
sql	fixture-sql · ts-plugin-sql	SQLite in-memory tests showing sql tagged templates, join/aggregate queries, and TypeScript plugin schema (inline + schemaFile)

Quick Start

All fixture packages follow the same pattern — import test and expect, or merge with your existing fixtures:

// Use directly
import { test, expect } from "@playwright-labs/fixture-timers";

// Or merge with other fixtures
import { mergeTests, mergeExpects } from "@playwright/test";
import {
  test as timersTest,
  expect as timersExpect,
} from "@playwright-labs/fixture-timers";
import {
  test as abortTest,
  expect as abortExpect,
} from "@playwright-labs/fixture-abort";

export const test = mergeTests(timersTest, abortTest);
export const expect = mergeExpects(timersExpect, abortExpect);

License

MIT