# @serenity-js/playwright > Adapter that integrates @serenity-js/web with Playwright, enabling Serenity/JS reporting and using the Screenplay Pattern to write component and end-to-end test scenarios Latest version **3.48.0** (published 2026-09-15) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @serenity-js/playwright pnpm add @serenity-js/playwright yarn add @serenity-js/playwright bun add @serenity-js/playwright ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 3.48.0 | | Published | 2026-09-15 | | First published | 2022-07-11 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | ^22.22.2 \|\| ^24.15.0 | | Dependencies | 3 | | Unpacked size | 426.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 617 | | Author | Jan Molak | | Maintainers | jan-molak | | Keywords | automation, browser, component, e2e, end-to-end, integration, serenity, serenity-js, screenplay, screenplay-pattern, playwright, angular, react, vue, svelte, tdd, bdd, test, testing | ## Links - npm: https://www.npmjs.com/package/@serenity-js/playwright - Repository: https://github.com/serenity-js/serenity-js - Homepage: https://serenity-js.org - Issues: https://github.com/serenity-js/serenity-js/issues - Funding: https://github.com/sponsors/serenity-js - npm.io page: https://npm.io/package/@serenity-js/playwright ## Dependencies (3) - [tiny-types](https://npm.io/package/tiny-types.md) 2.0.5 - [@serenity-js/web](https://npm.io/package/@serenity-js/web.md) 3.48.0 - [@serenity-js/core](https://npm.io/package/@serenity-js/core.md) 3.48.0 ## Alternatives - [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads - [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads - [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads - [vest](https://npm.io/package/vest.md) — 50.1K weekly downloads - [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads ## Recent versions - 3.48.0 (latest) — 2026-09-15 - 3.47.2 — 2026-09-10 - 3.47.0 — 2026-09-09 - 3.46.1 — 2026-09-04 - 3.46.0 — 2026-08-30 - 3.45.9 — 2026-08-20 - 3.45.8 — 2026-08-20 - 3.45.7 — 2026-08-18 - 3.45.6 — 2026-08-15 - 3.45.5 — 2026-08-14 - 3.45.4 — 2026-08-13 - 3.45.3 — 2026-08-13 - 3.45.2 — 2026-08-13 - 3.45.1 — 2026-08-13 - 3.45.0 — 2026-08-13 - … 158 more at https://npm.io/package/@serenity-js/playwright/versions ## README ## Serenity/JS Playwright [![NPM Version](https://badge.fury.io/js/%40serenity-js%2Fplaywright.svg)](https://badge.fury.io/js/%40serenity-js%2Fplaywright) [![Build Status](https://github.com/serenity-js/serenity-js/actions/workflows/main.yaml/badge.svg?branch=main)](https://github.com/serenity-js/serenity-js/actions) [![Maintainability](https://qlty.sh/gh/serenity-js/projects/serenity-js/maintainability.svg)](https://qlty.sh/gh/serenity-js/projects/serenity-js) [![Code Coverage](https://qlty.sh/gh/serenity-js/projects/serenity-js/coverage.svg)](https://qlty.sh/gh/serenity-js/projects/serenity-js) [![Contributors](https://img.shields.io/github/contributors/serenity-js/serenity-js.svg)](https://github.com/serenity-js/serenity-js/graphs/contributors) [![Known Vulnerabilities](https://snyk.io/test/npm/@serenity-js/playwright/badge.svg)](https://snyk.io/test/npm/@serenity-js/playwright) [![GitHub stars](https://img.shields.io/github/stars/serenity-js/serenity-js?style=flat)](https://github.com/serenity-js/serenity-js) [![Follow Serenity/JS on LinkedIn](https://img.shields.io/badge/Follow-Serenity%2FJS%20-0077B5?logo=linkedin)](https://www.linkedin.com/company/serenity-js) [![Watch Serenity/JS on YouTube](https://img.shields.io/badge/Watch-@serenity--js-E62117?logo=youtube)](https://www.youtube.com/@serenity-js) [![Join Serenity/JS Community Chat](https://img.shields.io/badge/Chat-Serenity%2FJS%20Community-FBD30B?logo=matrix)](https://matrix.to/#/#serenity-js:gitter.im) [![Support Serenity/JS on GitHub](https://img.shields.io/badge/Support-@serenity--js-703EC8?logo=github)](https://github.com/sponsors/serenity-js) [`@serenity-js/playwright`](https://serenity-js.org/api/playwright/) brings full [Serenity reporting](https://serenity-js.org/handbook/reporting/) capabilities to [Playwright](https://playwright.dev/) and enables writing tests using the [Screenplay Pattern](https://serenity-js.org/handbook/design/screenplay-pattern/). ## Features - Integrates Serenity/JS with Playwright providing standardised [Screenplay Web API](https://serenity-js.org/api/web/) - Supports all [Serenity/JS reporting features](https://serenity-js.org/handbook/reporting/) and expands native Playwright Test reports - TypeScript-first design with strong typing for safer and more predictable test code. ## Installation ```bash npm install --save-dev @serenity-js/assertions @serenity-js/console-reporter @serenity-js/core @serenity-js/html-reporter @serenity-js/web @serenity-js/playwright ``` See the [Serenity/JS Installation Guide](https://serenity-js.org/handbook/installation/). ## Quick Start ### Usage with Playwright Test ```ts import { describe, it } from '@serenity-js/playwright-test' import { Navigate, Page } from '@serenity-js/web' import { Ensure, startsWith } from '@serenity-js/assertions' describe('Website', () => { it('should have a title', async ({ actor }) => { await actor.attemptsTo( Navigate.to('https://serenity-js.org/'), Ensure.that(Page.current().title(), startsWith('Serenity/JS')), ) }) }) ``` Explore the in-depth Serenity/JS and Playwright Test integration guide in the [Serenity/JS Handbook](https://serenity-js.org/handbook/test-runners/playwright-test/). ### Usage with Cucumber Follow the [Serenity/JS configuration guide for Cucumber](https://serenity-js.org/handbook/test-runners/cucumber/) and the [Serenity/JS Cucumber and Playwright Project Template](https://github.com/serenity-js/serenity-js-cucumber-playwright-template). ### Usage with Mocha ```typescript import { Ensure, startsWith } from '@serenity-js/assertions' import { actorCalled, Cast, configure, Duration } from '@serenity-js/core' import { BrowseTheWebWithPlaywright } from '@serenity-js/playwright' import { Navigate, Page } from '@serenity-js/web' import { describe, it, beforeAll, afterAll } from 'mocha' import * as playwright from 'playwright' describe('Website', () => { let browser: playwright.Browser beforeAll(async () => { // Start a single browser before all the tests, // Serenity/JS will open new tabs // and manage Playwright browser context as needed browser = await playwright.chromium.launch({ headless: true }) // Configure Serenity/JS providing your Actors // and required "stage crew memebers" (a.k.a. reporting services) configure({ actors: Cast.where(actor => actor.whoCan( BrowseTheWebWithPlaywright.using( browser, { baseURL: `https://serenity-js.org` }, { defaultNavigationTimeout: Duration.ofSeconds(2).inMilliseconds(), defaultTimeout: Duration.ofMilliseconds(750).inMilliseconds(), } ) )), crew: [ [ '@serenity-js/console-reporter', { theme: 'auto' } ], [ '@serenity-js/html-reporter', { outputDirectory: './reports/serenity-js', specDirectory: 'spec', } ], [ '@serenity-js/web:Photographer', { strategy: 'TakePhotosOfFailures', // strategy: 'TakePhotosOfInteractions', } ], ] }) }) it('should have a title', async () => { await actorCalled('William').attemptsTo( Navigate.to('https://serenity-js.org'), Ensure.that(Page.current().title(), startsWith('Serenity/JS')), ) }) afterAll(async () => { // Close the browser after all the tests are finished if (browser) { await browser.close() } }) }) ``` ## Documentation - [API Reference](https://serenity-js.org/api/) - [Screenplay Pattern Guide](https://serenity-js.org/handbook/design/screenplay-pattern/) - [Serenity/JS Project Templates](https://serenity-js.org/handbook/project-templates/) - [More examples and reference implementations](https://github.com/serenity-js/serenity-js/tree/main/examples) - [Tutorial: First Web Scenario](https://serenity-js.org/handbook/tutorials/your-first-web-scenario/) - [Tutorial: First API Scenario](https://serenity-js.org/handbook/tutorials/your-first-api-scenario/) ## Contributing Contributions of all kinds are welcome! Get started with the [Contributing Guide](https://serenity-js.org/community/contributing/). ## Community - [Community Chat](https://matrix.to/#/#serenity-js:gitter.im) - [Discussions Forum](https://github.com/orgs/serenity-js/discussions) - Visit the [💡How to... ?](https://github.com/orgs/serenity-js/discussions/categories/how-to) section for answers to common questions If you enjoy using Serenity/JS, make sure to star ⭐️ [Serenity/JS on GitHub](https://github.com/serenity-js/serenity-js) to help others discover the framework! ## License The Serenity/JS code base is licensed under the [Apache-2.0](https://opensource.org/license/apache-2-0) license, while its documentation and the [Serenity/JS Handbook](https://serenity-js.org/handbook/) are licensed under the [Creative Commons BY-NC-SA 4.0 International](https://creativecommons.org/licenses/by-nc-sa/4.0/). See the [Serenity/JS License](https://serenity-js.org/legal/license/). ## Support Support ongoing development through [GitHub Sponsors](https://github.com/sponsors/serenity-js). Sponsors gain access to [Serenity/JS Playbooks](https://github.com/serenity-js/playbooks) and priority help in the [Discussions Forum](https://github.com/orgs/serenity-js/discussions). For corporate sponsorship or commercial support, please contact [Jan Molak](https://www.linkedin.com/in/janmolak/). [![GitHub Sponsors](https://img.shields.io/badge/Support%20@serenity%2FJS-703EC8?style=for-the-badge&logo=github&logoColor=white)](https://github.com/sponsors/serenity-js) --- _Source: https://npm.io/package/@serenity-js/playwright · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._