Puppeteer：在下拉选择后等待请求完成

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函数等待选择框被填充。例子：

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

length选择框上的属性将检查option里面有多少元素。因此，通过检查是否length为非零，这是等到选择框被填充。这假设选择框在开始时为空 ( lengthis 0)。