1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316---
id: intro
title: "Installation"
---
## Introduction
Playwright Test is an end-to-end test framework for modern web apps. It bundles test runner, assertions, isolation, parallelization and rich tooling. Playwright supports Chromium, WebKit and Firefox on Windows, Linux and macOS, locally or in CI, headless or headed, with native mobile emulation for Chrome (Android) and Mobile Safari.
**You will learn**
- [How to install Playwright](/intro.md#installing-playwright)
- [What's installed](/intro.md#whats-installed)
- [How to run the example test](/intro.md#running-the-example-test)
- [How to open the HTML test report](/intro.md#html-test-reports)
## Installing Playwright
Get started by installing Playwright using one of the following methods.
### Using npm, yarn or pnpm
The command below either initializes a new project or adds Playwright to an existing one.
<Tabs
groupId="js-package-manager"
defaultValue="npm"
values={[
{label: 'npm', value: 'npm'},
{label: 'yarn', value: 'yarn'},
{label: 'pnpm', value: 'pnpm'}
]
}>
<TabItem value="npm">
```bash
npm init playwright@latest
```
</TabItem>
<TabItem value="yarn">
```bash
yarn create playwright
```
</TabItem>
<TabItem value="pnpm">
```bash
pnpm create playwright
```
</TabItem>
</Tabs>
When prompted, choose / confirm:
- TypeScript or JavaScript (default: TypeScript)
- Tests folder name (default: `tests`, or `e2e` if `tests` already exists)
- Add a GitHub Actions workflow (recommended for CI)
- Install Playwright browsers (default: yes)
You can re-run the command later; it does not overwrite existing tests.
### Using the VS Code Extension
You can also create and run tests with the [VS Code Extension](./getting-started-vscode.md).
## What's Installed
Playwright downloads required browser binaries and creates the scaffold below.
```bash
playwright.config.ts # Test configuration
package.json
package-lock.json # Or yarn.lock / pnpm-lock.yaml
tests/
example.spec.ts # Minimal example test
```
The [playwright.config](./test-configuration.md) centralizes configuration: target browsers, timeouts, retries, projects, reporters and more. In existing projects dependencies are added to your current `package.json`.
`tests/` contains a minimal starter test.
## Running the Example Test
By default tests run headless in parallel across Chromium, Firefox and WebKit (configurable in [playwright.config](./test-configuration.md)). Output and aggregated results display in the terminal.
<Tabs
groupId="js-package-manager"
defaultValue="npm"
values={[
{label: 'npm', value: 'npm'},
{label: 'yarn', value: 'yarn'},
{label: 'pnpm', value: 'pnpm'}
]
}>
<TabItem value="npm">
```bash
npx playwright test
```
</TabItem>
<TabItem value="yarn">
```bash
yarn playwright test
```
</TabItem>
<TabItem value="pnpm">
```bash
pnpm exec playwright test
```
</TabItem>
</Tabs>
Tips:
- See the browser window: add `--headed`.
- Run a single project/browser: `--project=chromium`.
- Run one file: `npx playwright test tests/example.spec.ts`.
- Open testing UI: `--ui`.
See [Running Tests](./running-tests.md) for details on filtering, headed mode, sharding and retries.
## HTML Test Reports
After a test run, the [HTML Reporter](./test-reporters.md#html-reporter) provides a dashboard filterable by the browser, passed, failed, skipped, flaky and more. Click a test to inspect errors, attachments and steps. It auto-opens only when failures occur; open manually with the command below.
<Tabs
groupId="js-package-manager"
defaultValue="npm"
values={[
{label: 'npm', value: 'npm'},
{label: 'yarn', value: 'yarn'},
{label: 'pnpm', value: 'pnpm'}
]
}>
<TabItem value="npm">
```bash
npx playwright show-report
```
</TabItem>
<TabItem value="yarn">
```bash
yarn playwright show-report
```
</TabItem>
<TabItem value="pnpm">
```bash
pnpm exec playwright show-report
```
</TabItem>
</Tabs>
## Running the Example Test in UI Mode
Run tests with [UI Mode](./test-ui-mode.md) for watch mode, live step view, time travel debugging and more.
<Tabs
groupId="js-package-manager"
defaultValue="npm"
values={[
{label: 'npm', value: 'npm'},
{label: 'yarn', value: 'yarn'},
{label: 'pnpm', value: 'pnpm'}
]
}>
<TabItem value="npm">
```bash
npx playwright test --ui
```
</TabItem>
<TabItem value="yarn">
```bash
yarn playwright test --ui
```
</TabItem>
<TabItem value="pnpm">
```bash
pnpm exec playwright test --ui
```
</TabItem>
</Tabs>
See the [detailed guide on UI Mode](./test-ui-mode.md) for watch filters, step details and trace integration.
## Updating Playwright
Update Playwright and download new browser binaries and their dependencies:
<Tabs
groupId="js-package-manager"
defaultValue="npm"
values={[
{label: 'npm', value: 'npm'},
{label: 'yarn', value: 'yarn'},
{label: 'pnpm', value: 'pnpm'}
]
}>
<TabItem value="npm">
```bash
npm install -D @playwright/test@latest
npx playwright install --with-deps
```
</TabItem>
<TabItem value="yarn">
```bash
yarn add --dev @playwright/test@latest
yarn playwright install --with-deps
```
</TabItem>
<TabItem value="pnpm">
```bash
pnpm install --save-dev @playwright/test@latest
pnpm exec playwright install --with-deps
```
</TabItem>
</Tabs>
Check your installed version:
<Tabs
groupId="js-package-manager"
defaultValue="npm"
values={[
{label: 'npm', value: 'npm'},
{label: 'yarn', value: 'yarn'},
{label: 'pnpm', value: 'pnpm'}
]
}>
<TabItem value="npm">
```bash
npx playwright --version
```
</TabItem>
<TabItem value="yarn">
```bash
yarn playwright --version
```
</TabItem>
<TabItem value="pnpm">
```bash
pnpm exec playwright --version
```
</TabItem>
</Tabs>
## System requirements
- Node.js: latest 20.x, 22.x or 24.x.
- Windows 11+, Windows Server 2019+ or Windows Subsystem for Linux (WSL).
- macOS 14 (Ventura) or later.
- Debian 12 / 13, Ubuntu 22.04 / 24.04 (x86-64 or arm64).
## What's next
- [Write tests using web-first assertions, fixtures and locators](./writing-tests.md)
- [Run single or multiple tests; headed mode](./running-tests.md)
- [Generate tests with Codegen](./codegen-intro.md)
- [View a trace of your tests](./trace-viewer-intro.md)