自动化 End-End 测试 Nightwatch.js 之踩雷笔记：等待物件

前一篇利用 Nightwatch.js 的 pause()，并透过 global 设定了不同的等待时间。例如 pauseLogin(), pauseSearch() 等方法。不过由於这个专案是利用 Gitlab 的 CI/CD 并串接 BrowserStack，因此实际在执行等待的时间会与本机开发不尽相同，除此之外，测试的目标网站也有可能分 dev/staging，如果 server 规格不同，也有可能造成等待时间的问题。如果只是多等一段时间还好，但如果等不够久就会造成错误。

waitForElement

Nightwatch 中有提供主要两种模式

• visible() 是物件仍会存在，但 display 为 none 或 hidden
• present() 是物件直接被移除

如果加上 not 就会总共有四种指令可以使用

• waitForElementVisible()
• waitForElementNotVisible()
• waitForElementPresent()
• waitForElementNotPresent()

使用方法皆相同，都是：

browser.waitForElementVisible([using], selector, [timeout], [callback], [message]);

• using: Css/Xpath
• selector: 物件选择
• timeout: 预设为最多等待 5 秒
• callback: 可带入 callback function
• message: 客制的讯息，预设为 Element present in ? millisecond

Snackbar

如果载入动画是像这样，且显示完後 snackbar 会被修改成 display: none;，则可以写成：

browser.waitForElementNotVisible(
  '[class="MuiSnackbar-root MuiSnackbar-anchorOriginTopCenter"]',
  5000,
);

如果 snackbar 会被移除，则可以写成像这样：

browser.waitForElementNotPresent(
  '[class="MuiSnackbar-root MuiSnackbar-anchorOriginTopCenter"]',
  10000,
);

透过以上方法就可以最多等待 10 秒。如果资料在这时间内载入完成，snackbar 也被移除，就可以在 10 秒之内进入下一个测试。如此一来不仅比 pause(10000) 更有效率，也使测试更有弹性。

预设等待时间

前面有提到透过设定 timeout 可以决定要等待多久，例如前面例子所举的 10 秒钟，不过如果每次都要打一次，就变得比较麻烦。

因此 Nightwatch 有提供 waitForConditionPollInterval 一次设定等待时间 (ms)：

const nightwatchConfig = {
    waitForConditionTimeout: 10000,
}

客制化

使用 waitForElementPresent 加上时间、selector 整体看上去会很长，因此可以变成：

// commands.js

module.exports = {
  command: async function() {
    this.waitForElementNotPresent(
      '[class="MuiSnackbar-root MuiSnackbar-anchorOriginTopCenter"]',
      10000,
    );
  },
};

browser.waitSnackbar()

总结

这篇大致说明了 Nightwatch 中比较好的等待方法，像是 waitForElementPresent(), waitForElementVisible()，并介绍透过 nightwatch 的 config 设定基本的 timeout。最後则是说明可以利用客制化方式，让测试档案更容易看懂，也透过共用指令可以一次调整多个档案。不过 waitForElementVisible() 这方法其实有一个缺陷，下一篇再来说明实际案例与原因～