Better Playwright data-testid options for getByTestId()

Many test automation frameworks like Playwright support the use of a data-testid attribute (or similar) as a method for locating elements on a web page. For example we can locate this element:

<input type='text' id='name' data-testid='username' aria-label='User Name' />

and populate it with some text using this Playwright code:

await page.getByTestId('username').fill('Harry Lee');

Although data-testid is the most common name for this attribute – which is why Playwright uses this by default and requires no configuration to set up – your application may use a different attribute name, for example data-test-id.

In this case you will need to update the Playwright config file with the attribute name in use. For example if using Typescript you’ll need to amend the playwright.config.ts file:

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

export default defineConfig({
  use: {
    testIdAttribute: 'data-test-id'
  }
});

Alternatively the new attribute name can be set within the test code:

selectors.setTestIdAttribute('data-test-id');

Note: there is some controversy about whether using these attributes is a good idea, or whether we should instead identify elements using Role or Text, or id or name. Personally I think using data-testid or some equivalent is best practice, and helps to create less flaky and more maintainable tests.

View the Playwright data-testid documentation for more details about this feature.

See also this section in the documentation on shortcuts: