@serenity-js/playwright

Serenity/JS Playwright



@serenity-js/playwright brings full Serenity reporting capabilities to Playwright and enables writing tests using the Screenplay Pattern.

Features

- Integrates Serenity/JS with Playwright providing standardised Screenplay Web API
- Supports all Serenity/JS reporting features 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/serenity-bdd @serenity-js/web @serenity-js/playwright
`

See the Serenity/JS Installation Guide.

Quick Start

$3

`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.

$3

Follow the Serenity/JS configuration guide for Cucumber
and the Serenity/JS Cucumber and Playwright Project Template.

$3

`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/core:ArtifactArchiver', { outputDirectory: 'target/site/serenity' } ],
[ '@serenity-js/web:Photographer', {
strategy: 'TakePhotosOfFailures',
// strategy: 'TakePhotosOfInteractions',
} ],
[ '@serenity-js/serenity-bdd', { specDirectory: 'spec' } ],
]
})
})

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
- Screenplay Pattern Guide
- Serenity/JS Project Templates
- More examples and reference implementations
- Tutorial: First Web Scenario
- Tutorial: First API Scenario

Contributing

Contributions of all kinds are welcome! Get started with the Contributing Guide.

Community

- Community Chat
- Discussions Forum
- Visit the 💡How to... ? section for answers to common questions

If you enjoy using Serenity/JS, make sure to star ⭐️ Serenity/JS on GitHub to help others discover the framework!

License

The Serenity/JS code base is licensed under the Apache-2.0 license,
while its documentation and the Serenity/JS Handbook are licensed under the Creative Commons BY-NC-SA 4.0 International.

See the Serenity/JS License.

Support

Support ongoing development through GitHub Sponsors. Sponsors gain access to Serenity/JS Playbooks
and priority help in the Discussions Forum.

For corporate sponsorship or commercial support, please contact Jan Molak.