loading...

What is Playwright? - Browser automatisation made easy

mxschmitt profile image Max Schmitt Updated on ・3 min read

Over the past 3 years where the Puppeteer ecosystem has evolved and developers around the globe have adopted the framework to automate their browsers, the framework has gained a lot of popularity. Puppeteer itself has now over 60k stars on GitHub and is by that one of the most starred projects on the platform. Due the big audience and the people who integrated it into their projects to use it e.g. to perform end-to-end tests or create automated screenshots, Puppeteer reached his limitations. The community asked for better browser support, for this specific request they delivered puppeteer-firefox which was announced at the Google I/O 2019. But also smaller core concept changes would ease up the usage like less flakiness by waiting automatically if an element appears on the page or isolating the session on a context instead of the whole browser to provide better reusability.

For all of that the core team which is now primarily working at Microsoft has worked over the past few months and released on January 2020 the first version of Playwright. It has features like:

  • 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

Until now (June 2020) the project already got 13k stars on GitHub and big projects like Visual Studio Code, CodeceptJS or xterm.js have adopted it.


Star history Playwright Q1 2020

The usage of Playwright is extremely straightforward. Most of the calls are async based, that means you have to wrap them either in a Promise or you have to use async/await which is the more common way.

const playwright = require("playwright");

(async () => {
  for (const browserType of ['chromium', 'webkit', 'firefox']) {
    const browser = await playwright[browserType].launch();
    const page = await context.newPage();
    await page.goto('http://whatsmyuseragent.org/');
    await page.screenshot({ path: `example-${browserType}.png` });
    await browser.close();
  }
})();

After importing the library we're gonna loop over the different browsers and launch them as headless browsers. Launching means in Playwright wording, that a real browser instance will be opened as a headless instance per default. Once we have our browser we are creating an actual page object out of it. With the page you can interact by clicking on buttons, making screenshots, getting text out of your DOM Nodes, or navigating to other URLs for example. In this case we are visiting a website and then making a screenshot which we store on the disk including the browser's name. Once we are done we'll close the whole browser.

If you want to find out more about Playwright, you can check out the examples with Try Playwright to get an interactive experience of how the different browser engines behave.

Due to all of that it can be advised for further usage to use Playwright instead of Puppeteer. The API is in most cases the same or only slightly different. Here you can find a migration guide with the differences. And an official link to their documentation including the JavaScript API you can find under playwright.dev.

GitHub logo microsoft / playwright

Node.js library to automate Chromium, Firefox and WebKit with a single API

🎭 Playwright

npm version Join Slack Chromium version Firefox version WebKit version

Documentation | API reference

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 86.0.4238.0 βœ… βœ… βœ…
WebKit 14.0 βœ… βœ… βœ…
Firefox 80.0b8 βœ… βœ… βœ…

Headless execution is supported for all the browsers on all platforms. Check out system requirements for details.

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…

Posted on by:

mxschmitt profile

Max Schmitt

@mxschmitt

Open Source enthusiast, security researcher and full stack web developer.

Discussion

markdown guide