What is the reason behind the inability to utilize page.locator within a page.waitForFunction?

Question

What is the reason behind the inability to utilize page.locator within a page.waitForFunction?

Delving into Playwright for the first time, coming from a Cypress background where I am familiar with the cypress-wait-until function.

I'm currently trying to wait until a specific number of DOM elements exist, and although I've found various solutions, I'm curious why my initial approach failed.

Perhaps someone else has encountered the same issue?

Below is the test case I am working on:

Open the web page
Accept the cookies
Search for Rembrandt van Rijn Pictures
Wait until the WORKS OF ART image carousel displays 10 items

test('search for rembrandt', async ({page, browser, context}) => {
    await page.goto('https://www.rijksmuseum.nl/en/content-search');
    // accept cookies
    await page.click('text=Accept');
    const inputSearch = page.locator("input.search-bar-input")
    await inputSearch.fill('Rembrandt van Rijn')
    const buttonSearch = page.locator("button[class$='search-bar-button']")
    await buttonSearch.click()
    // waiting logic goes here

})

Attempt: ❌

 await page.waitForFunction(
     (page)=>
         page.locator('div[aria-label="Carousel with links to works of art"] div.carousel-item')
             .count()
             .then(nrOfElements => nrOfElements === 10), page)

Attempt: ❌

 await page.waitForFunction(
     async (page)=>
        await page.locator('div[aria-label="Carousel with links to works of art"] div.carousel-item')
             .count()
             .then(nrOfElements => nrOfElements === 10), page)

NOTE: Ensure that you pass the 'page' variable as args to avoid the 'ReferenceError: page is not defined'

An error message stating: 'Error: Unexpected value' always appears. https://i.sstatic.net/FnYTWhVo.png

The page.waitForFunction method can handle Promises correctly like this:

await page.waitForFunction(async() => await new Promise((resolve) => setTimeout(() => resolve(true), 10_000)))

await page.waitForFunction(() => new Promise((resolve) => setTimeout(() => resolve(true), 10_000)))

A quick but effective solution:

while(!await page.locator('div[aria-label="Carousel with links to works of art"] div.carousel-item').count().then(nrOfElements => nrOfElements ===10))

WARNING: This method requires an additional timeout to ensure the test stops if the element count doesn't match!

The AI's recommendation also functions, but might not be as elegant:

const extendArtQuerySelector = 'div[aria-label="Carousel with links to works of art"] div.carousel-item';

// Transfer only the selector to the browser context
await page.waitForFunction(ellSelector => {
    const elements = document.querySelectorAll(ellSelector);
    return elements.length >= 10;
}, extendArtQuerySelector);

Lastly, the most efficient solution:

await expect(page.locator('div[aria-label="Carousel with links to works of art"] div.carousel-item')).toHaveCount(10)

Any thoughts on why the page.locator does not work within the waitForFunction?

typescript promise playwright playwright-typescript

Answer 1

Answer №1

Absolutely, when using waitForFunction, keep in mind that the callback will run within the browser environment and won't have access to Playwright locators.

For testing purposes, it's recommended to utilize expect(loc).toHaveLength(10):

import {expect, test} from "@playwright/test"; // ^1.42.1

test("search for rembrandt", async ({page}) => {
  await page.goto("<Your URL>");
  await page
    .getByRole("button", {name: "Accept", exact: true})
    .click();
  await page
    .getByPlaceholder("For info, artist, guided tour or more")
    .fill("Rembrandt van Rijn");
  await page
    .getByRole("button", {name: "Search", exact: true})
    .click();
  const carouselItems = page
    .getByLabel("Carousel with links to works of art")
    .locator(".carousel-item");
  await expect(carouselItems).toHaveCount(10);
});

Note that I've opted for user-friendly locators over CSS wherever possible and avoided using functions like page.click() that are discouraged.

If you require a "greater than or equal to" check, consider this approach:

await expect(async () => {
  const count = await page
    .getByLabel("Carousel with links to works of art")
    .locator(".carousel-item")
    .count();
  expect(count).toBeGreaterThanOrEqual(10);
}).toPass();

If you're not utilizing @playwright/test, your usage of document.querySelectorAll is acceptable but somewhat verbose. A streamlined version could look like this:

const playwright = require("playwright"); // ^1.42.1

let browser;
(async () => {
  browser = await playwright.firefox.launch();
  const page = await browser.newPage();
  await page.goto("<Your URL>");
  // ... Same actions as described above ...
  const sel =
    '[aria-label="Carousel with links to works of art"] .carousel-item';
  await page.waitForFunction(
    `[...document.querySelectorAll('${sel}')].length >= 10`
  );
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

On a side note, ChatGPT may not be reliable when it comes to Playwright-related advice - it can sometimes produce incorrect code snippets. Ensure to validate your assertions properly. Here's an example of invalid code generated by ChatGPT:

// ❌ This always passes even though it should fail
await expect.toPass(() => {
  expect(42).toBeGreaterThanOrEqual(1000000);
});

This assertion always passes, which can lead to false confidence. To make sure tests work correctly, use the following pattern:

// ✅ This fails as expected
await expect(() => {
  expect(42).toBeGreaterThanOrEqual(1000000);
}).toPass();

Answer 2

Absolutely, when using waitForFunction, keep in mind that the callback will run within the browser environment and won't have access to Playwright locators.

For testing purposes, it's recommended to utilize expect(loc).toHaveLength(10):

import {expect, test} from "@playwright/test"; // ^1.42.1

test("search for rembrandt", async ({page}) => {
  await page.goto("<Your URL>");
  await page
    .getByRole("button", {name: "Accept", exact: true})
    .click();
  await page
    .getByPlaceholder("For info, artist, guided tour or more")
    .fill("Rembrandt van Rijn");
  await page
    .getByRole("button", {name: "Search", exact: true})
    .click();
  const carouselItems = page
    .getByLabel("Carousel with links to works of art")
    .locator(".carousel-item");
  await expect(carouselItems).toHaveCount(10);
});

Note that I've opted for user-friendly locators over CSS wherever possible and avoided using functions like page.click() that are discouraged.

If you require a "greater than or equal to" check, consider this approach:

await expect(async () => {
  const count = await page
    .getByLabel("Carousel with links to works of art")
    .locator(".carousel-item")
    .count();
  expect(count).toBeGreaterThanOrEqual(10);
}).toPass();

If you're not utilizing @playwright/test, your usage of document.querySelectorAll is acceptable but somewhat verbose. A streamlined version could look like this:

const playwright = require("playwright"); // ^1.42.1

let browser;
(async () => {
  browser = await playwright.firefox.launch();
  const page = await browser.newPage();
  await page.goto("<Your URL>");
  // ... Same actions as described above ...
  const sel =
    '[aria-label="Carousel with links to works of art"] .carousel-item';
  await page.waitForFunction(
    `[...document.querySelectorAll('${sel}')].length >= 10`
  );
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

On a side note, ChatGPT may not be reliable when it comes to Playwright-related advice - it can sometimes produce incorrect code snippets. Ensure to validate your assertions properly. Here's an example of invalid code generated by ChatGPT:

// ❌ This always passes even though it should fail
await expect.toPass(() => {
  expect(42).toBeGreaterThanOrEqual(1000000);
});

This assertion always passes, which can lead to false confidence. To make sure tests work correctly, use the following pattern:

// ✅ This fails as expected
await expect(() => {
  expect(42).toBeGreaterThanOrEqual(1000000);
}).toPass();

What is the reason behind the inability to utilize page.locator within a page.waitForFunction?

Answer №1

Similar questions

Testing components in React involves creating or invoking specific construct or call signatures

Exploring the Usage of Jasmine Testing for Subscribing to Observable Service in Angular's OnInit

Tips for implementing asynchronous operations within the constructor

Is passing data through interfaces a suitable practice in TypeScript?

Encountered an issue during the migration process from AngularJS to Angular: This particular constructor is not compatible with Angular's Dependency

Start by prioritizing items with a higher click count when looping through the

Using TypeScript to return an empty promise with specified types

According to Typescript, the index property of each matchAll() match is of type (number | undefined)

Creating a one-dimensional array without utilizing the FlatMap method

Creating applications with Angular2 and TypeScript is possible even without utilizing NPM for development

Null reference exception in Typescript + NextJS

Error: AWS.CognitoIdentityCredentials does not work as a constructor

Delay the Ngrx effect by 2 seconds before initiating the redirect

Having trouble troubleshooting React Typescript in Visual Studio Code?

No routes found to match - Issue encountered in Ionic 5 Angular project

What is the best way to target the following input field in React Native for focus?

Changing Angular 2 web app code to Ionic 2 mobile app code?

The parameter type '{ src: string; thumb: string; }' cannot be assigned to the 'never' type in the argument

Retrieve user-specific information through a modal when the API is clicked

What is the best way to change a Date stored in an array to a string format? [angular4]