playwright/docs/src/library-js.md

id	title
library	Library

Playwright Library provides unified APIs for launching and interacting with browsers, while Playwright Test provides all this plus a fully managed end-to-end Test Runner and experience.

Under most circumstances, for end-to-end testing, you'll want to use @playwright/test (Playwright Test), and not playwright (Playwright Library) directly. To get started with Playwright Test, follow its Getting Started Guide.

• Release notes

When Should Playwright Library Be Used Directly?

• creating an integration for a third party test runner (e.g. the third-party runner plugins listed here are built on top of Playwright Library)
• automation and scraping

Differences

Library Example

The following is an example of using the Playwright Library directly to launch Chromium, go to a page, and check its title:

import playwright, { devices } from 'playwright';

(async () => {
  // Setup
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext(devices['iPhone 11']);
  const page = await context.newPage();

  // The actual interesting bit
  await context.route('**.jpg', route => route.abort());
  await page.goto('https://example.com/');

  assert(await page.title() === 'Example'); // 👎 not a Web First assertion

  // Teardown
  await context.close();
  await browser.close();
})()

const playwright = require('playwright');

(async () => {
  // Setup
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext(devices['iPhone 11']);
  const page = await context.newPage();

  // The actual interesting bit
  await context.route('**.jpg', route => route.abort());
  await page.goto('https://example.com/');

  assert(await page.title() === 'Example'); // 👎 not a Web First assertion

  // Teardown
  await context.close();
  await browser.close();
})()

Run via:

node ./my-script.ts

node ./my-script.js

Test Example

A test to achieve similar behavior, would look like:

import { expect, test, devices } from '@playwright/test';

test.use(devices['iPhone 11']);

test('should be titled', async ({ page, context }) => {
  await context.route('**.jpg', route => route.abort());
  await page.goto('https://example.com/');

  await expect(page).toHaveTitle('Example');
});

const { expect, test, devices } = require('@playwright/test');

test.use(devices['iPhone 11']);

test('should be titled', async ({ page, context }) => {
  await context.route('**.jpg', route => route.abort());
  await page.goto('https://example.com/');

  await expect(page).toHaveTitle('Example');
});

Run via:

npx playwright test

Key Differences

The key differences to note are as follows:

	Library	Test
Installation	npm install playwright	npm init playwright@latest (note install vs. init)
import/require name	playwright	@playwright/test
Initialization	Explicitly need to: Pick a browser to use (e.g. chromium) Create browser ([method: BrowserType.launch]) Create a context ([method: Browser.newContext]), and pass any context options explcitly (e.g. devices['iPhone 11'] Create a page ([method: BrowserContext.newPage])	An isolated page and context are provided to each test out-of the box (along with any other built-in fixtures). No explicit creation. If referenced by the test in it's arguments, the Test Runner will create them for the test. (i.e. lazy-initialization)
Assertions	No built-in Web-First Assertions	Web-First assertions like: [method: PageAssertions.toHaveTitle] [method: PageAssertions.toHaveScreenshot#1] which auto-wait and retry for the condition to be met.
Cleanup	Explicitly need to: Close context ([method: BrowserContext.close]) Close browser ([method: Browser.close])	No explicit close of built-in fixtures; the Test Runner will take care of it.
Running	When using the Library, you run the code as a node script (possibly with some compilation first).	When using the Test Runner, you use the npx playwright test command. Along with your config), the Test Runner handles any compilation and choosing what to run and how to run it.

In addition to the above, Playwright Test—as a full-featured Test Runner—includes:

• Configuration Matrix and Projects: In the above example, in the Playwright Library version, if we wanted to run with a different device or browser, we'd have to modify the script and plumb the information through. With Playwright Test, we can just specify the matrix of configurations in one place, and it will create run the one test under each of these configurations.
• Parallelization
• Web-First Assertions
• Reporting
• Retries
• Easily Enabled Tracing
• and more…

Usage

Use npm or Yarn to install Playwright library 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 managing browsers.

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. Learn more in the debugging tools section.

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

Record scripts

Command line tools can be used to record user interactions and generate JavaScript code.

npx playwright 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;