Debbie O'Brien for Playwright end to end Testing

Posted on Mar 7

Playwright Release 1.51: Smarter Debugging, Enhanced Reports & More!

#playwright #webdev #testing #ai

Playwright 1.51 is here, bringing a host of new features to make debugging, reporting, and test automation even more powerful. Whether you're tackling test failures, improving test visibility, or streamlining authentication workflows, this release has something for you. Let’s dive into what’s new!

🚀 AI-Friendly Copy Prompt for Debugging

When a test fails, Playwright now provides a Copy Prompt feature that generates a structured debugging prompt. You can paste this directly into an AI tool to get assistance in understanding and fixing the issue. This makes troubleshooting faster and more efficient. The copy prompt button appears in the error tab of both the HTML reporter and UI mode.

If you want your prompt to be smart and include the diff, add this to your config:

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

🪪 Git Info in HTML Reports

Understanding test failures in context just got easier! Playwright 1.51 allows you to include Git commit details in your HTML reports, providing more traceability for when and why a test was executed. This is especially helpful for teams working in CI/CD environments where changes happen frequently.

Capture and Store Git Information in HTML Reports

If you don’t use GitHub, GitLab, or Jenkins, you need to specify this line:

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

🔥 Firebase Authentication Support

Testing applications that use Firebase authentication is now smoother with native support. This enhancement simplifies authentication flows in tests, making it easier to validate user access and interactions without complex setup.

Save and Restore IndexedDB Contents in Storage State – Firebase Authentication

To persist authentication state, including IndexedDB, you can use the following setup:

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

👁️ Match Only Visible Locators

A major improvement in locator precision! Playwright now lets you filter locators to match only visible elements using filter: { visible: true }. This ensures tests interact only with elements users can see, reducing flakiness and improving reliability.

Example: Filtering Locators to Only Match Visible Elements

Consider the following HTML:

<button id="submit1" type="button" style="display: none">Submit</button>
<button id="submit2" type="button">Submit</button>

Using getByText('Submit') would cause a strict mode violation because multiple buttons match. To filter only visible locators, use:

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

test('should only show visible submit button', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByText('Submit').filter({
    visible: true
  })).toBeVisible();
});

🪜 Test Step Improvements: Timeouts, Skipping, and Attachments

Managing test steps is now even more flexible. Playwright 1.51 introduces:

Timeouts for test steps, allowing granular control over execution time.
Skipping steps conditionally, making workflows more adaptable.
Attachments for test steps, improving reporting and debugging visibility.

Add Timeout to a Test Step

Specify a maximum runtime for an individual test step:

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

test('some test', async ({ page }) => {
  await test.step('a step', async () => {
    // This step can time out separately from the test
  }, { timeout: 1000 });
});

Conditionally Skip a Running Step

Abort the currently running step and mark it as skipped with an optional description:

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

test('basic test', async ({ page, isMobile }) => {
  await test.step('check some behavior', async step => {
    step.skip(isMobile, 'not relevant on mobile layouts');
    // ... rest of the step code
  });
});

Attach Files or Values to a Test Step

Attach a value or a file from disk to the current test step:

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

await test.step('Verify movie rating tooltip content', async (step) => {
  await firstMovieRating.hover();
  const tooltip = page.getByRole('tooltip');
  const tooltipText = await tooltip.textContent() ?? '';
  await expect(tooltip).toContainText(/average rating on/);

  // Attach the tooltip text content to the test report
  await step.attach('tooltip text content', { body: tooltipText, contentType: 'text/markdown' });
});

These enhancements make complex test scenarios more maintainable and easier to debug.

📷 ARIA Snapshot Updates

ARIA snapshots, which help in accessibility testing, now store snapshots in separate YAML files. This improves organization and makes it easier to track updates when snapshots change.

Example: Storing ARIA Snapshots in Separate Files

await expect(page.getByRole('main')).toMatchAriaSnapshot({ name: 'main.aria.yml' });

Updating Snapshots & Source Code

--update-snapshots updates all snapshots or only changed ones.
--update-source-method defines how source code is updated (overwrite, 3-way, or patch).

Example:

npx playwright test --update-snapshots=changed --update-source-method=3way

🎉 Upgrade to Playwright 1.51

With Playwright 1.51, debugging becomes smarter, reports get more context, and test automation becomes even more reliable. Ready to explore these new features? Upgrade now and take your Playwright tests to the next level! 🚀

npm install @playwright/test@latest

Check out the latest release video for more details and a live demo:

What’s your favorite feature in this release? Let us know in the comments! 👇

DEV Community