1
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
# 🎭 Playwright
2
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
3
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
[](https://www.npmjs.com/package/playwright) <!-- GEN:chromium-version-badge -->[](https://www.chromium.org/Home)<!-- GEN:stop --> <!-- GEN:firefox-version-badge -->[](https://www.mozilla.org/en-US/firefox/new/)<!-- GEN:stop --> <!-- GEN:webkit-version-badge -->[](https://webkit.org/)<!-- GEN:stop --> [](https://aka.ms/playwright/discord)
4
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
5
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
## [Documentation](https://playwright.dev) | [API reference](https://playwright.dev/docs/api/class-playwright)
6
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
7
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
Playwright is a framework for Web Testing and Automation. It allows testing [Chromium](https://www.chromium.org/Home), [Firefox](https://www.mozilla.org/en-US/firefox/new/) and [WebKit](https://webkit.org/) with a single API. Playwright is built to enable cross-browser web automation that is **ever-green**, **capable**, **reliable**, and **fast**.
8
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
9
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
| | Linux | macOS | Windows |
10
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
| :--- | :---: | :---: | :---: |
11
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
| Chromium <!-- GEN:chromium-version -->145.0.7632.6<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
12
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
| WebKit <!-- GEN:webkit-version -->26.0<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
13
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
| Firefox <!-- GEN:firefox-version -->146.0.1<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
14
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
15
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
Headless execution is supported for all browsers on all platforms. Check out [system requirements](https://playwright.dev/docs/intro#system-requirements) for details.
16
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
17
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
Looking for Playwright for [Python](https://playwright.dev/python/docs/intro), [.NET](https://playwright.dev/dotnet/docs/intro), or [Java](https://playwright.dev/java/docs/intro)?
18
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
19
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
## Installation
20
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
21
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
Playwright has its own test runner for end-to-end tests, we call it Playwright Test.
22
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
23
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
### Using init command
24
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
25
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
The easiest way to get started with Playwright Test is to run the init command.
26
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
27
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
```Shell
28
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
# Run from your project's root directory
29
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
npm init playwright@latest
30
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
# Or create a new project
31
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
npm init playwright@latest new-project
32
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
```
33
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
34
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
This will create a configuration file, optionally add examples, a GitHub Action workflow and a first test example.spec.ts. You can now jump directly to writing assertions section.
35
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
36
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
### Manually
37
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
38
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
Add dependency and install browsers.
39
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
40
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
```Shell
41
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
npm i -D @playwright/test
42
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
# install supported browsers
43
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
npx playwright install
44
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
```
45
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
46
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
You can optionally install only selected browsers, see [install browsers](https://playwright.dev/docs/cli#install-browsers) for more details. Or you can install no browsers at all and use existing [browser channels](https://playwright.dev/docs/browsers).
47
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
48
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
* [Getting started](https://playwright.dev/docs/intro)
49
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
* [API reference](https://playwright.dev/docs/api/class-playwright)
50
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
51
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
## Capabilities
52
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
53
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
### Resilient • No flaky tests
54
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
55
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
**Auto-wait**. Playwright waits for elements to be actionable prior to performing actions. It also has a rich set of introspection events. The combination of the two eliminates the need for artificial timeouts - a primary cause of flaky tests.
56
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
57
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
**Web-first assertions**. Playwright assertions are created specifically for the dynamic web. Checks are automatically retried until the necessary conditions are met.
58
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
59
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
**Tracing**. Configure test retry strategy, capture execution trace, videos and screenshots to eliminate flakes.
60
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
61
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
### No trade-offs • No limits
62
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
63
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
Browsers run web content belonging to different origins in different processes. Playwright is aligned with the architecture of the modern browsers and runs tests out-of-process. This makes Playwright free of the typical in-process test runner limitations.
64
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
65
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
**Multiple everything**. Test scenarios that span multiple tabs, multiple origins and multiple users. Create scenarios with different contexts for different users and run them against your server, all in one test.
66
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
67
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
**Trusted events**. Hover elements, interact with dynamic controls and produce trusted events. Playwright uses real browser input pipeline indistinguishable from the real user.
68
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
69
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
Test frames, pierce Shadow DOM. Playwright selectors pierce shadow DOM and allow entering frames seamlessly.
70
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
71
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
### Full isolation • Fast execution
72
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
73
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
**Browser contexts**. Playwright creates a browser context for each test. Browser context is equivalent to a brand new browser profile. This delivers full test isolation with zero overhead. Creating a new browser context only takes a handful of milliseconds.
74
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
75
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
**Log in once**. Save the authentication state of the context and reuse it in all the tests. This bypasses repetitive log-in operations in each test, yet delivers full isolation of independent tests.
76
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
77
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
### Powerful Tooling
78
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
79
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
**[Codegen](https://playwright.dev/docs/codegen)**. Generate tests by recording your actions. Save them into any language.
80
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
81
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
**[Playwright inspector](https://playwright.dev/docs/inspector)**. Inspect page, generate selectors, step through the test execution, see click points and explore execution logs.
82
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
83
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
**[Trace Viewer](https://playwright.dev/docs/trace-viewer)**. Capture all the information to investigate the test failure. Playwright trace contains test execution screencast, live DOM snapshots, action explorer, test source and many more.
84
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
85
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
Looking for Playwright for [TypeScript](https://playwright.dev/docs/intro), [JavaScript](https://playwright.dev/docs/intro), [Python](https://playwright.dev/python/docs/intro), [.NET](https://playwright.dev/dotnet/docs/intro), or [Java](https://playwright.dev/java/docs/intro)?
86
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
87
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
## Examples
88
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
89
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
To learn how to run these Playwright Test examples, check out our [getting started docs](https://playwright.dev/docs/intro).
90
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
91
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
#### Page screenshot
92
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
93
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
This code snippet navigates to Playwright homepage and saves a screenshot.
94
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
95
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
```TypeScript
96
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
import { test } from '@playwright/test';
97
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
98
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
test('Page Screenshot', async ({ page }) => {
99
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
await page.goto('https://playwright.dev/');
100
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
await page.screenshot({ path: `example.png` });
101
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
});
102
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
```
103
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
104
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
#### Mobile and geolocation
105
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
106
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
This snippet emulates Mobile Safari on a device at given geolocation, navigates to maps.google.com, performs the action and takes a screenshot.
107
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
108
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
```TypeScript
109
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
import { test, devices } from '@playwright/test';
110
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
111
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
test.use({
112
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
...devices['iPhone 13 Pro'],
113
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
locale: 'en-US',
114
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
geolocation: { longitude: 12.492507, latitude: 41.889938 },
115
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
permissions: ['geolocation'],
116
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
})
117
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
118
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
test('Mobile and geolocation', async ({ page }) => {
119
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
await page.goto('https://maps.google.com');
120
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
await page.getByText('Your location').click();
121
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
await page.waitForRequest(/.*preview\/pwa/);
122
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
await page.screenshot({ path: 'colosseum-iphone.png' });
123
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
});
124
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
```
125
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
126
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
#### Evaluate in browser context
127
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
128
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
This code snippet navigates to example.com, and executes a script in the page context.
129
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
130
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
```TypeScript
131
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
import { test } from '@playwright/test';
132
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
133
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
test('Evaluate in browser context', async ({ page }) => {
134
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
await page.goto('https://www.example.com/');
135
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
const dimensions = await page.evaluate(() => {
136
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
return {
137
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
width: document.documentElement.clientWidth,
138
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
height: document.documentElement.clientHeight,
139
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
deviceScaleFactor: window.devicePixelRatio
140
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
}
141
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
});
142
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
console.log(dimensions);
143
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
});
144
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
```
145
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
146
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
#### Intercept network requests
147
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
148
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
This code snippet sets up request routing for a page to log all network requests.
149
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
150
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
```TypeScript
151
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
import { test } from '@playwright/test';
152
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
153
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
test('Intercept network requests', async ({ page }) => {
154
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
// Log and continue all network requests
155
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
await page.route('**', route => {
156
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
console.log(route.request().url());
157
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
route.continue();
158
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
});
159
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
await page.goto('http://todomvc.com');
160
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
});
161
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
```
162
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
163
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
## Resources
164
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
165
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
* [Documentation](https://playwright.dev)
166
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
* [API reference](https://playwright.dev/docs/api/class-playwright/)
167
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
* [Contribution guide](CONTRIBUTING.md)
168
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!
* [Changelog](https://github.com/microsoft/playwright/releases)
169
{ copied = false; pop = false }, 1000)" :class="copied && 'copied'">
Copy link Copied!