v1.51.0

microsoft/playwrightv1.51.0Mar 6, 2025by dgozman

AI Summary

Adds support for IndexedDB in storage state, introduces new report features like Git info capture and 'Copy prompt' buttons, and adds a 'visible' filter for locators.

Key Highlights

  • New 'indexedDB' option for browserContext.storageState()
  • New 'visible' filter for locator.filter()
  • New 'Copy prompt' button in HTML reports and trace viewer
  • New 'contrast' option to emulate prefers-contrast media feature
  • New 'failOnStatusCode' option for API requests

New Features

  • IndexedDB storage state support
  • Locator visibility filtering
  • Git information capture in reports
  • LLM prompt copying in reports
  • Contrast media feature emulation
  • Predicate support for toHaveURL

Full Release Notes

## StorageState for indexedDB
* New option [`indexedDB`](https://playwright.dev/docs/api/class-browsercontext#browser-context-storage-state-option-indexed-db) for [browserContext.storageState()](https://playwright.dev/docs/api/class-browsercontext#browser-context-storage-state) allows to save and restore IndexedDB contents. Useful when your application uses [IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) to store authentication tokens, like Firebase Authentication.
  
  Here is an example following the [authentication guide](https://playwright.dev/docs/auth#basic-shared-account-in-all-tests):
  
  ```js
  // tests/auth.setup.ts
  import { test as setup, expect } from '@playwright/test';
  import path from 'path';
  
  const authFile = path.join(__dirname, '../playwright/.auth/user.json');
  
  setup('authenticate', async ({ page }) => {
    await page.goto('/');
    // ... perform authentication steps ...
  
    // make sure to save indexedDB
    await page.context().storageState({ path: authFile, indexedDB: true });
  });
  ```
  
## Copy prompt

New "Copy prompt" button on errors in the HTML report, trace viewer and UI mode. Click to copy a pre-filled LLM prompt that contains the error message and useful context for fixing the error.

![Copy prompt](https://github.com/user-attachments/assets/f3654407-dd6d-4240-9845-0d96df2bf30a)

## Filter visible elements

New option [`visible`](https://playwright.dev/docs/api/class-locator#locator-filter-option-visible) for [locator.filter()](https://playwright.dev/docs/api/class-locator#locator-filter) allows matching only visible elements.

```js
// example.spec.ts
test('some test', async ({ page }) => {
  // Ignore invisible todo items.
  const todoItems = page.getByTestId('todo-item').filter({ visible: true });
  // Check there are exactly 3 visible ones.
  await expect(todoItems).toHaveCount(3);
});
```

## Git information in HTML report

Set option [testConfig.captureGitInfo](https://playwright.dev/docs/api/class-testconfig#test-config-capture-git-info) to capture git information into [testConfig.metadata](https://playwright.dev/docs/api/class-testconfig#test-config-metadata).

```js
// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  captureGitInfo: { commit: true, diff: true }
});
```

HTML report will show this information when available:

![Git information in the report](https://github.com/user-attachments/assets/f5b3f6f4-aa08-4a24-816c-7edf33ef0c37)

## Test Step improvements

A new [TestStepInfo](https://playwright.dev/docs/api/class-teststepinfo) object is now available in test steps. You can add step attachments or skip the step under some conditions.

```js
test('some test', async ({ page, isMobile }) => {
  // Note the new "step" argument:
  await test.step('here is my step', async step => {
    step.skip(isMobile, 'not relevant on mobile layouts');

    // ...
    await step.attach('my attachment', { body: 'some text' });
    // ...
  });
});
```

## Miscellaneous
* New option `contrast` for methods [page.emulateMedia()](https://playwright.dev/docs/api/class-page#page-emulate-media) and [browser.newContext()](https://playwright.dev/docs/api/class-browser#browser-new-context) allows to emulate the `prefers-contrast` media feature.
* New option [`failOnStatusCode`](https://playwright.dev/docs/api/class-apirequest#api-request-new-context-option-fail-on-status-code) makes all fetch requests made through the [APIRequestContext](https://playwright.dev/docs/api/class-apirequestcontext) throw on response codes other than 2xx and 3xx.
* Assertion [expect(page).toHaveURL()](https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-url) now supports a predicate.

## Browser Versions
* Chromium 134.0.6998.35
* Mozilla Firefox 135.0
* WebKit 18.4

This version was also tested against the following stable channels:
* Google Chrome 133
* Microsoft Edge 133