Im using data-testid to locate a title entry field on a page. The input field has the tag “createTitle”, however when I use the getByTestId method to locate it, the element cant be found and the test times out. Using VS codes ability to select a locator and selecting the field i’m trying to access, returns the suggestion to use:

locator('[data-testid="createTitle"]')

await test.step(`Input title as: ${title}`, async () => {
            
            // Failing solution
            await this.page.getByTestId("createTitle")

            // Passing solution
            await this.page.locator('[data-testid="createTitle"]')

            .fill(title)
        })

(obviously when I run the code I comment out one of the above solutions, I’m not trying to run both of them consecutively)

from my understanding of playwright, these tests should return exactly the same field as they should be locating the same tag, the tag is obviously accessible otherwise the second option would not work, so I dont understand why getbytestId is not working whatsoever.

The timeout error message given is:

Test timeout of 30000ms exceeded.

    Error: locator.fill: Test timeout of 30000ms exceeded.
    Call log:
      - waiting for getByTestId('createTitle')

I want to use the getByTestId method to access this page element to keep things consistent with other places in my code. This is the first instance I have had with this method not behaving properly