When writing end-to-end tests with Playwright, selectors play a very important role in making your tests stable and maintainable. One common approach is using test IDs – explicit attributes added to your DOM purely for testing purposes.
By default, Playwright uses the data-testid attribute with page.getByTestId(). But what if your project uses a different naming convention? That is where testIdAttribute comes in.
Why customize testIdAttribute?
In real projects, teams often adopt their own attribute naming standards. For example:
– data-test
– id-test-data
– test-id
Instead of rewriting selectors or avoiding getByTestId(), Playwright allows you to globally configure which attribute to use.
This keeps your tests:
– more readable
– easier to refactor
– consistent with your codebase conventions
How to configure it?
Playwright introduced the testIdAttribute option in v1.27, making customization straightforward.
Here is how you can set it up:
Once configured, this line:
will now target:
Conclusion
The testIdAttribute option is a small but powerful feature in Playwright. It allows your testing strategy to align with your application’s structure without sacrificing clarity or maintainability.
If your team values consistency and clean test code, this is a configuration worth setting early on.