Кукольник: дождитесь завершения запроса после выпадающего списка

Question

Я пишу тест для своего приложения React.

У меня есть два выпадающих списка.Как только выбор сделан в первом, запрос выборки запускается, и данные из этого запроса выборки используются для заполнения второго раскрывающегося списка.

Мой тест выглядит следующим образом:

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

В данный момент этот тест не пройден, как мне сказать, чтобы он дождался завершения запроса на выборку, прежде чем проверять, отключен ли [data-testid="fruit"]?

Answer 1

У вас есть два варианта:

1. Дождаться окончания запроса / ответа
2. Дождаться, пока заполнится второй выпадающий список

Вариант 1: ожидание запроса

Используйте page.waitForResponse, чтобы дождаться определенного ответа, прежде чем продолжить выполнение сценария. Пример:

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

Вариант 2: дождитесь заполнения второго раскрывающегося списка

Поскольку вы говорите, что запрос заполняет другой выпадающий список (я предполагаю, что элемент select), вы можете использовать функцию page.waitForFunction, чтобы дождаться заполнения поля выбора. Пример: * 1 027 *

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

Атрибут length в поле выбора будет проверять, сколько элементов option находится внутри. Таким образом, проверяя, является ли length ненулевым, мы ждем, пока поле выбора не заполнится. Это предполагает, что поле выбора пусто в начале (length равно 0).

Answer 2

Если вам нужно что-то ждать, используйте одну из waitFor -функций, описанных в руководстве, например, waitForFunction .