playwright 1.16.0 on Node.js Yarn

🎭 Playwright Test

API Testing

Playwright 1.16 introduces new API Testing that lets you send requests to the server directly from Node.js!
Now you can:

test your server API
prepare server side state before visiting the web application in a test
validate server side post-conditions after running some actions in the browser

To do a request on behalf of Playwright's Page, use new page.request API:

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

test('context fetch', async ({ page }) => {
  // Do a GET request on behalf of page
  const response = await page.request.get('http://example.com/foo.json');
  // ... 
});

To do a stand-alone request from node.js to an API endpoint, use new request fixture:

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

test('context fetch', async ({ request }) => {
  // Do a GET request on behalf of page
  const response = await request.get('http://example.com/foo.json');
  // ... 
});

Read more about it in our API testing guide.

Response Interception

It is now possible to do response interception by combining API Testing with request interception.

For example, we can blur all the images on the page:

import { test, expect } from '@playwright/test';
import jimp from 'jimp'; // image processing library

test('response interception', async ({ page }) => {
  await page.route('**/*.jpeg', async route => {
    const response = await page._request.fetch(route.request());
    const image = await jimp.read(await response.body());
    await image.blur(5);
    route.fulfill({
      response,
      body: await image.getBufferAsync('image/jpeg'),
    });
  });
  const response = await page.goto('https://playwright.dev');
  expect(response.status()).toBe(200);
});

New HTML reporter

Try it out new HTML reporter with either --reporter=html or a reporter entry
in playwright.config.ts file:

$ npx playwright test --reporter=html

The HTML reporter has all the information about tests and their failures, including surfacing
trace and image artifacts.

🎭 Playwright Library

locator.waitFor

Wait for a locator to resolve to a single element with a given state.
Defaults to the state: 'visible'.

Comes especially handy when working with lists:

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

test('context fetch', async ({ page }) => {
  const completeness = page.locator('text=Success');
  await completeness.waitFor();
  expect(await page.screenshot()).toMatchSnapshot('screen.png');
});

🎭 Playwright Trace Viewer

web-first assertions inside trace viewer
run trace viewer with npx playwright show-trace and drop trace files to the trace viewer PWA
API testing is integrated with trace viewer
better visual attribution of action targets

Browser Versions

Chromium 97.0.4666.0
Mozilla Firefox 93.0
WebKit 15.4

This version of Playwright was also tested against the following stable channels:

Google Chrome 94
Microsoft Edge 94

(1.16.0-1634781227000)

playwright 1.16.0 v1.16.0 on Node.js Yarn