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

点击特定物件是 E2E 中很常会做到的事，如果本身物件有设定好特定的 ID, Class 或 Attribute，只要使用 Nightwatch 中提供的 click() 就可以了

.click() 这个指令是透过模拟点击 DOM element，且具备 scroll into view 的功能，也就是能够自动滚动至该物件。此外也能判断 DOM 是否能被点击。
使用方法也很简单：

.click(selector, [callback])
.click(using, selector, [callback])

selector 为 DOM 的选择器，using 则可以是 Css 或 Xpath，最後也有 callback function 可以使用。

Safaridriver

在撰写前端时，为了使 SEO 更好，时常会有将 <button> 改为 <div> 的做法。而这在 E2E 并使用 Safari 时就不是这麽方便的选择。
这个问题源自於 Safaridriver 对於可点击物件的判断。不过这篇不会细探，只会提供方法XD

clickDiv()

既然模拟 DOM 点不到，那就用 Javascript 去点吧！

document.querySelector(selector).click();

很简单吧！
但只有 Css selecot 还是不够的，虽然物件可以透过预先加入 ID, Class 或 Attribute，但如果每个都加可能会变得很麻烦。因此可以利用 Xpath：

• text() 是用来寻找并定位特定的文字位置
• starts-with 匹配一个属性开始位置的关键字
• contains 匹配一个属性值中包含的字串

举例来说，可以像是这样使用：

//input[text()='搜寻文字'] 

而点击 Xpath 的方法也很简单：

document
  .evaluate(
    selector,
    document,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null,
  )
  .singleNodeValue.click();

有了 Css/Xpath 的点击方法後，就可以修改我们的 clickDiv() 了：

exports.command = function(using, selector, callback) {
  callback = callback || function() {};
  using = using || 'css';
  if (using === 'css') {
    this.execute(
      function(selector) {
        document.querySelector(selector).click();
      },
      [selector],
      function(result) {
        callback.call(this, result);
      },
    );
  } else {
    this.execute(
      function(selector) {
        document
          .evaluate(
            selector,
            document,
            null,
            XPathResult.FIRST_ORDERED_NODE_TYPE,
            null,
          )
          .singleNodeValue.click();
      },
      [selector],
      function(result) {
        callback.call(this, result);
      },
    );
  }

  return this;
};

然而，点击物件这件事还没结束，明天还有另外一篇，继续说说我在处理点击遇到的其他雷点QQ