Playwright v1.16.0 — Release Notes & Engineering Impact

<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**: ```ts 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]**: ```ts 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: ```ts 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: ```bash $ 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: ```ts 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) [API Testing]: https://playwright.dev/docs/next/api/class-apirequestcontext [`page.request`]: https://playwright.dev/docs/next/api/class-page#page-request [`request` fixture]: https://playwright.dev/docs/next/api/class-fixtures#fixtures-request [API testing guide]: https://playwright.dev/docs/next/test-api-testing [Trace Viewer]: https://playwright.dev/docs/next/trace-viewer [Docker integration]: https://playwright.dev/docs/next/docker [`locator.waitFor()`]: https://playwright.dev/docs/next/api/class-locator#locator-wait-for [our reporters]: https://playwright.dev/docs/next/test-reporters#html-reporter [response interception]: https://playwright.dev/docs/next/network#modify-responses [request interception]: https://playwright.dev/docs/next/api/class-page#page-route