v1.23.0

<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)