Installation
To use Serenity/JS with Playwright Test, follow the Serenity/JS installation guide to set up your development environment and core runtime dependencies. Then, create a new Playwright Test project or add Serenity/JS integration and reporting modules to an existing project.
Initialising a Playwright Test project
If you already have a Playwright Test project, skip this step and proceed to installing Serenity/JS.
To create a new Playwright Test project, follow the Playwright Test installation instructions and run the following command:
- npm
- Yarn
- pnpm
npm init playwright@latest
yarn create playwright
pnpm create playwright
Expected output (example):
Getting started with writing end-to-end tests with Playwright:
Initialising project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
Using TypeScript improves code completion support in JetBrains IDEs and Visual Studio Code, reducing common coding errors.
Installing Serenity/JS
To add Serenity/JS to a Playwright Test project, install the following modules:
- npm
- Yarn
- pnpm
npm install --save-dev @serenity-js/assertions @serenity-js/console-reporter @serenity-js/core @serenity-js/html-reporter @serenity-js/playwright @serenity-js/playwright-test @serenity-js/rest @serenity-js/web
yarn add --dev @serenity-js/assertions @serenity-js/console-reporter @serenity-js/core @serenity-js/html-reporter @serenity-js/playwright @serenity-js/playwright-test @serenity-js/rest @serenity-js/web
pnpm add --save-dev @serenity-js/assertions @serenity-js/console-reporter @serenity-js/core @serenity-js/html-reporter @serenity-js/playwright @serenity-js/playwright-test @serenity-js/rest @serenity-js/web
This command installs:
@serenity-js/assertions— Screenplay Pattern assertions and Expectations, such asEnsure.thatandequals@serenity-js/console-reporter— reports test progress and outcomes in the terminal@serenity-js/core— the Screenplay Pattern foundation: Actors, Abilities, Tasks, Interactions, and Questions@serenity-js/html-reporter— self-contained HTML report with trends, flaky test detection, and an interactive dashboard@serenity-js/playwright— lets Actors control Playwright browsers through Serenity/JS web APIs@serenity-js/playwright-test— integrates Serenity/JS fixtures and reporting with Playwright Test@serenity-js/rest— lets Actors call REST APIs and inspect their responses@serenity-js/web— browser-independent web interactions, Page Element queries, and automatic screenshots
To ensure that your version of Playwright Test is compatible with the latest version of Serenity/JS, check the Serenity/JS releases and compatibility page.
What you learnt
- Initialise a Playwright Test project with
npm init playwright@latest. - Install Serenity/JS modules (
@serenity-js/core,@serenity-js/playwright-test, etc.) as dev dependencies. - Check the releases page for version compatibility.
Next step
Once you've installed the dependencies, proceed to configuring Serenity/JS reporting.
