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：等待请求

在您希望脚本继续之前，使用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是否为非零，可以等待直到填充选择框。假设选择框在开始时为空（length为0）。

Answer 2

如果需要等待，请使用手册中介绍的waitFor功能之一，例如waitForFunction。

木偶：下拉列表选择后等待请求完成

2 个答案: