mirror of
https://github.com/microsoft/playwright.git
synced 2024-12-15 06:02:57 +03:00
140 lines
5.2 KiB
Markdown
140 lines
5.2 KiB
Markdown
# 🎭 Playwright
|
|
|
|
[](https://www.npmjs.com/package/playwright) [](https://join.slack.com/t/playwright/shared_invite/enQtOTEyMTUxMzgxMjIwLThjMDUxZmIyNTRiMTJjNjIyMzdmZDA3MTQxZWUwZTFjZjQwNGYxZGM5MzRmNzZlMWI5ZWUyOTkzMjE5Njg1NDg) <!-- 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/)
|
|
|
|
##### [Docs](docs/README.md) | [API reference](docs/api.md) | [Changelog](https://github.com/microsoft/playwright/releases)
|
|
|
|
Playwright is a Node library to automate [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**.
|
|
|
|
| | Linux | macOS | Windows |
|
|
| :--- | :---: | :---: | :---: |
|
|
| Chromium <!-- GEN:chromium-version -->84.0.4135.0<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
|
|
| WebKit 13.0.4 | :white_check_mark: | :white_check_mark: | :white_check_mark: |
|
|
| Firefox <!-- GEN:firefox-version -->76.0b5<!-- GEN:stop --> | :white_check_mark: | :white_check_mark: | :white_check_mark: |
|
|
|
|
Headless execution is supported for all the browsers on all platforms.
|
|
|
|
## Usage
|
|
|
|
```
|
|
npm i playwright
|
|
```
|
|
|
|
This installs Playwright and browser binaries for Chromium, Firefox and WebKit. Once installed, you can `require` Playwright in a Node.js script and automate web browser interactions.
|
|
|
|
* [Getting started](docs/intro.md)
|
|
* [Installation configuration](docs/installation.md)
|
|
* [API reference](docs/api.md)
|
|
|
|
## Capabilities
|
|
|
|
Playwright is built to automate the broad and growing set of web browser capabilities used by Single Page Apps and Progressive Web Apps.
|
|
|
|
* Scenarios that span multiple page, domains and iframes
|
|
* Auto-wait for elements to be ready before executing actions (like click, fill)
|
|
* Intercept network activity for stubbing and mocking network requests
|
|
* Emulate mobile devices, geolocation, permissions
|
|
* Native input events for mouse and keyboard
|
|
* Upload and download files
|
|
|
|
## Examples
|
|
|
|
#### Page screenshot
|
|
|
|
This code snippet navigates to whatsmyuseragent.org in Chromium, Firefox and WebKit, and saves 3 screenshots.
|
|
|
|
```js
|
|
const playwright = require('playwright');
|
|
|
|
(async () => {
|
|
for (const browserType of ['chromium', 'firefox', 'webkit']) {
|
|
const browser = await playwright[browserType].launch();
|
|
const context = await browser.newContext();
|
|
const page = await context.newPage();
|
|
await page.goto('http://whatsmyuseragent.org/');
|
|
await page.screenshot({ path: `example-${browserType}.png` });
|
|
await browser.close();
|
|
}
|
|
})();
|
|
```
|
|
|
|
#### Mobile and geolocation
|
|
|
|
This snippet emulates Mobile Safari on a device at a given geolocation, navigates to maps.google.com, performs action and takes a screenshot.
|
|
|
|
```js
|
|
const { webkit, devices } = require('playwright');
|
|
const iPhone11 = devices['iPhone 11 Pro'];
|
|
|
|
(async () => {
|
|
const browser = await webkit.launch();
|
|
const context = await browser.newContext({
|
|
...iPhone11,
|
|
geolocation: { longitude: 12.492507, latitude: 41.889938 },
|
|
permissions: ['geolocation']
|
|
});
|
|
const page = await context.newPage();
|
|
await page.goto('https://maps.google.com');
|
|
await page.click('text="Your location"');
|
|
await page.waitForRequest(/.*preview\/pwa/);
|
|
await page.screenshot({ path: 'colosseum-iphone.png' });
|
|
await browser.close();
|
|
})();
|
|
```
|
|
|
|
#### Evaluate in browser context
|
|
|
|
This code snippet navigates to example.com in Firefox, and executes a script in the page context.
|
|
|
|
```js
|
|
const { firefox } = require('playwright');
|
|
|
|
(async () => {
|
|
const browser = await firefox.launch();
|
|
const context = await browser.newContext();
|
|
const page = await context.newPage();
|
|
await page.goto('https://www.example.com/');
|
|
const dimensions = await page.evaluate(() => {
|
|
return {
|
|
width: document.documentElement.clientWidth,
|
|
height: document.documentElement.clientHeight,
|
|
deviceScaleFactor: window.devicePixelRatio
|
|
}
|
|
})
|
|
console.log(dimensions);
|
|
|
|
await browser.close();
|
|
})();
|
|
```
|
|
|
|
#### Intercept network requests
|
|
|
|
This code snippet sets up request routing for a WebKit page to log all network requests.
|
|
|
|
```js
|
|
const { webkit } = require('playwright');
|
|
|
|
(async () => {
|
|
const browser = await webkit.launch();
|
|
const context = await browser.newContext();
|
|
const page = await context.newPage();
|
|
|
|
// Log and continue all network requests
|
|
page.route('**', route => {
|
|
console.log(route.request().url());
|
|
route.continue();
|
|
});
|
|
|
|
await page.goto('http://todomvc.com');
|
|
await browser.close();
|
|
})();
|
|
```
|
|
|
|
## Resources
|
|
|
|
* [Documentation](docs/README.md)
|
|
* [API reference](docs/api.md)
|
|
* [Example recipes](docs/examples/README.md)
|
|
* [Contributing](CONTRIBUTING.md)
|
|
* [Community showcase](docs/showcase.md)
|