Creating A Playwright Check Suite

Get started with Checkly by creating your first Playwright Check Suite

Learn more about all the Playwright Check Suites capabilities in the general overview.

QuickStart Guide

Here’s how to get started with Playwright Check Suites.

Before you begin

What you need:

• A checkly account
• A repository using Playwright for end-to-end testing and a Playwright configuration file.
  • Playwright version equal or greater than 1.40

Steps

1. Install the Checkly CLI

terminal

npm install --save-dev checkly

2. [Optional] If you’re using TypeScript

If you’re using TypeScript, install the dev dependency jiti. Jiti will enable the CLI to bundle your TypeScript config and test files correctly.

terminal

npm install --save-dev jiti

3. Use pw-test to test in Checkly

Run your existing Playwright test suite using pw-test.

pw-test accepts both Checkly and Playwright command line arguments using the following syntax:

npx checkly pw-test [--checkly-flag] -- [--playwright-flag]. Use -- to separate Checkly and Playwright flags.

The CLI command will then return a link to the test session results, traces and more details:

$ npx checkly pw-test -- --project=chromium

Parsing your Playwright project... ✅

Validating project resources... ✅

Bundling project resources... ✅

Running 1 checks in eu-west-1.

playwright.config.ts
  ✔ Playwright Test: --project=chromium (16s)

Detailed session summary at: https://chkly.link/l/linkhere

4. Convert tests to monitoring checks with pw-test --create-check:

The pw-test command enables you to run your existing tests in the Checkly infrastructure. Use the --create-check flag to define the new check in your checkly.config.ts file. --create-check will create a checkly.config.ts file if it doesn’t exist and will include the necessary definitions to run your Playwright tests as a synthetic check.

For example:

$ npx checkly pw-test --create-check -- --project=chromium
⚠ No Checkly config file found

ℹ Creating a default checkly config file.

Creating Checkly check from Playwright test... ✅

Review the resulting check configuration in your checkly.config.ts file and make sure to adjust locations and schedule as needed.

import { defineConfig } from 'checkly'

const config = defineConfig({
  logicalId: 'playwright-check-suites',
  projectName: 'my-repo-playwright-check-suites',
  checks: {
    playwrightConfigPath: './playwright.config.ts',
    playwrightChecks: [
      {
        logicalId: 'playwright-check-project-chromium', // Playwright Check Suite id
        name: 'Playwright Test: --project=chromium', // Playwright Check Suite name
        installCommand: 'npm install --dev' // Command to install your  code dependencies
        testCommand: 'npx playwright test --project=chromium', // Command to run your tests
        locations: [
          'eu-central-1', // monitoring locations
        ],
        frequency: 10, // monitoring frequency (every 10 minutes)
      },
    ],
    frequency: 10, // global default frequency
    locations: [
      'us-east-1', // global default location
    ],
  },
  cli: {
    runLocation: 'us-east-1', // CLI test location used in `test` and `pw-test`
  },
})

export default config

5. Test your monitoring configuration

After creating your checkly.config.ts file, run the checkly test command to validate and test your Checkly monitoring infrastructure that now includes your new Playwright Check Suite.

$ npx checkly test

Parsing your project... ✅
Validating project resources... ✅
Bundling project resources... ✅

Running 1 checks in us-east-1.

playwright.config.ts
  ✔ Playwright Test: --project=chromium (22s)

1 passed, 1 total

The difference between checkly test and checkly pw-test is that test uses checkly.config.* and takes all your defined monitors and runs them in the Checkly infrastructure. pw-test uses your playwright.config.* instead, which parses and runs your existing Playwright tests with the provided CLI configuration.

6. Deploy your Playwright Check Suites

Once you are happy with the test results and ready to start monitoring your applications with your defined checks, deploy your Playwright Check Suite into global monitoring with npx checkly deploy.

terminal

$ npx checkly deploy

> You are about to deploy your project "playwright-check-suites" to account "Checkly E2E Prod". Do you want to continue? … yes

Successfully deployed project "playwright-check-suites" to account "Checkly E2E Prod".

Once deployed, your checks will run on a schedule and results will appear in your home dashboard.

Next steps

Running your Playwright tests on a schedule is only the first step. To get alerted about production issues you need set up notifications and alerting.

Learn more about alerting with Checkly and all available alert channels.