I’m using Playwright Javascript to automate tests. This is the first time I’m going to try calling an element by data-testid instead of id or XPath. If I call an element by XPath like this, for example:

this.txtSearch = page.locator('xpath=//*[@id="root"]/div/main/section/div[1]/div[1]/div/div/input');

Then it calls it correctly. However if I call it by data-testid like this:

this.txtSearch = page.locator('[data-testid="SearchBar-InputText"]');

I get error:

Error: Timed out 5000ms waiting for expect(locator).toBeVisible()
Locator: locator(‘[data-test-id=”SearchBar-InputText”]’)
Expected: visible
Received: <element(s) not found>
Call log:

• expect.toBeVisible with timeout 5000ms
• waiting for locator(‘[data-test-id=”SearchBar-InputText”]’)

Why could it be? Am I calling the wrong way for data-testid? I tried many ways but I don’t know what it could be.