How to test accessible descriptions with Playwright

Summary ❧ Playwright recently added support an assertion to check accessible descriptions and labels, allowing you to more easily test the accessibility of elements in your web application.

Playwright recently added support for an assertion to check accessible descriptions and labels, allowing you to more easily test the accessibility of elements in your web application. This is available in Playwright version 1.44 and up.

Prior to this release, getting the accessible description for an element was a bit more involved and not straightforward. Now, it's super easy to check the accessible description of an element using the new toHaveAccessibleDescription() assertion.

const input = await page.getByRole("textbox", { name: "Password" });
await expect(input).toHaveAccessibleDescription(
  "Passwords must be at least 12 characters long"
);

Conveniently, they've also added toHaveRole() and toHaveAccessibleName() assertions, which can be used in a similar way, even though we already have the getByRole() and getByLabel(). It's great to have more options for doing automated web accessibility testing.