ece4789165
- playwright.$ and playwright.$$ to query elements; - playwright.inspect to reveal an element; - playwright.clear to remove highlight. |
||
---|---|---|
.circleci | ||
.github | ||
browser_patches | ||
docs | ||
packages | ||
src | ||
test | ||
utils | ||
.appveyor.yml | ||
.cirrus.yml | ||
.editorconfig | ||
.eslintignore | ||
.eslintrc.js | ||
.gitattributes | ||
.gitignore | ||
.npmignore | ||
.travis.yml | ||
browsers.json | ||
CODE_OF_CONDUCT.md | ||
CONTRIBUTING.md | ||
index.d.ts | ||
index.js | ||
install-from-github.js | ||
LICENSE | ||
NOTICE | ||
package-lock.json | ||
package.json | ||
README.md | ||
SECURITY.md | ||
tsconfig.json |
🎭 Playwright
Docs | API reference | Changelog
Playwright is a Node library to automate Chromium, Firefox and WebKit 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 84.0.4144.0 | ✅ | ✅ | ✅ |
WebKit 13.2 | ✅ | ✅ | ✅ |
Firefox 77.0b3 | ✅ | ✅ | ✅ |
Headless execution is supported for all the browsers on all platforms.
Usage
npm i -D 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.
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
- Support for web components via shadow-piercing selectors
- 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.
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.
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.
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.
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();
})();