♿ Quick tips - Playwright Aria Snapshot

What's New

In Playwright version 1.49, a new feature was introduced, which allows you to match Aria snapshots in a similar way to how you match visual snapshots.

You'll notice the new icon in your codegen editor that looks a bit like this 🗋 If you select that, and then select an element on your page, it will auto-generate the aria snapshot for you.

import { test, expect } from '@playwright/test';
 
test('test', async ({ page }) => {
  await page.goto('https://garyparker.dev/');
  await expect(page.locator('body')).toMatchAriaSnapshot(`
    - navigation:
      - list:
        - link "Blog"
        - link "Workshops"
        - link "Events"
        - link "Community"
        - link "Contact"
    - heading "👋🏻 Hi, I'm Gary!" [level=1]
    - heading "Senior Architect specialising in Quality Assurance, Architecture and Advocacy" [level=2]
    `);
});

This is great if you need super faster tests to quickly check the hierarchy and structure of your page, for accessibility purposes. (or just as a general smoke test)

Important tips

My first concern with this feature, was what do you do if the structure of your page changes. If a new heading is introduced or removed, it could be a pain to keep updating the snapshot file.

The Playwright team have provided a simple solution for this, in the same way we update image snapshots you can run npx playwright test --update-snapshots and automatically generate a baseline file.

You can see the highlighted lines in green are the updated sections, and the orange ones are the outdated sections.

You can also start with an empty snapshot parameter in your assertion, and just define the locator. In this example we'eve provided the body locator.

import { test, expect } from '@playwright/test';
 
test('test', async ({ page }) => {
  await page.goto('https://garyparker.dev/');
  await expect(page.locator('body')).toMatchAriaSnapshot('');
});

And Playwright has output the full assertion for us to copy into our spec file.

Conclusion

That was a very quick walkthrough of how to use the new Aria Snapshot feature, hopefully you find it useful! I'll most likely revisit this in the future in more detail.