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

前文提到 Nightwatch 本身自带有 click() 事件，只是 Safari 点击 div 会失败。
不过还有其他情况是，即使不是使用 Safari 进行 E2E 也会出现的问题。

Sticky Footer

这个一个 Sticky 的 Footer，也就是会固定显示在画面最下方。
Sticky Footer 可能用在显示次要资讯、进度条或是功能选单
假设在某段之後有个 Button 需要点击，如果使用 click() 会出现

An error occurred while running .click() command on <button>: element not interactable

这是因为 click() 这个指令虽然可以 scroll into view，但也就是滚动浏览器直到物件出现在萤幕可见区域。因此是会被固定的 Footer 挡住的。

解决方法有几个：

• 直接使用 Javascript 点击（前文的 clickDiv()）
• 模拟真实情境，滚动至画面中央再点击
• 使用 setValue()

clickDiv()

如同前文提到的方法，直接使用 document.queryselector(selector).click() 点击，不过要注意的是，并不是每个 tag 都有 click() 事件。如：<svg>

scrollIntoView()

既然原本的 click() 带的 scroll into view 不好，那就自己写一个吧！

做法也很简单，只要带入 center 的参数就好了：

document.querySelector(selector).scrollIntoView({
    behavior: 'smooth',
    block: 'center',
    inline: 'center',
});

command 的形式：

exports.command = function(selector, callback) {
  callback = callback || function() {};
  this.execute(
    function(selector) {
      document.querySelector(selector).scrollIntoView({
        behavior: 'smooth',
        block: 'center',
        inline: 'center',
      });
    },
    [selector],
    function(result) {
      callback.call(this, result);
    },
  );

  return this;
};

setValue()

这个我觉得算是比较 tricky 的方式，主要是利用对 button 送出空白键来触发点击：

browser.setValue('button', ' ');

总结

如果如果单纯只是想测试按钮是不是好的，其实前文的 clickDiv() 就可以了，不过如果有串像 BrowserStack 能够自动截图和录影的服务，其实模拟真实操作还是比较好的。而 setValue() 也可以滚动到视窗显示范围，并且成功送出，只不过录影或截图画面还是看不到按钮本身。