intro.md

Introduction

What is Playwright?

Playwright is a cross-browser automation driver for end-to-end testing. Playwright provides an API to launch web browsers, navigate to web pages and manipulate page contents in JavaScript.

The Playwright API is cross-browser: it works across Chromium (used in Chrome, Edge, and many other browsers), Firefox and WebKit (used in Safari) engines.

Playwright is free and open source. Playwright is also modular, and work with any JavaScript test runner framework.

Capabilities

Playwright can run automation scenarios that span multiple tabs, domains and iframes. More specifically, Playwright can:

• 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

Getting started

Installation

Use npm or Yarn to install Playwright in your Node.js project. Playwright requires Node.js 10 or higher.

npm i playwright

During installation, Playwright downloads browser binaries for Chromium, Firefox and WebKit. This sets up your environment for browser automation with just one command. It is possible to modify this default behavior for monorepos and other scenarios through environment variables.

Usage

Once installed, you can require Playwright in a Node.js script, and launch any of the 3 browsers (chromium, firefox and webkit).

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  // Create pages, interact with UI elements, assert values
  await browser.close();
})();

Playwright APIs are asynchronous and return Promise objects. Our code examples use the async/await pattern to simplify comprehension. The code is wrapped in an unnamed async arrow function which is invoking itself.

(async () => { // Start of async arrow function
  // Function code
  // ...
})(); // End of the function and () to invoke itself

Writing your first script

In our first script, we will navigate to whatsmyuseragent.org and take a screenshot in WebKit.

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch();
  const page = await browser.newPage();
  await page.goto('http://whatsmyuseragent.org/');
  await page.screenshot({ path: `example.png` });
  await browser.close();
})();

By default, Playwright runs the browsers in headless mode. To see the browser UI, pass the headless: false flag while launching the browser. You can also use slowMo to slow down execution.

firefox.launch({ headless: false, slowMo: 50 });

Debugging scripts

Playwright scripts can be developed just like any other Node.js script. For example, you can use the Node.js debugger or VS Code debugging to set breakpoints and get fine grained control over execution.

It is also possible to open browser developer tools during execution, to inspect the DOM tree or network activity.