Serenity/JS is a TypeScript-native acceptance testing framework that gives an existing Playwright Test, WebdriverIO, or Cucumber suite the Screenplay Pattern's architecture, and it is built for test automation teams whose end-to-end and API suites have outgrown duplicated selectors, unreadable reports, and tool lock-in.

What it is

Serenity/JS is an open-source library published to npm under the Apache-2.0 licence, written in TypeScript and maintained at github.com/serenity-js/serenity-js, with documentation at serenity-js.org. It is not a test runner of its own. It sits alongside the runner a team already uses — Playwright Test, WebdriverIO, or Cucumber — and adds a layer of composable, reusable Tasks, per-actor state, and structured reporting on top of it. The API is split across packages: @serenity-js/core, @serenity-js/playwright-test, @serenity-js/web, and @serenity-js/assertions, among others.

The concrete problem it solves is the entanglement that builds up inside a growing acceptance suite. When the same selectors and multi-step flows get copied across scenarios, and the same business logic is written once for the API and again for the UI, suites become slow and expensive to change. Serenity/JS replaces that duplicated glue with Tasks that separate what a test does from how it does it, so Authenticate, Inventory, and Checkout are defined once and reused across scenarios, test runners, and integration tools. It also replaces reports that only show a pass or fail with reports that show every action, its timing, and screenshots, which is what makes a suite legible to people who did not write it.

Key capabilities

• Composable Screenplay Tasks: the README example uses Authenticate.withCredentials(...), Inventory.productCalled('Sauce Labs Backpack').addToCart(), and Checkout.completeWith({ ... }) as tasks reusable across scenarios and runners.
• Assertions through @serenity-js/assertions, such as Ensure.that(Checkout.confirmationHeading(), equals('Thank you for your order!')).
• Browser interaction through @serenity-js/web, for example Navigate.to('https://www.saucedemo.com/').
• Multi-actor support built in, for scenarios that involve several users interacting at once.
• Structured HTML reports that show every action with timing and screenshots, alongside trends, consistency analysis, and living documentation.
• Blended testing: Screenplay Tasks work across interfaces, so an API can handle setup while the UI is exercised only where it matters.
• Portability across integration tools and test runners, including Playwright, Playwright Test, WebdriverIO, and Cucumber, plus Electron and API testing.

Who uses it and how

• Teams running large acceptance suites where duplicated selectors and repeated flows have become the main maintenance cost.
• Teams working in a BDD or Cucumber style who need reports that non-technical stakeholders can read as living documentation.
• Teams testing multi-user workflows, which the framework supports as a built-in capability rather than a workaround.
• Teams with slow UI-only suites that want to blend API calls into setup and reserve the browser for the parts that need it.
• Teams testing Electron applications, and teams that want to change runner or integration tool later without rewriting their Tasks.

Getting started

Install the packages from npm — @serenity-js/core plus the integration package for the runner in use, such as @serenity-js/playwright-test — and follow the getting started guide at serenity-js.org. There is no server to deploy: Serenity/JS runs inside the Playwright Test, WebdriverIO, or Cucumber suite that is already configured.

How it compares

Serenity/JS does not compete with Playwright Test, WebdriverIO, or Cucumber; it layers on top of them, which means those tools remain the execution engine while Serenity/JS supplies the architecture. Teams already comfortable with a runner's native test style will find Serenity/JS is a deliberate addition to it rather than a replacement. Where the facts name no directly equivalent tool in this registry, it stands on its own as a Screenplay Pattern implementation for the TypeScript ecosystem.

When to use it — and when not to

Adopt it when a suite has grown large enough that reusable Tasks, multi-actor scenarios, and stakeholder-readable reports pay for the abstraction. Avoid it for small or short-lived suites, where the Screenplay Pattern's vocabulary is overhead rather than leverage, and be aware that it adds a dependency and a way of writing tests that the team has to learn. Prospective users should also note the repository's 88 open issues and that the project is a library requiring npm package management, not a hosted service with a support contract.

import { describe, it } from '@serenity-js/playwright-test'
import { Ensure, equals } from '@serenity-js/assertions'
import { Navigate } from '@serenity-js/web'

describe('Swag Labs', () => {

    it('should let a standard user complete checkout', async ({ actor }) => {
        await actor.attemptsTo(
            Navigate.to('https://www.saucedemo.com/'),
            Authenticate.withCredentials('standard_user', 'secret_sauce'),
            Inventory.productCalled('Sauce Labs Backpack').addToCart(),
            Checkout.completeWith({
                firstName: 'Alice',
                lastName: 'Smith',
                postalCode: '90210',
            }),
            Ensure.that(
                Checkout.confirmationHeading(), 
                equals('Thank you for your order!')
            ),
        )
    })
})

npm install --save-dev @serenity-js/core @serenity-js/console-reporter @serenity-js/html-reporter @serenity-js/playwright @serenity-js/playwright-test @serenity-js/rest @serenity-js/web @serenity-js/assertions

  import { defineConfig, devices } from '@playwright/test';
+ import { SerenityFixtures, SerenityWorkerFixtures } from '@serenity-js/playwright-test';

- export default defineConfig({
+ export default defineConfig<SerenityFixtures, SerenityWorkerFixtures>({
    testDir: './tests',
    // ... keep your existing settings ...
-   reporter: 'html',
+   reporter: [
+       [ 'line' ],
+       [ '@serenity-js/playwright-test', {
+           crew: [
+               '@serenity-js/console-reporter',
+               [ '@serenity-js/html-reporter', { 
+                   specDirectory: './tests',
+                   outputDirectory: './reports/serenity',
+               } ],
+           ]
+       }]
+   ],

 {
   "scripts": {
+    "test": "npx playwright test"
   }
 }

// Before
import { test, expect } from '@playwright/test'

// After
import { describe, it } from '@serenity-js/playwright-test'