iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

自動化 End-End 測試 Nightwatch.js系列 第 5

自動化 End-End 測試 Nightwatch.js 之踩雷筆記:選取文字

如果想要測試的網站是類似具有文字編輯器功用的,像是 ithome 這種類型
假設我們想要將已打過的字體 Highlight 起來,並點擊粗體的按鈕,像是這樣:

https://ithelp.ithome.com.tw/upload/images/20210920/201202507xfdPyu9NQ.png

不知道各位都是怎麼選取,是利用點擊兩下?點一下拖曳?還是用 shift 加方向鍵呢?
很可惜的是,Nightwatch 是沒有直接對應的指令的。此外,由於前篇提及的 W3C policy,因此不論是點擊或是使用 shift,都無法在全部的瀏覽器上使用。

execute()

Nightwatch 有提供一個有趣的東西:execute
這個指令是用於注入一段 Javascript 的程式碼到目前的 frame,也可以帶入參數讓這個 function 完成更複雜的事(synchronous),官方範例如下:

this.demoTest = function (browser) {
   browser.execute(function(imageData) {
     // resize operation
     return true;
   }, [imageData], function(result) {
     // result.value === true
   });
}

其中的 args array 便是拿來帶入的參數,並會依照順序。

selectElementContent()

有了前面的 execute() 的概念後,就可以利用 Vanilla.js 做出選取文字的功能了。

回到最一開始,選取文字的方式可能是先點一下,接著往右/左移動,最後完成所想要的範圍,所以可以利用:

  • document.createRange();
  • document.querySelector(<selector>).selectNodeContents(<el>)
  • window.getSelection();

createRange() 用於定義一個範圍,接著使用 selectNodeContents() 全選指定的 DOM 內的文字,最後透過 getSelection() 回傳 selection 的範圍

整個 function 完成就像這樣:

function(selector) {
  const el = document.querySelector(selector);
  const range = document.createRange();
  range.selectNodeContents(el);
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
}, [selector], function(result) {
  callback.call(this, result);
},

或是一樣變成客製化的 command:

exports.command = function(selector, callback) {
  callback = callback || function() {};
  this.execute(
    function(selector) {
      const el = document.querySelector(selector);
      const range = document.createRange();
      range.selectNodeContents(el);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    },
    [selector],
    function(result) {
      callback.call(this, result);
    },
  );
  return this;
};

上一篇
自動化 End-End 測試 Nightwatch.js 之踩雷筆記:輸入
下一篇
自動化 End-End 測試 Nightwatch.js 之踩雷筆記:點擊物件
系列文
自動化 End-End 測試 Nightwatch.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言