點擊物件是蠻基本的操作，不過還是有很多地方需要注意。

回顧

第一天提到了如果該物件是 div，例如這個問號 Icon，在 Safari 會無法成功點擊，可以利用之前客製化的 clickDiv() 來完成

第二天則提到如果物件被遮蔽，則一樣可以使用 clickDiv() 、setValue() 送出空白鍵或先 scollIntoView() 滾動至畫面中間位置再進行點擊

因此點擊一個物件需要注意：

• 所設定的 selector 是否正確，也可以搭配以下屬性
  • :n-child()
  • :first-child
  • :last-child
• 物件是否為 <div>
• 物件是否被遮蔽

不過還有一種情況是點擊物件的特定位置，像是這樣：

單純點擊只會點擊物件的 (0, 0) 位置，但如果想要調成特定的數值，就必須加入 offset

moveToElement() & mouseButtonClick()

這個指令可以移動滑鼠到物件的特定位置，如果沒有給 offset 也可以移到物件正中間，也具備 scroll into view 的特性。

browser.moveToElement(using, selector, xoffset, yoffset, [callback])

不過移動位置還不夠，還必須點擊才行，這時不能使用 click()，而是需要使用 mouseButtonClick()

browser.mouseButtonClick(button)

button 為點擊滑鼠的哪一個按鈕，分別可以是：(0, 1, 2) 或 ('left', 'middle', 'right')

clickOnElement()

不過可惜的是，上面 moveToElement() 與 mouseButtonClick() 在 Firefox/Safari 同樣因 W3C/WebDriver protocol 而無法使用。

因此同樣依照之前寫 clickDiv() 的想法，利用 Javascript 去觸發。

大概的想法是這樣：

• getBoundingClientRect() 用於取的該物件的長寬高及 x, y 座標
• 計算 offset
• 加入 MouseEvent()
• 最後 dispatchEvent()

取得座標

let elem = document.querySelector(selector);
let rect = elem.getBoundingClientRect(),
    posX = rect.left,
    posY = rect.top;

計算點擊的 offset

if (typeof offsetX == 'number') posX += offsetX;
else if (offsetX == 'center') {
posX += rect.width / 2;
if (offsetY == null) posY += rect.height / 2;
}
if (typeof offsetY == 'number') posY += offsetY;

加入 click 的 MouseEvent

var evt = new MouseEvent('click', {
        bubbles: true,
        clientX: posX,
        clientY: posY,
      });

dispatchEvent

elem.dispatchEvent(evt);

command 形式

exports.command = function(selector, offsetX, offsetY, callback) {
  callback = callback || function() {};
  this.execute(
    function clickOnElement(selector, offsetX, offsetY) {
      let elem = document.querySelector(selector);
      let rect = elem.getBoundingClientRect(),
        posX = rect.left,
        posY = rect.top;
      if (typeof offsetX == 'number') posX += offsetX;
      else if (offsetX == 'center') {
        posX += rect.width / 2;
        if (offsetY == null) posY += rect.height / 2;
      }
      if (typeof offsetY == 'number') posY += offsetY;
      var evt = new MouseEvent('click', {
        bubbles: true,
        clientX: posX,
        clientY: posY,
      });
      elem.dispatchEvent(evt);
    },
    [selector, offsetX, offsetY],
    function(result) {
      callback.call(this, result);
    },
  );
  return this;
};

總結

這三天完成了點擊幾個比較特別的情況，大致上把會遇到的問題都寫完了。接下來會介紹透過客製化指令，達成一些組合技的測試，使測試檔案簡潔好看～