Javascript Jest测试通常会失败，因为木偶演员不能点击DOM中的元素

问题摘要：我正在编写几个测试套件，使用Jest和Puppeter自动测试AngularJS应用程序的主页。我想自动化的测试之一是用几个md select字段填写表单，而我在自动选择特定md选项时遇到了一些麻烦。出于某种莫名其妙的原因，在点击md select打开选项对话框后，木偶演员似乎找不到该选项。以下是我的html的外观，您可以了解我正在处理的内容：

免责声明：为了向这个社区提供一个更简单的示例，我选择不复制和粘贴我的原始代码。所以，如果你发现了一个拼写错误，我可以向你保证这不是我问题的根源，因为我已经非常仔细地检查了我的原始代码中的拼写错误。对于以下代码中的任何输入错误，我深表歉意。我很警惕，但我是人，所以我会犯错误

运行我的测试的结果：

在我运行上述测试后，Jest说“提交表单”失败，并提供以下错误消息：

Node is either not visible or not an HTMLElement

await page.click(nameOptionSelector);
           ^

这意味着当木偶演员点击NameOptions Selector时，在DOM中找不到它。但是page.waitForSelectornameOptionSelector，{timeout:3000}似乎成功了，这告诉我调用page.click时nameOptionSelector在DOM中

故障排除尝试：

我获得“提交表单”通过的唯一方法是在页面上方添加此行。单击名称选项选择者：

。。。但这是一个糟糕的解决方案，因为它不精确，无法解决问题的根源

我也读过关于Puppeter的方法，但在我的例子中这不起作用，因为我没有使用原生HTML元素

---

问题：你们当中有谁知道解决这个问题的方法吗？

不幸的是，我也遇到了和你们一样的问题，在我的例子中，waitFor3000主要帮助了我。下面是一段代码，我一直向下滚动，直到到达页面底部，动态内容不断追加：

    let preCount = 0;
    let postCount = 0;
    do {
      preCount = await getCount(page);
      await scrollDown(page);
      await page.waitFor(3000);
      postCount = await getCount(page);
    } while (postCount > preCount);
    await page.waitFor(3000);

当我试图将等待时间从3秒降低到1秒或2秒时，我有时无法到达页面底部。我之所以知道这一点，是因为我在启动Puppeter时禁用了headless模式，所以我可以看到浏览器中发生了什么：

{
  headless: false,
  defaultViewport: null,
  args: ['--window-size=800,600']
}

---

考虑到它的angular应用程序，我假设有一些样式消失属性，比如style=display:none是由angular指令处理的，我不熟悉angular，所以我可能是错的

在这种情况下，单击会触发事件，从而更改按钮->的状态，使其出现/消失。这需要一些时间，所以page.waitFor函数似乎可以解决这个问题

page.WaitForSelector名称选项selector会立即解析，因为选择器已经存在。您可以通过在控制台中运行document.querySelector“md-option[value=Scout]”来检查它是否为真，然后再单击md select。在这两种情况下，您都应该获得document元素

但是，page.click尝试单击不可见的元素时失败。所以，您可以尝试等待其他将正确设置角度属性的选择器。可能是表示元素是否可见的元素

BTW，如果你的整个应用程序是用角度写的，考虑其他测试框架->因为它专用于角度应用程序

// this line tells the test to pause for 1 second before clicking
await page.waitFor(1000);

    let preCount = 0;
    let postCount = 0;
    do {
      preCount = await getCount(page);
      await scrollDown(page);
      await page.waitFor(3000);
      postCount = await getCount(page);
    } while (postCount > preCount);
    await page.waitFor(3000);

{
  headless: false,
  defaultViewport: null,
  args: ['--window-size=800,600']
}