Can I select an element by data-testid using #?

Question

Just like the id can be selected using

await page.locator("#YourId").click()

is there a shorthand for data-testid in playwright-typescript ?

I tried

await page.locator("#YourData-testid").click()

I was expecting the element with the data-testid to be clicked but it is not located for click action.

Answer 1

The # shorthand symbol for id is actually specific to/provided by CSS selectors, which is what’s being used by .locator(). Since data-testid is nothing special to css selectors, since it’s not meant for styling, the only way with css selectors is with the attribute notation:

.locator('[data-testid="value"]')

That being said, Playwright does provide the .getByTestId() convenience method for selecting by that attribute:

.getByTestId('value')