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

前篇提到可以利用 waitForElementVisible() 去等待一个物件的 display 变成 none 或 hidden。

<div id="status" style="display: none;">
    <div class="text">载入中</div>
</div>

测试：

this.waitForElementNotPresent('#status', 60000);

// Element <#status> was not present after 4004 milliseconds.

不过如果测试环境使用的是 Safari:

Error while running .isElementDisplayed() protocol action: The command 'GET /session/ID/element/ID/displayed' was not found.

这是因为 Safari 的 WebDriver 并没有 displayed 这个 endpoint。

解法

1. 直接修改前端
   移除透过修改 display 的部分，直接把 element 移除比较简单XD

2. 撰写客制化指令
   利用 getCssProperty() 更新该 element 的 display

module.exports = {
  command: async function() {
    let currentStatus = '';
    while (currentStatus !== 'none')
      this.getCssProperty('#status', 'display', result => {
        currentStatus = result.value;
        this.pause(500);
      });
  },
};