Playwright is a Node.js 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 89.0.4328.0 | ✅ | ✅ | ✅ |
| WebKit 14.0 | ✅ | ✅ | ✅ |
| Firefox 83.0b8 | ✅ | ✅ | ✅ |
Headless execution is supported for all the browsers on all platforms. Check out system requirements for details.
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.
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
This code snippet navigates to whatsmyuseragent.org in Chromium, Firefox and WebKit, and saves 3 screenshots.
constplaywright=require('playwright');(async()=>{for(constbrowserTypeof['chromium','firefox','webkit']){constbrowser=awaitplaywright[browserType].launch();constcontext=awaitbrowser.newContext();constpage=awaitcontext.newPage();awaitpage.goto('http://whatsmyuseragent.org/');awaitpage.screenshot({path: `example-${browserType}.png`});awaitbrowser.close();}})();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');constiPhone11=devices['iPhone 11 Pro'];(async()=>{constbrowser=awaitwebkit.launch();constcontext=awaitbrowser.newContext({
...iPhone11,locale: 'en-US',geolocation: {longitude: 12.492507,latitude: 41.889938},permissions: ['geolocation']});constpage=awaitcontext.newPage();awaitpage.goto('https://maps.google.com');awaitpage.click('text="Your location"');awaitpage.waitForRequest(/.*preview\/pwa/);awaitpage.screenshot({path: 'colosseum-iphone.png'});awaitbrowser.close();})();This code snippet navigates to example.com in Firefox, and executes a script in the page context.
const{ firefox }=require('playwright');(async()=>{constbrowser=awaitfirefox.launch();constcontext=awaitbrowser.newContext();constpage=awaitcontext.newPage();awaitpage.goto('https://www.example.com/');constdimensions=awaitpage.evaluate(()=>{return{width: document.documentElement.clientWidth,height: document.documentElement.clientHeight,deviceScaleFactor: window.devicePixelRatio}});console.log(dimensions);awaitbrowser.close();})();This code snippet sets up request routing for a WebKit page to log all network requests.
const{ webkit }=require('playwright');(async()=>{constbrowser=awaitwebkit.launch();constcontext=awaitbrowser.newContext();constpage=awaitcontext.newPage();// Log and continue all network requestspage.route('**',route=>{console.log(route.request().url());route.continue();});awaitpage.goto('http://todomvc.com');awaitbrowser.close();})();