时间戳

首页 > 解决方案 > Jest 测试经常失败，因为 Puppeteer 无法点击 DOM 中的元素

javascript - Jest 测试经常失败，因为 Puppeteer 无法点击 DOM 中的元素

问题描述

问题摘要：我正在编写几个测试套件（使用 Jest 和 Puppeteer）来自动化我的 AngularJS 应用程序主页的测试。我想自动化的测试之一是填写一个包含多个md-select字段的表单，我在自动选择特定的md-option. md-select由于某些莫名其妙的原因，似乎 Puppeteer 在单击打开选项对话框后找不到该选项。这是我的 html 的样子，因此您可以了解我正在处理的内容：

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

<!-- index.html -->
<html>
  <body ng-app="myApp" ng-controller="myCtrl">
    <form name="myForm">
      <md-dialog-content>
        <md-input-container id="animalSelect">
          <md-select>"Kittens"</md-select>
        </md-input-container>
        <md-input-container id="nameSelect">
          <md-select>"Cosmo"</md-select>
        </md-input-container>
      </md-dialog-content>
    </form>
    <!-- this dialog appears when first <md-select> is clicked -->
    <div class="md-select-menu-container">
      <md-select-menu>
        <md-content>
          <md-option value="Kittens">Kittens</md-option>
          <md-option value="Puppies">Puppies</md-option>
        </md-content>
      </md-select-menu>
    </div>
    <!-- this dialog appears when second <md-select> is clicked -->
    <div class="md-select-menu-container">
      <md-select-menu>
        <md-content>
          <md-option value="Cosmo">Cosmo</md-option>
          <md-option value="Scout">Scout</md-option>
        </md-content>
      </md-select-menu>
    </div>
  </body>
</html>

背景：我使用 Jest (v24.8.0) 作为我的测试框架。我正在使用 Puppeteer (v1.19.0) 来启动和控制无头 Chromium 浏览器。

我的破代码：

// index.spec.js
test('submit form', async() => {

    let formSelector = 'form[name="myForm"]';
    let animalSelector = '#animalSelect md-select';
    let animalOptionSelector = 'md-option[value="Puppies"]';

    let nameSelector = '#nameSelect md-select';
    let nameOptionSelector = 'md-option[value="Scout"]';

    await page.waitForSelector(formSelector, {timeout: 3000}); 
    await page.waitForSelector(animalSelector, {timeout: 3000}); 
    await page.waitForSelector(nameSelector, {timeout: 3000}); 

    // this works fine
    await page.click(animalSelector);
    await page.waitForSelector(animalOptionSelector, {timeout: 3000}); 
    await page.click(animalOptionSelector);

    // this fails: Jest says nameOptionSelector is not in the DOM (see error below)
    await page.click(nameSelector);
    await page.waitForSelector(nameOptionSelector, {timeout: 3000}); 
    await page.click(nameOptionSelector);
});

运行我的测试的结果：

运行上述测试后，Jest 说'submit form'失败并提供以下错误消息：

Node is either not visible or not an HTMLElement

await page.click(nameOptionSelector);
           ^

这意味着当 Puppeteer 去 click 时nameOptionSelector，它在 DOM 中找不到它。但是page.waitForSelector(nameOptionSelector, {timeout: 3000})似乎成功了，这告诉我在被调用nameOptionSelector时 DOM 中的 WAS 。page.click

故障排除尝试：

我可以'submit form'通过的唯一方法是在上面添加这一行page.click(nameOptionSelector)：

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

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

我还阅读了 Puppeteer 的page.select方法，但在我的情况下这不起作用，因为我没有使用原生 HTML<select>元素。

问题：你们中的任何 Jest/Puppeteer 黑客都知道解决方案吗？

标签： javascriptangularjsjestjspuppeteer

解决方案

不幸的是，我也遇到了与您类似的问题，await page.waitFor(3000)就我而言，主要是帮助了我。这是我用来继续向下滚动的代码片段，直到到达不断附加动态内容的页面底部：

    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 秒时，有时我无法到达页面底部。我知道这一点是因为我在启动 puppeteer 时禁用了无头模式，所以我可以看到浏览器中发生了什么：

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

推荐阅读