Starting from version 1.28, getByRole
in @playwright/test no longer matches the name exactly by default. Instead, it searches for a substring match in a case-insensitive manner.
You can control the exact name matching by using the exact
option. Set exact
to true
to match the name in a case-sensitive and whole-string manner. Keep in mind that whitespace will still be trimmed before matching.
Here's an example:
import { test } from '@playwright/test';
test('example test', async ({ page }) => {
await page.goto('https://ray.run/');
// Using exact name matching
const element = await page.locator('role=button', { name: 'Submit', exact: true });
});
getByRole
also provides other options:
expanded
: Match elements based on their aria-expanded
attribute.pressed
: Match elements based on their aria-pressed
attribute.includeHidden
: Control whether hidden elements are matched or not. By default, only non-hidden elements as defined by ARIA are matched.These changes offer more flexibility when using getByRole
in Playwright and ensure better adherence to ARIA guidelines for web accessibility purposes. However, it's important to remember that role selectors do not replace accessibility audits and conformance tests, which should still be performed separately.
If you still have questions, please ask a question and I will try to answer it.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].