Skip to content

Commit 437b2c5

Browse files
stefanjudisstefanjudis
authored
Improve pwn docs (#1304)
* Fix learn mega heading css * Improve PWN getting started docs
1 parent 727151b commit 437b2c5

File tree

1 file changed

+91
-67
lines changed

1 file changed

+91
-67
lines changed

‎site/content/docs/playwright-checks/_index.md

Lines changed: 91 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ Use your existing Playwright tests as live, scheduled monitoring checks. No rewr
1818

1919
A Playwright Check Suite lets you define a monitoring strategy using your existing Playwright tests and configured projects.
2020

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.
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 select tests and group subsets into Playwright Check Suites. This approach allows you to specify different monitoring settings for each Playwright Check Suite to differenciate between smoke tests or critical path flows.
2323

2424
## QuickStart Guide
2525

@@ -29,9 +29,8 @@ Here's how to get from zero to deployed checks in 5 minutes.
2929
What you need:
3030

3131
* A checkly account
32-
* A repository using Playwright for E2E tests
33-
* one with a playwright configuration file.
34-
32+
* A repository using Playwright for E2E tests and a Playwright configuration file.
33+
3534
## Steps
3635

3736
### 1. Install the Checkly CLI
@@ -49,92 +48,117 @@ What you need:
4948
npm install --save-dev jiti typescript
5049
```
5150

52-
### 3. Define which tests to monitor in `checkly.config.ts`
51+
### 3. Define which tests to monitor in `checkly.config.ts/js`
5352

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.
53+
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.
5554

5655
Make sure:
5756

5857
* `pwProjects` match projects names in your playwright.config.ts.
5958
* `pwTags` match tags in your test definitions.
6059

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`.
62-
63-
64-
```typescript {title="checkly.config.ts/js"}
65-
// checkly.config.ts
66-
import { defineConfig } from 'checkly'
67-
import { Frequency } from 'checkly/constructs'
68-
69-
export default defineConfig({
70-
projectName: 'Cool Website Checks',
71-
logicalId: 'cool-website-monitoring',
72-
repoUrl: 'https://github.com/acme/website',
73-
checks: {
74-
playwrightConfigPath: './playwright.config.ts', //specify a custom playwright config file here
75-
playwrightChecks: [
76-
{
77-
/* Create a multi-browser check that runs
78-
every 5 mins.*/
79-
logicalId: 'multi-browser',
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
85-
},
86-
{
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
93-
locations: ['us-east-1', 'eu-central-1', 'ap-southeast-2'],
94-
},
95-
],
96-
},
97-
/* The default location to use when running npx checkly test */
98-
cli: {
99-
runLocation: 'us-east-1',
100-
retries: 0, // full test retries, when running npx checkly test
101-
},
102-
})
103-
```
60+
Below are two example check suites:
61+
62+
* a full multi-browser suite with smoke tests.
63+
* a `chromium`-only check suite running tests tagged with `@critical`.
64+
65+
66+
```typescript {title="checkly.config.ts/js"}
67+
import { defineConfig } from 'checkly'
68+
import { Frequency } from 'checkly/constructs'
69+
70+
export default defineConfig({
71+
projectName: 'Cool Website Checks',
72+
logicalId: 'cool-website-monitoring',
73+
repoUrl: 'https://github.com/acme/website',
74+
checks: {
75+
playwrightConfigPath: './playwright.config.ts',
76+
playwrightChecks: [
77+
{
78+
/*
79+
Create a multi-browser check that runs
80+
every 10 mins in two locations.
81+
*/
82+
logicalId: 'multi-browser',
83+
name: 'Multi Browser Suite',
84+
pwProjects: ['chromium', 'firefox', 'webkit'], // Use project (or projects) in your Playwright config
85+
pwTags: '@smoke-tests', // Use a tag (or tags) in your tests
86+
frequency: Frequency.EVERY_10M,
87+
locations: ['us-east-1', 'eu-west-1'],
88+
},
89+
{
90+
/*
91+
Create a check that runs the `@critical` tagged tests
92+
every 5 mins in three locations.
93+
*/
94+
logicalId: 'critical-tagged',
95+
name: 'Critical Tagged tests',
96+
pwTags: '@critical', // Reference an existing tag in your tests
97+
pwProjects: ['chromium'],
98+
frequency: Frequency.EVERY_5M,
99+
locations: ['us-east-1', 'eu-central-1', 'ap-southeast-2'],
100+
},
101+
],
102+
},
103+
cli: {
104+
runLocation: 'us-east-1',
105+
retries: 0,
106+
},
107+
})
108+
```
109+
110+
Access [the Playwright Check Suites reference documentation](/docs/playwright-checks/reference/) for more configuration options.
104111

105112
### 4. Validate your monitors
106113

107-
Now, you can validate the playwright check suites above, that reference existing playwright tags or projects in your repository.
114+
Validate the Playwright check suites that reference existing Playwright tags or projects in your repository by running `npx checkly test` from your terminal. Your Playwright check suites will then be executed in the Checkly infrastructure running in the location specified in your Checkly config (`cli.runLocation`).
108115

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.
116+
```bash {title="Terminal"}
117+
npx checkly test --record
118+
> Running 2 checks in eu-west-1.
110119

111-
```bash {title="Terminal"}
112-
npx checkly test --record
113-
> Running 2 checks in eu-west-1.
114-
115-
critical-tagged
116-
✔ critical-tagged (4s)
117-
multi-browser
118-
✔ multi-browser (18s)
119-
120-
2 passed, 2 total
121-
Detailed session summary at: https://chkly.link/...
122-
```
120+
critical-tagged
121+
✔ critical-tagged (4s)
122+
multi-browser
123+
✔ multi-browser (18s)
124+
125+
2 passed, 2 total
126+
```
127+
128+
If you you want to persist the test results and access them in the Checkly web app, use the `--record` CLI option and run `npx checkly test --record` to transform your test runs into [a Checkly test session](/docs/testing/#test-sessions).
129+
130+
```bash {title="Terminal"}
131+
npx checkly test --record
132+
> Running 2 checks in eu-west-1.
133+
134+
critical-tagged
135+
✔ critical-tagged (4s)
136+
multi-browser
137+
✔ multi-browser (18s)
138+
139+
2 passed, 2 total
140+
Detailed session summary at: https://chkly.link/...
141+
```
142+
143+
The CLI command will then return a link leading to results, traces and more details.
123144

124145
## 5. Deploy your Playwright Check Suites
125146

147+
If your Playwright monitoring passes and you are ready to start monitoring your applications with your Playwright tests, transform your Playwright Check Suite into global monitoring with `npx checkly deploy`.
126148

127149
```bash {title="Terminal"}
128150
npx checkly deploy
129151

130-
> You are about to deploy your project "playwright-check-suites" to account "Checkly E2E Prod". Do you want to continue? … yes
152+
> You are about to deploy your project "playwright-check-suites" to account "Checkly E2E Prod". Do you want to continue? … yes
153+
154+
Successfully deployed project "playwright-check-suite" to account "Checkly E2E Prod".
131155
```
132156

133157
Once deployed, your checks will run on a schedule and results will appear in your [home dashboard](https://app.checklyhq.com/).
134158

135159
## 6. Set up Alerts
136160

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.
161+
Configure alert channels and alert groups to get notified when checks fail. You can receive alerts via email, Slack, webhooks, and more.
138162

139163
To set up alerts:
140164
1. Go to the Checkly dashboard.
@@ -143,7 +167,7 @@ To set up alerts:
143167

144168
Learn more in the [alerting guide](https://www.checklyhq.com/docs/alerts/).
145169

146-
and all done!
170+
And all done!
147171

148172

149173
## Next steps

0 commit comments

Comments
 (0)