elementHandle.evaluateHandle: TestingLibraryElementError: Unable to find an element by, and the other error-click is not a function

[InduKrish]

hi,I've been trying to use playwright testing library in the test, and realized that the playwright testing library is using element handles which is discourage to use by Playwright official team, based on this thread, looks like element handle is replaced with the locator api. Can you please confirm if i understood correctly?

and Can you please advise when the locator api with the playwright testing library will be officially released?

I have also observed few issues. Can you please clarify?

test("Default page verification", async ({ defaultPage, loginPage, page, queries: {getByTestId} }) => {

           //regular playwright code to login, you can ignore
            await page.goto("https://some website.com");
            await page.locator('input#username').click()
            await page.locator('input#username').fill('xxxx');
            await page.locator('input#password').click()
            await page.locator('input#password').fill('xxxx);
            await Promise.all([
                page.waitForNavigation(/*{ url: 'xxxx' }*/),
                await page.locator('text=Submit').click()
            ]);
           //regular playwright code to login, you can ignore
            await page.locator('text=Vacation').first().click();
            await page.locator('text=Settings & Defaults').click();

            // getByTestId works only when I add waitForSelector to wait for that specific locator.
            await page.waitForSelector('[data-testid="Edit Group Codes"]');
            const $form = await getByTestId('Edit Group Codes');
            await $form.click();

Question 1: if i execute const $form = await getByTestId('Edit Group Codes'); without waitForSelector, the test fails with the following error , as the DOM is not completely loaded. wondering why getByTestId() doesnt automatically wait like how the playwright team makes playwright auto wait before performing click action? wondering if there is any other way other than adding waitForSelector to auto wait until DOM loads.

elementHandle.evaluateHandle: TestingLibraryElementError: Unable to find an element by: [data-testid="Edit Group Codes"]

Question 2: const $form = await getByTestId('Edit Group Codes'); await $form.click(); why these lines can't be executed in a single line like --> await page.locator('text=Submit').click() it gives the following error: TypeError: getByTestId(...).click is not a function wondering why it has to be assigned to the variable to perform click action, as it increases no of lines in the test and hard to maintain?

[jrolfs]

Can you please advise when the locator api with the playwright testing library will be officially released?

I'm planning on getting this out very soon, but it's available on 4.4.0-beta.6 now.

Question 1:

You want a find* query to wait for an element asynchronously, so findByTestId() in this case.

Question 2:

Because obtaining an ElementHandle is an asynchronous operation, unlike Locator which is lazy and doesn't resolve the element until you interact with it.

[jrolfs]

Alright, it's officially released in 4.4.0. I also updated the readme with documentation for the new Locator stuff. Let me know if you have any questions after checking that out.

[InduKrish]

Hi,

📝 Usage There are currently a few different ways to use Playwright Testing Library, depending, however using the Locator queries fixture with Playwright Test (@playwright/test) is the recommended approach.

⚠️ The ElementHandle query APIs were created before Playwright introduced its Locator API and will be replaced in the next major version of Playwright Testing Library. If you can't use @playwright/test at the moment, you'll need to use the ElementHandle query API, but a migration path will be provided when we switch to the new Locator APIs.

Question: I see this note, does it mean that the locator API will be replaced in the next major version of Playwright Testing Library and not available to use right now with 4.40 version?

Can you please clarify?