Serenity/JS

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!')
            ),
        )
    })
})

Tests read like specifications. Each Task (Authenticate, Inventory, Checkout) is reusable across scenarios, test runners, and integration tools. See the full implementation →

Note: The username and password above are public demo values from saucedemo.com. In real projects, use environment variables or a secrets manager.

→ See the same scenario at three levels of Serenity/JS adoption

Serenity/JS works on top of your existing tools — you don't replace anything, you add structure and reporting. Supported test runners and integration tools include:

• Playwright Test
• WebdriverIO
• Cucumber
• Mocha
• Jasmine

Add Serenity/JS to an existing Playwright Test project:

1. Install Serenity/JS modules and reporting tools:

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

2. Update playwright.config.ts to register the Serenity/JS reporter:

  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',
+               } ],
+           ]
+       }]
+   ],

3. Add a test script to package.json:

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

The HTML report is generated automatically when tests finish — no additional build step needed.

4. Change one import in your test files to use Serenity/JS fixtures:

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

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

That's it. Your existing tests gain structured reporting immediately. Adopt the Screenplay Pattern gradually for new tests.

→ Full getting-started tutorial

• Why Serenity/JS? — architecture comparison at three levels of Serenity/JS adoption
• 15-minute tutorial — build your first Screenplay test in the browser
• Project Templates — pre-configured starters for Playwright, WebdriverIO, Cucumber
• API Documentation — reference for all @serenity-js/* modules
• Reporting — HTML reports, console output, Serenity BDD living documentation
• Releases & Compatibility — latest versions, changelog, and Node/Playwright/WebdriverIO compatibility matrix

• GitHub Discussions — Q&A and feature proposals
• Community Chat
• LinkedIn
• YouTube
• Blog

If Serenity/JS is helping your team, please ⭐️ star this repo to help others discover it!

• GitHub Sponsors — fund ongoing development
• Commercial support — training, consulting, and implementation help — contact Jan Molak

Serenity/JS is an Apache-2.0 licensed open-source project. We welcome contributions of all kinds — code, documentation, bug reports, and community support.

• Contributing guide
• Good first issues
• Code of conduct

Serenity/JS source code is licensed under Apache-2.0. The Handbook and documentation are licensed under CC BY-NC-SA 4.0.

Copyright © 2016– Jan Molak and the Serenity Team