Puppeteer: wait for request to finish after dropdown selection

Question

I am writing a test for my React application.

I have two dropdowns. Once a selection is made in the first one, a fetch request is trigged and the data from that fetch request is used to populate the second dropdown.

My test looks like this:

test("fruit dropdown becomes enabled when food type fruit is selected", async () => {
  await page.select('[data-testid="food"]', "fruit"); // this makes a selection in the drop down and fires a request

  // I should wait for request to finish before doing this
  const isFruitDropdownDisabled = await page.$eval(
    '[data-testid="fruit"]',
    element => element.disabled
  );

  expect(isFruitDropdownDisabled).toBe(false);
}, 16000);

Right now that test fails, how do I tell it to wait until the fetch request has finished before checking if [data-testid="fruit"] is disabled?

Answer 1

You have two options:

1. Wait until the request/response is finished
2. Wait until the second dropdown box is filled

Option 1: Wait for the request

Use page.waitForResponse to wait for a specific response to happen, before you want your script to continue. Example:

await page.waitForResponse(response => response.url().includes('/part-of-the-url'));

Option 2: Wait for the second dropdown box to be filled

As you are saying that the request populates another dropdown box (I'm guessing a select element), you could use the page.waitForFunction function to wait until the select box is filled. Example:

await page.waitForFunction(() => document.querySelector('#selector-of-second-selectbox').length > 0);

The length attribute on a select box will check how many option elements are inside. So by checking if length is non-zero, this is wait until the select box is filled. This assumes, that the select box is empty at the start (length is 0).

Answer 2

If you need to wait for something, use one of the waitFor-functions described in the manual, such as waitForFunction.