@serenity-js/playwright

Serenity/JS

Serenity/JS is a framework designed to make acceptance and regression testing of modern full-stack applications faster, more collaborative and easier to scale.

Visit serenity-js.org for the latest tutorials and API docs, and follow @SerenityJS and @JanMolak on Twitter for project updates.

Subscribe to Serenity/JS YouTube channel to get notified when new demos and video tutorials are available.

Learning Serenity/JS

To learn more about Serenity/JS, follow the tutorial, review the examples, and create your own test suite with Serenity/JS template projects.

If you have any questions, join us on Serenity/JS Community Chat.

Serenity/JS Playwright

@serenity-js/playwright module is a Screenplay Pattern-style adapter for Playwright, that helps with testing Web-based apps.

Installation

To install this module, run the following command in your Playwright project directory:

npm install --save-dev @serenity-js/{assertions,console-reporter,core,serenity-bdd,web,playwright}

Usage with Mocha

import { Ensure, equals } from '@serenity-js/assertions';
import { actorCalled, Actor, ArtifactArchiver, Cast, configure, Duration } from '@serenity-js/core';
import { ConsoleReporter } from '@serenity-js/console-reporter';
import { BrowseTheWebWithPlaywright, PlaywrightOptions } from '@serenity-js/playwright';
import { SerenityBDDReporter } from '@serenity-js/serenity-bdd';
import { By, Navigate, PageElement, Photographer, TakePhotosOfFailures, Text } from '@serenity-js/web';

import { describe, it, beforeAll, afterAll } from 'mocha';
import * as playwright from 'playwright';

// example Lean Page Object describing a widget we interact with in the test
class SerenityJSWebsite {                   
    static header = () => 
        PageElement.located(By.css('h1'))   // selector to identify the interactable element
            .describedAs('header');         // description to be used in reports
}

// example Actors class, confgures Serenity/JS actors to use Playwright
class Actors implements Cast {              
    constructor(                            
        private readonly browser: playwright.Browser,
        private readonly options: PlaywrightOptions,
    ) {
    }

    prepare(actor: Actor): Actor {
        return actor.whoCan(
            BrowseTheWebWithPlaywright.using(this.browser, this.options),
            // ... add other abilities as needed, like CallAnApi or TakeNotes
        );
    }
}

describe('Serenity/JS', () => {

    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: new Actors(browser, {
                    baseURL: `https://serenity-js.org`,
                    defaultNavigationTimeout:   Duration.ofSeconds(2).inMilliseconds(),
                    defaultTimeout:             Duration.ofMilliseconds(750).inMilliseconds(),
            }),
            crew: [
                ArtifactArchiver.storingArtifactsAt(`./target/site/serenity`),
                Photographer.whoWill(TakePhotosOfFailures),
                new SerenityBDDReporter(),
                ConsoleReporter.forDarkTerminals(),
            ]
        });
    });
    
    it('supports Playwright', async () => {
        // actorCalled(name) instantiates or retrieves an existing actor identified by name
        // Actors class configures the actors to use Playwright 
        await actorCalled('William')                                
            .attemptsTo(
                Navigate.to('https://serenity-js.org'),
                Ensure.that(
                    Text.of(SerenityJSWebsite.header()),
                    equals('Next generation acceptance testing')
                ),
            )
    })

    afterAll(async () => {
        // Close the browser after all the tests are finished
        if (browser) {
            await browser.close()
        }
    });
});

Next steps:

• Add @serenity-js/mocha adapter to produce the reports
• Learn about the Screenplay Pattern
• Explore @serenity-js/web and @serenity-js/assertions APIs

Usage with @playwright/test

Support for @playwright/test is coming soon!

Give serenity-js/serenity-js#1240 a 👍 on GitHub to show your interest and get notified when the feature arrives.

Usage with Cucumber

Tutorial coming soon!

Follow @SerenityJS on Twitter to get notified about new tutorials.

More coming soon!

New features, tutorials, and demos are coming soon, so follow us on Twitter and join the Serenity/JS Community chat channel to stay up to date!