Playwright Test

Playwright Test gives you a strong foundation for browser and component testing. As a suite grows, though, scenarios can become harder to read, repeated interactions harder to maintain, and a pass or fail result harder to explain. Serenity/JS works alongside Playwright Test to address those problems: it records richer evidence of each scenario and lets you introduce the Screenplay Pattern where shared user behaviour deserves a common vocabulary.

You do not need to rewrite your suite. Keep using Playwright Test to run scenarios across browsers and platforms, then add Serenity/JS a piece at a time—start with reporting, and introduce Actors, Tasks, and Questions as repeated workflows emerge. The guides below show you how to configure the integration, write scenarios, and add specialised capabilities such as component, multi-actor, and Electron testing.

Native Playwright Test HTML report, Playwright UI View, and Playwright Trace Viewer augmented with information from Serenity/JS Screenplay Pattern APIs and screenshots automatically captured by the Serenity/JS Photographer

Quick start 🚀

To start testing immediately, consider using:

• Serenity/JS Project Templates for Playwright Test - Pre-configured with essential dependencies.
• Serenity/JS GitHub Codespaces - Ready-to-use cloud-based development environments.
• Serenity/JS reference implementations on GitHub.

New to Serenity/JS? ⏱️ Check out the tutorials!

See what Serenity/JS is capable of without installing anything on your machine - start with our 15-minute web testing tutorial!

To see Serenity/JS reporting in action, explore the live reports generated by the Serenity/JS Playwright Test Template:

• Live Serenity BDD report
• Live Playwright Test report

Learning path

We recommend following these pages in order to get the most out of the integration:

1. Installation – Set up Playwright Test and add Serenity/JS integration modules.
2. Configuration – Configure test reports and automatic screenshots.
3. Writing tests – Write test scenarios using Serenity/JS Screenplay Pattern APIs.
4. Component testing – Test components in isolation using the same Interaction Objects as integration tests.
5. Multi-actor scenarios – Implement scenarios with multiple actors and independent browsers.
6. Customising actors – Modify abilities, share notes, and replace the default cast.
7. Testing Electron apps – Test desktop Electron applications with Serenity/JS.
8. Reporting – Choose the Serenity/JS HTML Reporter, Serenity BDD Reporter, and native Playwright tools.
9. Integration architecture – Understand how Serenity/JS integrates with Playwright Test.