Exploring the Latest Features of Playwright: What’s New in v1.51 and Beyond

Exploring the Latest Features of Playwright: What’s New in v1.51 and Beyond

Playwright has rapidly become one of the go‐to frameworks for end-to-end testing, renowned for its cross-browser support, auto-waiting capabilities, and developer-friendly APIs. In its continuous quest to enhance the testing experience, the latest release—v1.51—brings several exciting new features that streamline debugging, boost reliability, and offer more flexibility when building complex test suites. In this post, we dive into some of the standout enhancements of this release.

1. StorageState for IndexedDB

One of the major additions in v1.51 is the new option to capture and restore IndexedDB contents through the browser context’s storage state. This is especially useful when your application uses IndexedDB (for example, to store authentication tokens like Firebase Authentication) to manage user sessions.

How It Works

You can now instruct Playwright to include IndexedDB data when saving the storage state. This makes it easier to set up authenticated sessions across tests.

Example Code

import { test } from '@playwright/test';
import path from 'path';

const authFile = path.join(__dirname, '../playwright/.auth/user.json');

test('authenticate and save storage state', async ({ page }) => {
  await page.goto('https://your-app-url.com');
  // ... perform authentication steps ...
  // Save storage state along with IndexedDB content:
  await page.context().storageState({ path: authFile, indexedDB: true });
});
        

By saving the IndexedDB state, you can later reuse it in other tests to bypass repetitive login procedures, resulting in faster and more stable test executions.

2. Copy as Prompt Button

Debugging failed tests becomes even easier with the new Copy as Prompt feature. When a test fails, you’ll now notice a “Copy prompt” button in the HTML report, trace viewer, and UI mode. This handy tool automatically copies a pre-filled prompt—complete with error messages and context—that you can directly use with an LLM (large language model) to get debugging suggestions or insights on how to fix the issue.

This feature minimizes the back-and-forth required during troubleshooting, making your test maintenance workflow smoother.

3. Filtering Visible Elements

Another thoughtful improvement is the introduction of a new visible option in the locator.filter() method. With this enhancement, you can now easily narrow down your element selection to only those that are visible, thereby reducing flakiness when dealing with dynamic or hidden elements.

Example Usage

test('filter visible todo items', async ({ page }) => {
  // Retrieve only the visible elements with the specified test ID.
  const visibleTodoItems = page.getByTestId('todo-item').filter({ visible: true });
  await expect(visibleTodoItems).toHaveCount(3);
});
        

This new option ensures that your assertions and interactions target the elements that the user can actually see on the page.

4. Git Information in HTML Report

For teams using version control, tracking the code state at the time of test execution can be invaluable. Playwright now offers an option—captureGitInfo—that, when enabled in the test configuration, captures Git commit information and diffs, integrating them directly into the HTML test report.

Configuration Snippet

import { defineConfig } from '@playwright/test';

export default defineConfig({
  captureGitInfo: { commit: true, diff: true },
  // Other configuration options…
});
        

This additional metadata not only aids in debugging but also provides greater transparency regarding which code changes might have impacted test results.

5. Test Step Improvements

The latest release brings a new TestStepInfo object into your test steps. This update allows you to attach additional context or even conditionally skip a step based on runtime conditions (for instance, if a test is running on a mobile layout where a certain step isn’t relevant).

Example of Using Test Steps

import { test } from '@playwright/test';

test('advanced test step example', async ({ page, isMobile }) => {
  await test.step('Perform critical action', async step => {
    // Skip the step for mobile devices
    step.skip(isMobile, 'Not applicable on mobile');
    
    // Attach additional context or logs if needed
    await step.attach('screenshot', { body: await page.screenshot() });
    
    // Continue with the step actions
    await page.click('#critical-button');
  });
});
        

By enabling richer step metadata, you can produce more granular test reports and improve the debugging process.

6. Miscellaneous Enhancements

A couple of smaller, yet impactful, improvements round out this release:

• Contrast Option: New support for a contrast option in methods like page.emulateMedia() and browser.newContext(). This lets you emulate the prefers-contrast media feature for testing accessibility features.
• Fail on Status Code: With the new failOnStatusCode option for API requests, any fetch request that returns a non-2xx/3xx response code will automatically throw an error—helping you catch issues in API interactions earlier.
• Predicate Support in URL Assertions: The assertion expect(page).toHaveURL() now supports passing a predicate function, providing even more flexibility in validating URLs.

These fine-tuned enhancements improve reliability and provide better control over various testing scenarios.

Conclusion

Playwright continues to evolve as a robust and flexible testing framework, and the latest v1.51 release solidifies its position with features that simplify debugging, enhance test reliability, and offer more granular control over browser automation. From saving IndexedDB state to advanced test step management and comprehensive Git integration in reports, these updates are sure to make your automated testing workflow smoother and more effective.

Thinking about upgrading? Check out these new features and see how they can improve your testing workflow with Playwright. For more details, visit the official Playwright documentation and nd give the latest release a try!