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 bees 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?

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 bees 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?

• javascript
• reactjs
• puppeteer

• I think you forgot to write what the question was, but I assume that the expect fails because the dropdown hasn't rendered yet. – mzedeler Commented Jun 10, 2019 at 17:30

2 Answers 2

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).

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