點擊特定物件是 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