What is the new behavior of getByRole in Playwright version 1.28 and how can I control the exact name matching?

Answer

New Behavior of getByRole in Playwright

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.

Controlling Exact Name Matching

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

Additional Options

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.