Playwright v1.23.0 — Release Notes & Engineering Impact

<a href="https://youtu.be/NRGOV46P3kU"><img src="https://user-images.githubusercontent.com/746130/177854522-a07f4701-9528-4bf9-bf0f-30fbdfb04c8c.png" width=340></a> <a href="https://youtu.be/NRGOV46P3kU">Playwright v1.23 updates</a> ## Network Replay Now you can record network traffic into a HAR file and re-use the data in your tests. To record network into HAR file: ```bash npx playwright open --save-har=github.har.zip https://github.com/microsoft ``` Alternatively, you can record HAR programmatically: ```ts const context = await browser.newContext({ recordHar: { path: 'github.har.zip' } }); // ... do stuff ... await context.close(); ``` Use the new methods [`page.routeFromHAR()`](https://playwright.dev/docs/api/class-page#page-route-from-har) or [`browserContext.routeFromHAR()`](https://playwright.dev/docs/api/class-browsercontext#browser-context-route-from-har) to serve matching responses from the [HAR](http://www.softwareishard.com/blog/har-12-spec/) file: ```ts await context.routeFromHAR('github.har.zip'); ``` Read more in [our documentation](https://playwright.dev/docs/network#record-and-replay-requests). ### Advanced Routing You can now use [`route.fallback()`](https://playwright.dev/docs/api/class-route#route-fallback) to defer routing to other handlers. Consider the following example: ```ts // Remove a header from all requests. test.beforeEach(async ({ page }) => { await page.route('**/*', route => { const headers = route.request().headers(); delete headers['if-none-match']; route.fallback({ headers }); }); }); test('should work', async ({ page }) => { await page.route('**/*', route => { if (route.request().resourceType() === 'image') route.abort(); else route.fallback(); }); }); ``` Note that the new methods [`page.routeFromHAR()`](https://playwright.dev/docs/api/class-page#page-route-from-har) and [`browserContext.routeFromHAR()`](https://playwright.dev/docs/api/class-browsercontext#browser-context-route-from-har) also participate in routing and could be deferred to. ### Web-First Assertions Update * New method [`expect(locator).toHaveValues()`](https://playwright.dev/docs/test-assertions#locator-assertions-to-have-values) that asserts all selected values of `<select multiple>` element. * Methods [`expect(locator).toContainText()`](https://playwright.dev/docs/test-assertions#locator-assertions-to-contain-text) and [`expect(locator).toHaveText()`](https://playwright.dev/docs/test-assertions#locator-assertions-to-have-text) now accept `ignoreCase` option. ### Component Tests Update * Support for Vue2 via the [`@playwright/experimental-ct-vue2`](https://www.npmjs.com/package/@playwright/experimental-ct-vue2) package. * Support for component tests for [create-react-app](https://www.npmjs.com/package/create-react-app) with components in `.js` files. Read more about [component testing with Playwright](https://playwright.dev/docs/test-components). ### Miscellaneous * If there's a service worker that's in your way, you can now easily disable it with a new context option [`serviceWorkers`](https://playwright.dev/docs/api/class-browser#browser-new-context-option-service-workers): ```ts // playwright.config.ts export default { use: { serviceWorkers: 'block', } } ``` * Using `.zip` path for [`recordHar`](https://playwright.dev/docs/api/class-browser#browser-new-context-option-record-har) context option automatically zips the resulting HAR: ```ts const context = await browser.newContext({ recordHar: { path: 'github.har.zip', } }); ``` * If you intend to edit HAR by hand, consider using the `"minimal"` HAR recording mode that only records information that is essential for replaying: ```ts const context = await browser.newContext({ recordHar: { path: 'github.har.zip', mode: 'minimal', } }); ``` * Playwright now runs on Ubuntu 22 amd64 and Ubuntu 22 arm64. We also publish new docker image `mcr.microsoft.com/playwright:v1.23.0-focal`. ### ⚠️ Breaking Changes ⚠️ WebServer is now considered "ready" if request to the specified port has any of the following HTTP status codes: * `200-299` * `300-399` (new) * `400`, `401`, `402`, `403` (new)