@serenity-js/playwright
Advanced tools
Adapter that integrates @serenity-js/web with Playwright, enabling Serenity/JS reporting and using the Screenplay Pattern to write component and end-to-end test scenarios
Serenity/JS is an innovative open-source framework designed to make acceptance and regression testing of complex software systems faster, more collaborative and easier to scale.
⭐️ Get started with Serenity/JS!
👋 Join the Serenity/JS Community!
@serenity-js/playwright module is a Screenplay Pattern-style adapter
for Playwright, that helps with testing Web-based apps.
To install this module, run the following command in your Playwright project directory:
npm install --save-dev @serenity-js/assertions @serenity-js/console-reporter @serenity-js/core @serenity-js/serenity-bdd @serenity-js/web @serenity-js/playwright
To learn more about Serenity/JS and how to use it on your project, follow the Serenity/JS Getting Started guide.
@playwright/testFollow the Serenity/JS Getting Started guide for Playwright Test.
Follow the Serenity/JS configuration guide for Cucumber and review the Serenity/JS Cucumber and Playwright Project Template.
import { Ensure, equals } from '@serenity-js/assertions'
import { actorCalled, Actor, Cast, configure, Duration } from '@serenity-js/core'
import { BrowseTheWebWithPlaywright, PlaywrightOptions } from '@serenity-js/playwright'
import { By, Navigate, PageElement, 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: [
[ '@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('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:
@serenity-js/mocha adapter to produce the reports@serenity-js/web and @serenity-js/assertions APIsNew features, tutorials, and demos are coming soon! Follow Serenity/JS on LinkedIn, subscribe to Serenity/JS channel on YouTube and join the Serenity/JS Community Chat to stay up to date! Please also make sure to star ⭐️ Serenity/JS on GitHub to help others discover the framework!
If you appreciate all the effort that goes into making sophisticated tools easy to work with, please support our work and become a Serenity/JS GitHub Sponsor today!
3.31.1 (2024-12-17)
FAQs
Adapter that integrates @serenity-js/web with Playwright, enabling Serenity/JS reporting and using the Screenplay Pattern to write component and end-to-end test scenarios
The npm package @serenity-js/playwright receives a total of 3,610 weekly downloads. As such, @serenity-js/playwright popularity was classified as popular.
We found that @serenity-js/playwright demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.
