javascript - 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:WAITING请求

使用page.waitForResponse在您希望脚本继续之前等待特定的响应发生。示例:

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

选项 2:WAITING第二个下拉框被填充

正如您所说，请求填充另一个下拉框(我猜是 select 元素)，您可以使用 page.waitForFunction函数等待直到选择框被填满。示例:

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

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