|
1 |
| -# 🎭 Playwright |
2 |
| -[](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 --> [](https://webkit.org/) [](https://join.slack.com/t/playwright/shared_invite/enQtOTEyMTUxMzgxMjIwLThjMDUxZmIyNTRiMTJjNjIyMzdmZDA3MTQxZWUwZTFjZjQwNGYxZGM5MzRmNzZlMWI5ZWUyOTkzMjE5Njg1NDg) |
3 |
| - |
4 |
| -###### [API](https://github.com/microsoft/playwright/blob/master/docs/api.md) | [Changelog](https://github.com/microsoft/playwright/releases) | [Contributing](#contributing) |
5 |
| - |
6 |
| - |
7 |
| -Playwright is a Node library to automate the [Chromium](https://www.chromium.org/Home), [WebKit](https://webkit.org/) and [Firefox](https://www.mozilla.org/en-US/firefox/new/) browsers with a single API. It enables **cross-browser** web automation that is **ever-green**, **capable**, **reliable** and **fast**. |
8 |
| - |
9 |
| -| | ver | Linux | macOS | Win | |
10 |
| -| ---: | :---: | :---: | :---: | :---: | |
11 |
| -| Chromium| <!-- GEN:chromium-version -->84.0.4117.0<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: | |
12 |
| -| WebKit | 13.0.4 | :white_check_mark: | :white_check_mark: | :white_check_mark: | |
13 |
| -| Firefox | <!-- GEN:firefox-version -->76.0b5<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: | |
14 |
| -- Headless is supported for all the browsers on all platforms. |
15 |
| - |
16 |
| - |
17 |
| -Our primary goal with Playwright is to improve automated UI testing by eliminating flakiness, improving the speed of execution and offering insights into the browser operation. |
18 |
| - |
19 |
| -### Usage |
20 |
| - |
21 |
| -``` |
22 |
| -npm i playwright |
23 |
| -``` |
24 |
| - |
25 |
| -This installs Playwright along with its dependencies and the browser binaries. Browser binaries are about 50-100MB each, so expect the installation network traffic to be substantial. |
26 |
| - |
27 |
| -Once installed, Playwright can be used to create a browser instance, open pages and then automate interactions. |
28 |
| - |
29 |
| -* [Documentation](docs/README.md) |
30 |
| -* [API reference](docs/api.md) |
31 |
| - |
32 |
| -### Examples |
33 |
| - |
34 |
| -#### Page screenshot |
35 |
| - |
36 |
| -This code snippet navigates to whatsmyuseragent.org in Chromium, Firefox and WebKit, and saves 3 screenshots. |
37 |
| - |
38 |
| -```js |
39 |
| -const playwright = require('playwright'); |
40 |
| - |
41 |
| -(async () => { |
42 |
| - for (const browserType of ['chromium', 'firefox', 'webkit']) { |
43 |
| - const browser = await playwright[browserType].launch(); |
44 |
| - const context = await browser.newContext(); |
45 |
| - const page = await context.newPage(); |
46 |
| - await page.goto('http://whatsmyuseragent.org/'); |
47 |
| - await page.screenshot({ path: `example-${browserType}.png` }); |
48 |
| - await browser.close(); |
49 |
| - } |
50 |
| -})(); |
51 |
| -``` |
52 |
| - |
53 |
| -#### Mobile and geolocation |
54 |
| - |
55 |
| -This snippet emulates Mobile Safari on a device at a given geolocation, navigates to maps.google.com, performs action and takes a screenshot. |
56 |
| - |
57 |
| -```js |
58 |
| -const { webkit, devices } = require('playwright'); |
59 |
| -const iPhone11 = devices['iPhone 11 Pro']; |
60 |
| - |
61 |
| -(async () => { |
62 |
| - const browser = await webkit.launch(); |
63 |
| - const context = await browser.newContext({ |
64 |
| - ...iPhone11, |
65 |
| - geolocation: { longitude: 12.492507, latitude: 41.889938 }, |
66 |
| - permissions: ['geolocation'] |
67 |
| - }); |
68 |
| - const page = await context.newPage(); |
69 |
| - await page.goto('https://maps.google.com'); |
70 |
| - await page.click('text="Your location"'); |
71 |
| - await page.waitForRequest(/.*preview\/pwa/); |
72 |
| - await page.screenshot({ path: 'colosseum-iphone.png' }); |
73 |
| - await browser.close(); |
74 |
| -})(); |
75 |
| -``` |
76 |
| - |
77 |
| -#### Evaluate in browser context |
78 |
| - |
79 |
| -This code snippet navigates to example.com in Firefox, and executes a script in the page context. |
80 |
| - |
81 |
| -```js |
82 |
| -const { firefox } = require('playwright'); |
83 |
| - |
84 |
| -(async () => { |
85 |
| - const browser = await firefox.launch(); |
86 |
| - const context = await browser.newContext(); |
87 |
| - const page = await context.newPage(); |
88 |
| - await page.goto('https://www.example.com/'); |
89 |
| - const dimensions = await page.evaluate(() => { |
90 |
| - return { |
91 |
| - width: document.documentElement.clientWidth, |
92 |
| - height: document.documentElement.clientHeight, |
93 |
| - deviceScaleFactor: window.devicePixelRatio |
94 |
| - } |
95 |
| - }) |
96 |
| - console.log(dimensions); |
97 |
| - |
98 |
| - await browser.close(); |
99 |
| -})(); |
100 |
| -``` |
101 |
| - |
102 |
| -#### Intercept network requests |
103 |
| - |
104 |
| -This code snippet sets up request routing for a WebKit page to log all network requests. |
105 |
| - |
106 |
| -```js |
107 |
| -const { webkit } = require('playwright'); |
108 |
| - |
109 |
| -(async () => { |
110 |
| - const browser = await webkit.launch(); |
111 |
| - const context = await browser.newContext(); |
112 |
| - const page = await context.newPage(); |
113 |
| - |
114 |
| - // Log and continue all network requests |
115 |
| - page.route('**', route => { |
116 |
| - console.log(route.request().url()); |
117 |
| - route.continue(); |
118 |
| - }); |
119 |
| - |
120 |
| - await page.goto('http://todomvc.com'); |
121 |
| - await browser.close(); |
122 |
| -})(); |
123 |
| -``` |
124 |
| - |
125 |
| -## Contributing |
126 |
| - |
127 |
| -Check out our [contributing guide](https://github.com/microsoft/playwright/blob/master/CONTRIBUTING.md). |
128 |
| - |
129 |
| -## Resources |
130 |
| - |
131 |
| -* [Documentation](docs/README.md) |
132 |
| -* [Example recipes](docs/examples/README.md) |
133 |
| -* [API reference](docs/api.md) |
134 |
| -* [Community showcase](docs/showcase.md) |
| 1 | +# 🎭 Playwright |
| 2 | +[](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 --> [](https://webkit.org/) [](https://join.slack.com/t/playwright/shared_invite/enQtOTEyMTUxMzgxMjIwLThjMDUxZmIyNTRiMTJjNjIyMzdmZDA3MTQxZWUwZTFjZjQwNGYxZGM5MzRmNzZlMWI5ZWUyOTkzMjE5Njg1NDg) |
| 3 | + |
| 4 | +###### [Docs](https://github.com/microsoft/playwright/blob/master/docs/README.md) | [API](https://github.com/microsoft/playwright/blob/master/docs/api.md) | [Changelog](https://github.com/microsoft/playwright/releases) | [Contributing](#contributing) |
| 5 | + |
| 6 | + |
| 7 | +Playwright is a Node library to automate the [Chromium](https://www.chromium.org/Home), [WebKit](https://webkit.org/) and [Firefox](https://www.mozilla.org/en-US/firefox/new/) browsers with a single API. It enables **cross-browser** web automation that is **ever-green**, **capable**, **reliable** and **fast**. |
| 8 | + |
| 9 | +| | Linux | macOS | Win | |
| 10 | +| ---: | :---: | :---: | :---: | |
| 11 | +| Chromium <!-- GEN:chromium-version -->84.0.4117.0<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: | |
| 12 | +| WebKit 13.0.4 | :white_check_mark: | :white_check_mark: | :white_check_mark: | |
| 13 | +| Firefox <!-- GEN:firefox-version -->76.0b5<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: | |
| 14 | +- Headless is supported for all the browsers on all platforms. |
| 15 | + |
| 16 | + |
| 17 | +Our primary goal with Playwright is to improve automated UI testing by eliminating flakiness, improving the speed of execution and offering insights into the browser operation. |
| 18 | + |
| 19 | +### Usage |
| 20 | + |
| 21 | +``` |
| 22 | +npm i playwright |
| 23 | +``` |
| 24 | + |
| 25 | +This installs Playwright along with its dependencies and the browser binaries. Browser binaries are about 50-100MB each, so expect the installation network traffic to be substantial. |
| 26 | + |
| 27 | +Once installed, Playwright can be used to create a browser instance, open pages and then automate interactions. |
| 28 | + |
| 29 | +* [Documentation](docs/README.md) |
| 30 | +* [API reference](docs/api.md) |
| 31 | + |
| 32 | +### Examples |
| 33 | + |
| 34 | +#### Page screenshot |
| 35 | + |
| 36 | +This code snippet navigates to whatsmyuseragent.org in Chromium, Firefox and WebKit, and saves 3 screenshots. |
| 37 | + |
| 38 | +```js |
| 39 | +const playwright = require('playwright'); |
| 40 | + |
| 41 | +(async () => { |
| 42 | + for (const browserType of ['chromium', 'firefox', 'webkit']) { |
| 43 | + const browser = await playwright[browserType].launch(); |
| 44 | + const context = await browser.newContext(); |
| 45 | + const page = await context.newPage(); |
| 46 | + await page.goto('http://whatsmyuseragent.org/'); |
| 47 | + await page.screenshot({ path: `example-${browserType}.png` }); |
| 48 | + await browser.close(); |
| 49 | + } |
| 50 | +})(); |
| 51 | +``` |
| 52 | + |
| 53 | +#### Mobile and geolocation |
| 54 | + |
| 55 | +This snippet emulates Mobile Safari on a device at a given geolocation, navigates to maps.google.com, performs action and takes a screenshot. |
| 56 | + |
| 57 | +```js |
| 58 | +const { webkit, devices } = require('playwright'); |
| 59 | +const iPhone11 = devices['iPhone 11 Pro']; |
| 60 | + |
| 61 | +(async () => { |
| 62 | + const browser = await webkit.launch(); |
| 63 | + const context = await browser.newContext({ |
| 64 | + ...iPhone11, |
| 65 | + geolocation: { longitude: 12.492507, latitude: 41.889938 }, |
| 66 | + permissions: ['geolocation'] |
| 67 | + }); |
| 68 | + const page = await context.newPage(); |
| 69 | + await page.goto('https://maps.google.com'); |
| 70 | + await page.click('text="Your location"'); |
| 71 | + await page.waitForRequest(/.*preview\/pwa/); |
| 72 | + await page.screenshot({ path: 'colosseum-iphone.png' }); |
| 73 | + await browser.close(); |
| 74 | +})(); |
| 75 | +``` |
| 76 | + |
| 77 | +#### Evaluate in browser context |
| 78 | + |
| 79 | +This code snippet navigates to example.com in Firefox, and executes a script in the page context. |
| 80 | + |
| 81 | +```js |
| 82 | +const { firefox } = require('playwright'); |
| 83 | + |
| 84 | +(async () => { |
| 85 | + const browser = await firefox.launch(); |
| 86 | + const context = await browser.newContext(); |
| 87 | + const page = await context.newPage(); |
| 88 | + await page.goto('https://www.example.com/'); |
| 89 | + const dimensions = await page.evaluate(() => { |
| 90 | + return { |
| 91 | + width: document.documentElement.clientWidth, |
| 92 | + height: document.documentElement.clientHeight, |
| 93 | + deviceScaleFactor: window.devicePixelRatio |
| 94 | + } |
| 95 | + }) |
| 96 | + console.log(dimensions); |
| 97 | + |
| 98 | + await browser.close(); |
| 99 | +})(); |
| 100 | +``` |
| 101 | + |
| 102 | +#### Intercept network requests |
| 103 | + |
| 104 | +This code snippet sets up request routing for a WebKit page to log all network requests. |
| 105 | + |
| 106 | +```js |
| 107 | +const { webkit } = require('playwright'); |
| 108 | + |
| 109 | +(async () => { |
| 110 | + const browser = await webkit.launch(); |
| 111 | + const context = await browser.newContext(); |
| 112 | + const page = await context.newPage(); |
| 113 | + |
| 114 | + // Log and continue all network requests |
| 115 | + page.route('**', route => { |
| 116 | + console.log(route.request().url()); |
| 117 | + route.continue(); |
| 118 | + }); |
| 119 | + |
| 120 | + await page.goto('http://todomvc.com'); |
| 121 | + await browser.close(); |
| 122 | +})(); |
| 123 | +``` |
| 124 | + |
| 125 | +## Contributing |
| 126 | + |
| 127 | +Check out our [contributing guide](https://github.com/microsoft/playwright/blob/master/CONTRIBUTING.md). |
| 128 | + |
| 129 | +## Resources |
| 130 | + |
| 131 | +* [Documentation](docs/README.md) |
| 132 | +* [Example recipes](docs/examples/README.md) |
| 133 | +* [API reference](docs/api.md) |
| 134 | +* [Community showcase](docs/showcase.md) |
0 commit comments