- Notifications
You must be signed in to change notification settings - Fork1
checkly/playwright-check-suite-examples
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Take your existing Playwright Test Suite and reuse it for synthetic monitoring.
This repository demonstrates how to use Playwright natively for end-to-end testing andCheckly synthetic monitoring.
It showcases Playwright Check Suites that:
- Run Playwright tests with multiple browsers
- Monitor different environments using Playwright projects
- Monitor specific application areas using Playwright tags
- Authenticate tests for logged-in scenarios using Playwright project dependencies
Note
The examples focus on showing how to structure and organize your Playwright tests and reuse them for Checkly synthetic monitoring.
To leverage the Playwright Check Suites' full potential mix and match the shown practices in your projects.
- Node.js (v22 or higher recommended)
- npm package manager
- a Checkly account for synthetic monitoring
npm install
playwright-check-suite-examples/├── tests/ # Playwright Test files│ ├── multiple-browsers/ # Example spec files│ ├── different-environments/ # Example spec files│ └── ...├── checkly.config.ts # Checkly configuration├── playwright.config.ts # Playwright configuration└── package.json # Project dependenciesThis repository includes an initialized Playwright andCheckly CLI project to show how to use Playwright Check Suites.
Checkly Playwright Check Suites enable you to reuse and bundle your existing Playwright end-to-end test suite for end-to-end testing and synthetic monitoring runing in the global Checkly infrastructure.
Every Playwright project is configured via aplaywright.config.ts file in the root of your project. The main options to look out for are:
- Test directory: the directory of your Playwright
spec.tsfiles (testDir) - Projects: projects to select, configure and run spec files with different configuration (
projects) - Trace: trace file configuration for easier failure debugging (
use.traceorprojects[].use.trace)
The Checkly CLI parses and reuses your existing Playwright configuration to guarantee a smooth transition from local end-to-end testing to global synthetic monitoring with Playwright Check Suites.
Tip
Learn more about all test configuration options inthe official Playwright documentation.
Every Checkly CLI projects is configured via acheckly.config.ts file in the root of the project. Use this main configuration to define your Playwright Check Suites.
Specify the following properties to control your Playwright setup for synthetic monitoring.
- Project Name: a human readable name for your project (
Demo Playwright Check Suites) - LogicalID: a unique identifier across your Checkly account (
pwt-check-suite-examples) - Playwright configuration: your general Playwright configuration (
checks.playwrightConfigPath) - Check Suite Definitions: subsets of your Playwright test suite used as Playwright Check Suites (
checks.playwrightChecks)
Tip
Learn more about all the Checkly monitoring options inthe official Checkly documentation.
Playwright tests usually run on your local machine or in your CI/CD pipeline when you execturenpx playwright test. The Checkly CLI lets you take your tests and run them from one of the global Checkly locations.
Usethepw-test command to run your Playwright tests in the Checkly infrastructure before deploying them as synthetic monitors. The command accepts Checkly and Playwright CLI options.
npx checkly pw-test [checkly options] -- [playwright options]
Run all tests:
npx checkly pw-test
Run tests from a specific location:
npx checkly pw-test --location="eu-central-1"Run specific project:
npx checkly pw-test -- --project="chromium"Run tests with a specific tag:
npx checkly pw-test -- --grep @sanity
Once you have configured your Playwright Check Suites usethenpx checkly test command to run and test your combined Playwright and Checkly configuration.
Run a specific Playwright Check Suite:
npx checklytest --grep="Multiple Browser Suite" --record
Run a specific Playwright Check Suite from a specific location:
npx checklytest --grep="Multiple Browser Suite" --record --location="eu-central-1"
Once your tests pass, deploy them as scheduled monitors to Checkly:
npx checkly deploy
These following examples highlight configurations to reuse, select and configure your Playwright end-to-end tests for Checkly synthetic monitoring.
Tip
Learn more about Playwright Check Suites, best practices and how to structure your tests inthe organizing Playwright Check Suites documentation.
Use thepwProjects option to reuse existing Playwright projects and their configuration in your Playwright Check Suite.
// playwright.config.tsexportdefaultdefineConfig({projects:[{name:"chromium",testMatch:/.*\/multiple-browsers\/.*\.spec\.ts/,use:{ ...devices["Desktop Chrome"],},},{name:"firefox",testMatch:/.*\/multiple-browsers\/.*\.spec\.ts/,use:{ ...devices["Desktop Firefox"],},},],})
Reuse and configure the different Playwright projects in yourcheckly.config.ts.
// checkly.config.tsexportdefaultdefineConfig({checks:{playwrightChecks:[{name:"Multiple Browser Suite",logicalId:"browser-compat-e2e-suite",// Specify which projects should be// included in the Playwright Check SuitepwProjects:["chromium","firefox"],frequency:Frequency.EVERY_10M,},],},})
Use the--grep option to run a specific Playwright Check Suite.
npx checklytest --grep="Multiple Browser Suite" --record
Configure differentbaseURL Playwright project settings if you want to run the same monitoring tests against different environments.
// playwright.config.tsexportdefaultdefineConfig({projects:[{name:"environment-marketing",testMatch:/.*\/different-environments\/.*\.spec\.ts/,use:{ ...devices["Desktop Chrome"],baseURL:"https://checklyhq.com"},},{name:"environment-docs",testMatch:/.*\/different-environments\/.*\.spec\.ts/,use:{ ...devices["Desktop Chrome"],// Change the base URL for this environmentbaseURL:"https://docs.checklyhq.com",},},],})
Reuse and configure the different Playwright projects in yourcheckly.config.ts.
// checkly.config.tsexportdefaultdefineConfig({checks:{playwrightChecks:[{name:"Marketing Environment",logicalId:"environment-marketing-suite",pwProjects:["environment-marketing"],// Run this Playwright check suite in three locations every ten minutesfrequency:Frequency.EVERY_10M,locations:["us-west-1","eu-west-2","af-south-1"],},{name:"Docs Environment",logicalId:"environment-docs-suite",pwProjects:["environment-docs"],// Run this Playwright check suite in one location every hourfrequency:Frequency.EVERY_1H,locations:["us-west-1"],},],},})
Tip
Use this approach to monitor different development environments (production,staging, etc.) or localized environments (your-company.com/en,your-company.com/de, etc.) with the same Playwright code base.
When you reuse your existing Playwright test suite for synthetic monitoring it is common to run only a subset of your tests as Checkly monitors.Use Playwright tags to specify which tests should become part of your monitoring setup.
Annotate tests with a tag signaling that they are used for end-to-end monitoring.
import{expect,test}from"@playwright/test"// Annotate a test to reuse is for synthetic monitoringtest("Visit Checkly home page",{tag:"@checkly"},async({ page})=>{awaitpage.goto("/")// More test code ...})
Once your future monitoring tests are tagged you can target them via Playwright projects or thepwTags Playwright Check Suite option.
Configure a Playwright project that will only run tests with your specific tag.
// playwright.config.tsexportdefaultdefineConfig({projects:[{name:"checkly-monitoring",use:{ ...devices["Desktop Chrome"],baseURL:"https://checklyhq.com"},// Filter tests by taggrep:/@checkly/,},],})
Reuse and configure the Playwright project in yourcheckly.config.ts.
// checkly.config.tsexportdefaultdefineConfig({checks:{playwrightChecks:[{name:"Tagged Checkly Tests (tagged-via-project)",logicalId:"tagged-tests-via-project",// Tests are filtered by tag by using a separated Playwright projectpwProjects:["checkly-monitoring"],frequency:Frequency.EVERY_1H,},],},})
If you don't want to include the test filtering logic in your Playwright project, usepwTags to filter the tests in yourcheckly.config.ts.
// checkly.config.tsexportdefaultdefineConfig({checks:{playwrightChecks:[{name:"Tagged Checkly Tests (tagged-via-pwtags)",logicalId:"tagged-tests-via-pwtags",// Tests are filtered by tag by using `pwTags`pwTags:["@checkly"],frequency:Frequency.EVERY_1H,},],},})
Tip
Playwright Check Suites let you filter existing tests usingpwTags. However, we recommend to always start with a separated Playwright project and reuse it viapwProjects in yourcheckly.config.ts.
This approach improves the maintainability and separates the Playwright test configuration (playwright.config.ts) from the Checkly monitoring configuration (checkly.config.ts).
If your existing Playwright tests require authentication and a login step usePlaywright project dependencies and storage state to log in once and reuse the browser session information.
Create a Playwright test that performs your login actions and callscontext().storageState().
// login.setup.tsconstAUTH_FILE=".auth/user.json"setup("Log into Checkly",async({ page})=>{awaitpage.goto("/")// Perform your login actions// ...// Use storage state to write the browser state to diskawaitpage.context().storageState({path:AUTH_FILE})})
Configure two new Playwright projects. The first one performs the login actions to persist the browser state, while the other one imports the browser state to avoid the login steps.
// playwright.config.tsexportdefaultdefineConfig({projects:[{name:"login-setup",use:{ ...devices["Desktop Chrome"],baseURL:"https://checklyhq.com"},testMatch:/.*\/storage-state-and-dependencies\/.*\.setup\.ts/,},{name:"logged-in-tests",use:{ ...devices["Desktop Chrome"],baseURL:"https://checklyhq.com",// 2. Reuse the written browser state to avoid login stepsstorageState:path.resolve(__dirname,AUTH_FILE),},testMatch:/.*\/storage-state-and-dependencies\/.*\.spec\.ts/,// 1. Set the project doing the login as a dependencydependencies:["login-setup"],},],})
This Playwright setup will always run thelogin-setup project before runninglogged-in-tests so that the authentication will be available and the browser state can be reused.
Reuse thelogged-in-tests project in your Checkly configuration.
// checkly.config.tsexportdefaultdefineConfig({checks:{playwrightChecks:[{name:"Logged-in tests",logicalId:"logged-in-tests",// Run the `logged-in-tests` project which will automatically run// `login-setup` to write the authentication file to diskpwProjects:["logged-in-tests"],frequency:Frequency.EVERY_1H,},],},})
Project dependencies and storage state work the same way as your standard Playwright project.
Tip
Check this video to learn more aboutPlaywrightstorageState and how to configure Playwright project dependencies.
- Playwright Documentation
- Checkly Documentation
- Checkly Playwright Check Suites
- Checkly Playwright Tips on YouTube
MIT
About
Example repository using Playwright Check Suites in Checkly
Resources
Code of conduct
Security policy
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Contributors3
Uh oh!
There was an error while loading.Please reload this page.