playwright/docs/intro.md
Arjun Attam 777689a96a
docs(intro): add cli to getting started (#3821)
* docs(intro): add cli to getting started

* fix doclint
2020-09-09 17:32:49 -07:00

3.4 KiB

Getting Started

Installation

Use npm or Yarn to install Playwright in your Node.js project. See system requirements.

npm i -D playwright

This single command downloads the Playwright NPM package and browser binaries for Chromium, Firefox and WebKit. To modify this behavior see installation parameters.

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 ease readability. 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

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 });

Record scripts

Playwright CLI can be used to record user interactions and generate JavaScript code.

npx playwright-cli codegen wikipedia.org

TypeScript support

Playwright includes built-in support for TypeScript. Type definitions will be imported automatically. It is recommended to use type-checking to improve the IDE experience.

In JavaScript

Add the following to the top of your JavaScript file to get type-checking in VS Code or WebStorm.

//@ts-check
// ...

Alternatively, you can use JSDoc to set types for variables.

/** @type {import('playwright').Page} */
let page;

In TypeScript

TypeScript support will work out-of-the-box. Types can also be imported explicitly.

let page: import('playwright').Page;

System requirements

Playwright requires Node.js version 10.17 or above. The browser binaries for Chromium, Firefox and WebKit work across the 3 platforms (Windows, macOS, Linux):

  • Windows: Works with Windows and Windows Subsystem for Linux (WSL).
  • macOS: Requires 10.14 or above.
  • Linux: Depending on your Linux distribution, you might need to install additional dependencies to run the browsers.
    • Firefox requires Ubuntu 18.04+
    • For Ubuntu 18.04, the additional dependencies are defined in our Docker image, which is based on Ubuntu.