{"id":30139293,"url":"https://github.com/checkly/playwright-check-suite-examples","last_synced_at":"2025-10-15T20:35:46.775Z","repository":{"id":308908824,"uuid":"1028971228","full_name":"checkly/playwright-check-suite-examples","owner":"checkly","description":"Example repository using Playwright Check Suites in Checkly","archived":false,"fork":false,"pushed_at":"2025-10-02T06:45:32.000Z","size":1938,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-04T02:59:03.304Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/checkly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-30T10:28:40.000Z","updated_at":"2025-07-30T11:33:09.000Z","dependencies_parsed_at":"2025-08-08T17:06:14.543Z","dependency_job_id":null,"html_url":"https://github.com/checkly/playwright-check-suite-examples","commit_stats":null,"previous_names":["checkly/playwright-check-suite-examples"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/checkly/playwright-check-suite-examples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkly%2Fplaywright-check-suite-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkly%2Fplaywright-check-suite-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkly%2Fplaywright-check-suite-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkly%2Fplaywright-check-suite-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/checkly","download_url":"https://codeload.github.com/checkly/playwright-check-suite-examples/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkly%2Fplaywright-check-suite-examples/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279111392,"owners_count":26106012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-11T02:12:10.557Z","updated_at":"2025-10-15T20:35:46.770Z","avatar_url":"https://github.com/checkly.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Checkly Playwright Check Suites examples\n\n![Use your Playwright end-to-end tests for synthetic monitoring with Playwright Check Suites.](/assets/header.jpg)\n\n\u003e Take your existing Playwright Test Suite and reuse it for synthetic monitoring.\n\n## Overview\n\nThis repository demonstrates how to use Playwright natively for end-to-end testing and [Checkly synthetic monitoring](https://www.checklyhq.com/product/synthetic-monitoring/).\n\nIt showcases Playwright Check Suites that:\n\n- [Run Playwright tests with multiple browsers](#1-run-playwright-tests-with-multiple-browsers)\n- [Monitor different environments using Playwright projects](#2-monitor-different-environments-using-playwright-projects)\n- [Monitor specific application areas using Playwright tags](#3-monitor-specific-application-areas-using-playwright-tags)\n- [Authenticate tests for logged-in scenarios using Playwright project dependencies](#4-authenticate-tests-for-logged-in-scenarios-using-playwright-project-dependencies)\n\n\u003e [!NOTE]\n\u003e The examples focus on showing how to structure and organize your Playwright tests and reuse them for Checkly synthetic monitoring.\n\u003e\n\u003e To leverage the Playwright Check Suites' full potential mix and match the shown practices in your projects.\n\n## Prerequisites\n\n- Node.js (v22 or higher recommended)\n- npm package manager\n- [a Checkly account](https://www.checklyhq.com/) for synthetic monitoring\n\n## Installation\n\n```bash\nnpm install\n```\n\n## Project Structure\n\n```\nplaywright-check-suite-examples/\n├── tests/                      # Playwright Test files\n│   ├── multiple-browsers/      # Example spec files\n│   ├── different-environments/ # Example spec files\n│   └── ...\n├── checkly.config.ts           # Checkly configuration\n├── playwright.config.ts        # Playwright configuration\n└── package.json                # Project dependencies\n```\n\n## Basic Configuration\n\nThis repository includes an initialized Playwright and [Checkly CLI project](https://www.checklyhq.com/docs/cli/overview/) to show how to use Playwright Check Suites.\n\nCheckly 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.\n\n### Playwright Configuration\n\nEvery Playwright project is configured via a `playwright.config.ts` file in the root of your project. The main options to look out for are:\n\n- **Test directory**: the directory of your Playwright `spec.ts` files (`testDir`)\n- **Projects**: projects to select, configure and run spec files with different configuration (`projects`)\n- **Trace**: trace file configuration for easier failure debugging (`use.trace` or `projects[].use.trace`)\n\nThe 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.\n\n\u003e [!TIP]\n\u003e Learn more about all test configuration options in [the official Playwright documentation](https://playwright.dev/docs/test-configuration).\n\n### Checkly Configuration\n\nEvery Checkly CLI projects is configured via a `checkly.config.ts` file in the root of the project. Use this main configuration to define your Playwright Check Suites.\n\nSpecify the following properties to control your Playwright setup for synthetic monitoring.\n\n- **Project Name**: a human readable name for your project (`Demo Playwright Check Suites`)\n- **LogicalID**: a unique identifier across your Checkly account (`pwt-check-suite-examples`)\n- **Playwright configuration**: your general Playwright configuration (`checks.playwrightConfigPath`)\n- **Check Suite Definitions**: subsets of your Playwright test suite used as Playwright Check Suites (`checks.playwrightChecks`)\n\n\u003e [!TIP]\n\u003e Learn more about all the Checkly monitoring options in [the official Checkly documentation](https://www.checklyhq.com/docs/constructs/project/).\n\n## Running Tests\n\nPlaywright tests usually run on your local machine or in your CI/CD pipeline when you execture `npx playwright test`. The Checkly CLI lets you take your tests and run them from one of the global Checkly locations.\n\n### Run your Playwright tests in the Checkly infrastructure\n\nUse [the `pw-test` command](https://www.checklyhq.com/docs/cli/checkly-pw-test/) to run your Playwright tests in the Checkly infrastructure before deploying them as synthetic monitors. The command accepts Checkly and Playwright CLI options.\n\n```bash\nnpx checkly pw-test [checkly options] -- [playwright options]\n```\n\nRun all tests:\n\n```bash\nnpx checkly pw-test\n```\n\nRun tests from a specific location:\n\n```bash\nnpx checkly pw-test --location=\"eu-central-1\"\n```\n\nRun specific project:\n\n```bash\nnpx checkly pw-test -- --project=\"chromium\"\n```\n\nRun tests with a specific tag:\n\n```bash\nnpx checkly pw-test -- --grep @sanity\n```\n\n### Test and run your Playwright Check Suite configuration\n\nOnce you have configured your Playwright Check Suites use [the `npx checkly test` command](https://www.checklyhq.com/docs/cli/checkly-test/) to run and test your combined Playwright and Checkly configuration.\n\nRun a specific Playwright Check Suite:\n\n```bash\nnpx checkly test --grep=\"Multiple Browser Suite\" --record\n```\n\nRun a specific Playwright Check Suite from a specific location:\n\n```bash\nnpx checkly test --grep=\"Multiple Browser Suite\" --record --location=\"eu-central-1\"\n```\n\n## Deploy your checks\n\nOnce your tests pass, deploy them as scheduled monitors to Checkly:\n\n```bash\nnpx checkly deploy\n```\n\n## Examples\n\nThese following examples highlight configurations to reuse, select and configure your Playwright end-to-end tests for Checkly synthetic monitoring.\n\n\u003e [!TIP]\n\u003e Learn more about Playwright Check Suites, best practices and how to structure your tests in [the organizing Playwright Check Suites documentation](https:/www.checklyhq.com/docs/detect/synthetic-monitoring/playwright-checks/test-organization).\n\n### 1. Run Playwright tests with multiple browsers\n\nUse the `pwProjects` option to reuse existing Playwright projects and their configuration in your Playwright Check Suite.\n\n```typescript\n// playwright.config.ts\n\nexport default defineConfig({\n  projects: [\n    {\n      name: \"chromium\",\n      testMatch: /.*\\/multiple-browsers\\/.*\\.spec\\.ts/,\n      use: {\n        ...devices[\"Desktop Chrome\"],\n      },\n    },\n    {\n      name: \"firefox\",\n      testMatch: /.*\\/multiple-browsers\\/.*\\.spec\\.ts/,\n      use: {\n        ...devices[\"Desktop Firefox\"],\n      },\n    },\n  ],\n})\n```\n\nReuse and configure the different Playwright projects in your `checkly.config.ts`.\n\n```typescript\n// checkly.config.ts\n\nexport default defineConfig({\n  checks: {\n    playwrightChecks: [\n      {\n        name: \"Multiple Browser Suite\",\n        logicalId: \"browser-compat-e2e-suite\",\n        // Specify which projects should be\n        // included in the Playwright Check Suite\n        pwProjects: [\"chromium\", \"firefox\"],\n        frequency: Frequency.EVERY_10M,\n      },\n    ],\n  },\n})\n```\n\nUse the `--grep` option to run a specific Playwright Check Suite.\n\n```bash\nnpx checkly test --grep=\"Multiple Browser Suite\" --record\n```\n\n### 2. Monitor different environments using Playwright projects\n\nConfigure different `baseURL` Playwright project settings if you want to run the same monitoring tests against different environments.\n\n```typescript\n// playwright.config.ts\n\nexport default defineConfig({\n  projects: [\n    {\n      name: \"environment-marketing\",\n      testMatch: /.*\\/different-environments\\/.*\\.spec\\.ts/,\n      use: { ...devices[\"Desktop Chrome\"], baseURL: \"https://checklyhq.com\" },\n    },\n    {\n      name: \"environment-docs\",\n      testMatch: /.*\\/different-environments\\/.*\\.spec\\.ts/,\n      use: {\n        ...devices[\"Desktop Chrome\"],\n        // Change the base URL for this environment\n        baseURL: \"https://docs.checklyhq.com\",\n      },\n    },\n  ],\n})\n```\n\nReuse and configure the different Playwright projects in your `checkly.config.ts`.\n\n```typescript\n// checkly.config.ts\n\nexport default defineConfig({\n  checks: {\n    playwrightChecks: [\n      {\n        name: \"Marketing Environment\",\n        logicalId: \"environment-marketing-suite\",\n        pwProjects: [\"environment-marketing\"],\n        // Run this Playwright check suite in three locations every ten minutes\n        frequency: Frequency.EVERY_10M,\n        locations: [\"us-west-1\", \"eu-west-2\", \"af-south-1\"],\n      },\n      {\n        name: \"Docs Environment\",\n        logicalId: \"environment-docs-suite\",\n        pwProjects: [\"environment-docs\"],\n        // Run this Playwright check suite in one location every hour\n        frequency: Frequency.EVERY_1H,\n        locations: [\"us-west-1\"],\n      },\n    ],\n  },\n})\n```\n\n\u003e [!TIP]\n\u003e 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.\n\n### 3. Monitor specific application areas using Playwright tags\n\nWhen 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](https://playwright.dev/docs/test-annotations#tag-tests) to specify which tests should become part of your monitoring setup.\n\nAnnotate tests with a tag signaling that they are used for end-to-end monitoring.\n\n```typescript\nimport { expect, test } from \"@playwright/test\"\n\n// Annotate a test to reuse is for synthetic monitoring\ntest(\"Visit Checkly home page\", { tag: \"@checkly\" }, async ({ page }) =\u003e {\n  await page.goto(\"/\")\n\n  // More test code ...\n})\n```\n\nOnce your future monitoring tests are tagged you can target them via Playwright projects or the `pwTags` Playwright Check Suite option.\n\n#### Run tagged tests with Playwright projects\n\nConfigure a Playwright project that will only run tests with your specific tag.\n\n```typescript\n// playwright.config.ts\n\nexport default defineConfig({\n  projects: [\n    {\n      name: \"checkly-monitoring\",\n      use: { ...devices[\"Desktop Chrome\"], baseURL: \"https://checklyhq.com\" },\n      // Filter tests by tag\n      grep: /@checkly/,\n    },\n  ],\n})\n```\n\nReuse and configure the Playwright project in your `checkly.config.ts`.\n\n```typescript\n// checkly.config.ts\n\nexport default defineConfig({\n  checks: {\n    playwrightChecks: [\n      {\n        name: \"Tagged Checkly Tests (tagged-via-project)\",\n        logicalId: \"tagged-tests-via-project\",\n        // Tests are filtered by tag by using a separated Playwright project\n        pwProjects: [\"checkly-monitoring\"],\n        frequency: Frequency.EVERY_1H,\n      },\n    ],\n  },\n})\n```\n\n#### Run tagged tests with `pwTags`\n\nIf you don't want to include the test filtering logic in your Playwright project, use `pwTags` to filter the tests in your `checkly.config.ts`.\n\n```typescript\n// checkly.config.ts\n\nexport default defineConfig({\n  checks: {\n    playwrightChecks: [\n      {\n        name: \"Tagged Checkly Tests (tagged-via-pwtags)\",\n        logicalId: \"tagged-tests-via-pwtags\",\n        // Tests are filtered by tag by using `pwTags`\n        pwTags: [\"@checkly\"],\n        frequency: Frequency.EVERY_1H,\n      },\n    ],\n  },\n})\n```\n\n\u003e [!TIP]\n\u003e Playwright Check Suites let you filter existing tests using `pwTags`. However, we recommend to always start with a separated Playwright project and reuse it via `pwProjects` in your `checkly.config.ts`.\n\u003e\n\u003e This approach improves the maintainability and separates the Playwright test configuration (`playwright.config.ts`) from the Checkly monitoring configuration (`checkly.config.ts`).\n\n### 4. Authenticate tests for logged-in scenarios using Playwright project dependencies\n\nIf your existing Playwright tests require authentication and a login step use [Playwright project dependencies and storage state](https://playwright.dev/docs/test-global-setup-teardown#option-1-project-dependencies) to log in once and reuse the browser session information.\n\nCreate a Playwright test that performs your login actions and calls [`context().storageState()`](https://playwright.dev/docs/api/class-browsercontext#browser-context-storage-state).\n\n```typescript\n// login.setup.ts\n\nconst AUTH_FILE = \".auth/user.json\"\n\nsetup(\"Log into Checkly\", async ({ page }) =\u003e {\n  await page.goto(\"/\")\n\n  // Perform your login actions\n  // ...\n\n  // Use storage state to write the browser state to disk\n  await page.context().storageState({ path: AUTH_FILE })\n})\n```\n\nConfigure 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.\n\n```typescript\n// playwright.config.ts\n\nexport default defineConfig({\n  projects: [\n    {\n      name: \"login-setup\",\n      use: { ...devices[\"Desktop Chrome\"], baseURL: \"https://checklyhq.com\" },\n      testMatch: /.*\\/storage-state-and-dependencies\\/.*\\.setup\\.ts/,\n    },\n    {\n      name: \"logged-in-tests\",\n      use: {\n        ...devices[\"Desktop Chrome\"],\n        baseURL: \"https://checklyhq.com\",\n        // 2. Reuse the written browser state to avoid login steps\n        storageState: path.resolve(__dirname, AUTH_FILE),\n      },\n      testMatch: /.*\\/storage-state-and-dependencies\\/.*\\.spec\\.ts/,\n      // 1. Set the project doing the login as a dependency\n      dependencies: [\"login-setup\"],\n    },\n  ],\n})\n```\n\nThis Playwright setup will always run the `login-setup` project before running `logged-in-tests` so that the authentication will be available and the browser state can be reused.\n\nReuse the `logged-in-tests` project in your Checkly configuration.\n\n```typescript\n// checkly.config.ts\n\nexport default defineConfig({\n  checks: {\n    playwrightChecks: [\n      {\n        name: \"Logged-in tests\",\n        logicalId: \"logged-in-tests\",\n        // Run the `logged-in-tests` project which will automatically run\n        // `login-setup` to write the authentication file to disk\n        pwProjects: [\"logged-in-tests\"],\n        frequency: Frequency.EVERY_1H,\n      },\n    ],\n  },\n})\n```\n\nProject dependencies and storage state work the same way as your standard Playwright project.\n\n\u003e [!TIP]\n\u003e Check this video to learn more about [Playwright `storageState` and how to configure Playwright project dependencies](https://www.youtube.com/watch?v=nSHPCLUwwVk).\n\n## Resources\n\n- [Playwright Documentation](https://playwright.dev)\n- [Checkly Documentation](https://www.checklyhq.com/docs/)\n- [Checkly Playwright Check Suites](https://www.checklyhq.com/docs/detect/synthetic-monitoring/playwright-checks/overview/)\n- [Checkly Playwright Tips on YouTube](https://www.youtube.com/playlist?list=PLMZDRUOi3a8NtMq3PUS5iJc2pee38rurc)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheckly%2Fplaywright-check-suite-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcheckly%2Fplaywright-check-suite-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheckly%2Fplaywright-check-suite-examples/lists"}