playwright

Highlights

This patch includes bug fixes for the following issues:

https://github.com/microsoft/playwright/issues/9849 - [BUG]: toHaveCount fails with serialization error in 1.16 when elements do not yet exists https://github.com/microsoft/playwright/issues/9897 - [Bug]: TraceViewer doesn't show actions https://github.com/microsoft/playwright/issues/9902 - [BUG] Warn if the html-report gets opened with file://

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.3-1635814179000)

Highlights

This patch includes bug fixes for the following issues:

https://github.com/microsoft/playwright/issues/7818 - [Bug]: dedup snapshot CSS images https://github.com/microsoft/playwright/issues/9741 - [BUG] Error while an attempt to install Playwright in CI -> Failed at the playwright@1.16.1 install script https://github.com/microsoft/playwright/issues/9756 - [Regression] Page.screenshot does not work inside Docker with BrowserServer https://github.com/microsoft/playwright/issues/9759 - [BUG] 1.16.x the package.json is not export anymore https://github.com/microsoft/playwright/issues/9760 - [BUG] snapshot updating causes failures for all tries except the last https://github.com/microsoft/playwright/issues/9768 - [BUG] ignoreHTTPSErrors not working on page.request

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.2-1635322350000)

Highlights

This patch includes bug fixes for the following issues:

https://github.com/microsoft/playwright/issues/9688 - [REGRESSION]: toHaveCount does not work anymore with 0 elements https://github.com/microsoft/playwright/issues/9692 - [BUG] HTML report shows locator._withElement for locator.evaluate

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)

<a href="https://youtu.be/OQKwFDmY64g"></a> <a href="https://youtu.be/OQKwFDmY64g">Playwright v1.16 updates</a>

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

Read more about response interception.

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.

Read more about our reporters.

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

Read more about locator.waitFor().

🎭 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

Read more about Trace Viewer.

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)