Getting started with Playwright Monitoring

With Checkly, you can convert your Playwright tests directly into scheduled monitors.

You can schedule checks from different locations and trigger alerts for your team to act on when a critical flow or API fails in your product.

A Playwright check offers all of Playwright’s features, natively:

• Dependencies between tests or projects → projects, dependencies, globalSetup, globalTeardown, reused StorageState, test.beforeEach…
• Test level retries.
• Automatic flagging of flaky tests when passed on retry.
• Fake media access: whether it’s a QR in a video you are parsing or access to a microphone, you got it.
• Control over traces, video and screenshots generation.
• Multiple browsers and viewports: Chrome, Firefox, Webkit, Mobile Chrome.

On top of these, a Playwright Check provides:

• Custom code dependencies, read directly from your package.json file.
• Several world-wide locations to run your check from.
• Alerts to your preferred channel: Slack, Incident.io…

What you need:

• A checkly account
• A repository using Playwright for E2E tests
  • It should include a playwright configuration file.

1. Install the Checkly CLI using the alpha version:

npm install -D checkly@pwt-alpha

2. Test and create a monitor with all your tests. From inside your repository’s source code directory, run:

npx checkly test --record

npx checkly deploy

3. Cherry-pick which tests should become checks

Of course, you can have a big monitor that checks your whole suite, but it’s likely only some tagged tests or Playwright projects need to become monitors. You can update your checkly.config.ts to select the tests to become monitors, with their own schedule, location and configuration.

Here’s a fully working example, adjust the pwProjects and pwTags to ones that exist in your code.

// checkly.config.ts
import { defineConfig } from 'checkly'
import { Frequency } from 'checkly/constructs'

export default defineConfig({
  projectName: 'Cool Website Checks',
  logicalId: 'cool-website-monitoring',
  repoUrl: 'https://github.com/acme/website',
  checks: {
    playwrightConfigPath: './playwright.config.ts', //specify a custom playwright config file here
    playwrightChecks: [
      {
        /* Create a check that runs the essential pw project 
        every 5 mins in EU west region */
        name: 'Essential-projects',
        pwProjects: 'essential', // Reference the project in your playwright.config.ts
        frequency: Frequency.EVERY_5M,
        locations: ['eu-west-1'],
      },
      {
        /* Create a check that runs the critical tagged tests 
        every 10 mins in EU west region */
        name: 'Critical-tagged',
        pwTags: 'critical', // Reference an existing tag in your tests
        frequency: Frequency.EVERY_10M,
        locations: ['eu-west-1'],
      },
    ],
  },
  /* The default location to use when running npx checkly test */
  cli: {
    runLocation: 'eu-west-1',
    retries: 0, // full test retries, when running npx checkly test
  },
})

4. Confirm it works by testing and deploying your updated monitors:

npx checkly test --record

npx checkly deploy

Last updated on April 10, 2025. You can contribute to this documentation by editing this page on Github