You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
With Checkly, convert your Playwright tests directly into scheduled monitors.
17
-
18
-
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.
15
+
Use your existing Playwright tests as live, scheduled monitoring checks. No rewrites required. Define what to monitor using code, selecting the right tags and projects, and run your checks globally, using the [Checkly CLI](/docs/cli).
19
16
20
17
## What's a Playwright Check Suite?
21
18
22
-
A Playwright Check Suite runs your Playwright test suite in a single monitoring check.
23
-
You can slice and dice your Playwright test suite into different Playwright Check Suites, using known references such as Playwright Projects, `pwProjects` or Playwright test tags, `pwTags`.
19
+
A Playwright Check Suite lets you define a monitoring strategy using your existing Playwright tests and configured projects.
24
20
25
-
Playwright Check Suites support all Playwright features out of the box:
21
+
You can mix and match existing
22
+
[Projects](https://playwright.dev/docs/test-projects) (`pwProjects`) and [test tags](https://playwright.dev/docs/test-annotations#tag-tests) (`pwTags`) to group test subsets into a Playwright Check Suite, like smoke tests or critical path flows into lightweight reliable flows.
26
23
27
-
* Dependencies between tests or projects → `projects`, `dependencies`, `globalSetup`, `globalTeardown`, reused `StorageState`, `test.beforeEach`...
28
-
* Multiple browsers and viewports: Chrome, Firefox, WebKit, Mobile Chrome.
29
-
* Test level retries.
30
-
* Automatic flagging of flaky tests when passed on retry.
31
-
* Fake media access: whether it's a QR in a video you are parsing or access to a microphone, you got it.
32
-
* Control over traces, video and screenshots generation.
24
+
## QuickStart Guide
33
25
26
+
Here's how to get from zero to deployed checks in 5 minutes.
34
27
35
-
On top of these, a Playwright Check Suite provides:
36
-
37
-
* Custom code dependencies, read directly from your `package.json` file.
38
-
*[World-wide locations](https://www.checklyhq.com/docs/monitoring/global-locations/) to run your check from.
39
-
*[Alerts](https://www.checklyhq.com/docs/alerting-and-retries/alert-channels/) to your preferred channel: Slack, Incident.io...
40
-
41
-
## Before you begin
42
-
28
+
### Before you begin
43
29
What you need:
44
30
45
31
* A checkly account
46
32
* A repository using Playwright for E2E tests
47
-
*It should include a playwright configuration file.
33
+
*one with a playwright configuration file.
48
34
49
35
## Steps
50
36
@@ -57,30 +43,23 @@ What you need:
57
43
58
44
### 2. [Optional] If you're using TypeScript
59
45
60
-
If you're using TypeScript, install the dev dependencies [`jiti`](https://www.npmjs.com/package/jiti) and [`typescript`](https://www.npmjs.com/package/typescript).
46
+
If you're using TypeScript, install the dev dependencies [`jiti`](https://www.npmjs.com/package/jiti) and [`typescript`](https://www.npmjs.com/package/typescript). These help the CLI bundle your typescript config and test files correctly.
61
47
62
48
```bash {title="Terminal"}
63
49
npm install --save-dev jiti typescript
64
50
```
65
51
66
-
### 3. [If you are new to Checkly] Test and create a monitor with all your tests
67
-
68
-
From inside your repository's source code directory, run:
52
+
### 3. Define which tests to monitor in `checkly.config.ts`
69
53
70
-
```bash {title="Terminal"}
71
-
npx checkly test --record
72
-
```
73
-
74
-
This will create a test session with all your tests. You'll get a Checkly URL where you can see the test results.
75
-
In your repository, a `checkly.config.ts/js` is automatically created, configured to run a single Playwright Check Suite containing all your tests.
54
+
Create a `checkly.config.ts/js` and pick the tests you want to monitor, use [test tags](https://playwright.dev/docs/test-annotations#tag-tests) and [Projects](https://playwright.dev/docs/test-projects) to create a Playwright Check Suite.
76
55
77
-
### 4. Cherry-pick which tests should become checks
56
+
Make sure:
78
57
79
-
Of course, you can now run `npx checkly deploy` and have a big monitor that checks your whole suite.
58
+
*`pwProjects` match projects names in your playwright.config.ts.
59
+
*`pwTags` match tags in your test definitions.
80
60
81
-
It's likely that only some tagged tests or Playwright projects need to become monitors. You can now update your `checkly.config.ts/js` file to select the tests to become individual monitors, with their own schedule, location, and configuration.
61
+
Below are two example checks: one runs a full multi-browser suite with smoke tests, and one monitors only `@critical` tagged tests in `Chromium`.
82
62
83
-
Here's a fully working example. Adjust the `pwProjects` and `pwTags` to ones that exist in your code.
84
63
85
64
```typescript {title="checkly.config.ts/js"}
86
65
// checkly.config.ts
@@ -97,19 +76,21 @@ Here's a fully working example. Adjust the `pwProjects` and `pwTags` to ones tha
97
76
{
98
77
/* Create a multi-browser check that runs
99
78
every 5 mins.*/
100
-
name: 'Multi Browser Suite',
101
79
logicalId: 'multi-browser',
102
-
pwProjects: ['chromium', 'firefox', 'webkit'], // Reference the project or projects in your playwright config
103
-
frequency: Frequency.EVERY_5M, // set your ideal frequency
104
-
locations: ['us-east-1', 'eu-west-1'], // add your locations
80
+
name: 'Multi Browser Suite',
81
+
pwProjects: ['chromium', 'firefox', 'webkit'], // Use project (or projects) in your playwright config
82
+
pwTags: '@smoke-tests', // Use a tag (or tags) in your tests
83
+
frequency: Frequency.EVERY_10M, // set your ideal frequency
84
+
locations: ['us-east-1', 'eu-west-1'], // worldwide locations to run your check from
105
85
},
106
86
{
107
-
/* Create a check that runs the critical tagged tests every 10 mins */
108
-
name: 'Checkly Tagged tests',
109
-
logicalId: 'checkly-tagged',
110
-
pwTags: '@checkly', // Reference an existing tag in your tests
111
-
frequency: Frequency.EVERY_10M, // set your ideal frequency
112
-
locations: ['us-east-1'],
87
+
/* Create a check that runs the critical tagged tests every 10 mins */
88
+
logicalId: 'critical-tagged',
89
+
name: 'Critical Tagged tests',
90
+
pwTags: '@critical', // Reference an existing tag in your tests
91
+
pwProjects: ['chromium'],
92
+
frequency: Frequency.EVERY_5M, // set your ideal frequency
@@ -121,25 +102,55 @@ Here's a fully working example. Adjust the `pwProjects` and `pwTags` to ones tha
121
102
})
122
103
```
123
104
124
-
### 5. Test and deploy your updated monitors
105
+
### 4. Validate your monitors
106
+
107
+
Now, you can validate the playwright check suites above, that reference existing playwright tags or projects in your repository.
125
108
126
-
Now, you can test and deploy the individual monitors above, that reference existing playwright tags or projects in your repository.
109
+
`npx checkly test --record` runs a test session to validate the defined checks on your `cli: runlocation:` using the settings in your checkly config file.
> You are about to deploy your project "playwright-check-suites" to account "Checkly E2E Prod". Do you want to continue? … yes
143
-
```
131
+
```
132
+
133
+
Once deployed, your checks will run on a schedule and results will appear in your [home dashboard](https://app.checklyhq.com/).
134
+
135
+
## 6. Set up Alerts
136
+
137
+
Checkly lets you configure alert channels and alert groups to get notified when checks fail. You can receive alerts via email, Slack, webhooks, and more.
138
+
139
+
To set up alerts:
140
+
1. Go to the Checkly dashboard.
141
+
2. Navigate to **Alert Settings** > **Alert Channels** to create a new channel.
142
+
3. Assign channels to your project or individual checks.
143
+
144
+
Learn more in the [alerting guide](https://www.checklyhq.com/docs/alerts/).
145
+
146
+
and all done!
147
+
148
+
149
+
## Next steps
150
+
151
+
- Explore advanced configuration like [private locations](/docs/private-locations/) and [environment variables](/docs/cli/env-vars/).
152
+
- Add or tweak your checks to monitor flows in different browsers or locations.
153
+
- Set up alerting and integrations with your incident response tools
154
+
- Add [TCP](/docs/tcp-checks) and [API monitors](/docs/api-checks) alongside your Playwright Check Suites.
144
155
145
-
Now, you can head over to [Checkly's home dashboard](https://app.checklyhq.com/) and see your new checks running and associate an alert channel for them.
156
+
> → Continue to the [Playwright Check Suite CLI reference](/docs/playwright-checks/reference) for all available options.
0 commit comments