What’s New in Playwright v1.52 & v1.53: Fix with AI, Describable Locators, and More!

#webdev #playwright #testing #ai

Here’s a quick tour of what’s new in Playwright v1.52 and v1.53! We’ve packed in some powerful features to make your testing experience smoother, especially around debugging and reporting:

🧠 Fix with AI in VS Code

Playwright now integrates seamlessly with GitHub Copilot to help you fix test failures directly from VS Code. When a test fails, just click the ✨ icon next to the error message or while hovering over the test name in the test explorer. Playwright gives Copilot enough context, so it can generate a targeted fix. You review, accept, and re-run. It's fast, contextual, and incredibly useful.

💡 Want to try it? Make sure you're using the Playwright VS Code extension.

🔎 `locator.describe()` – Better Trace and Report Visibility

You can now add a human-readable description to any locator using .describe():

const newTodo = page.getByPlaceholder('What needs to be done?').describe('new todo input');

await newTodo.fill('Buy milk');

These descriptions show up in:

The trace viewer
UI mode
HTML reports

This small change makes a big difference when debugging complex UIs or collaborating with teammates.

📊 Custom Titles in HTML Reports

Add more clarity to your test reports with a configurable title:

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

export default defineConfig({
  reporter: [['html', { title: 'Custom test run #1028' }]]
});

Great for team dashboards, CI output, or distinguishing between multiple test runs.

✅ New Assertion: `toContainClass`

Need to assert that an element contains a specific class? Use:

await expect(page.getByRole('listitem', { name: 'Ship v1.52' })).toContainClass('done');

It's ergonomic, precise, and especially useful for class based UI state.

🧪 Snapshot Enhancements: `children` and `url` Support

Aria snapshots (via toMatchAriaSnapshot) now support:

/children: equal – ensures child elements are included
/url: "https://playwright.dev" – match specific URLs in snapshots

await expect(locator).toMatchAriaSnapshot(`
  - list
    - /children: equal
    - listitem: Feature A
    - listitem:
      - link "Feature B":
        - /url: "https://playwright.dev"
`);