clearValue()

clearValue() 與 setValue() 常常會一起搭配使用，目的不外乎就是填入輸入欄位。
使用方式也很簡單：

browser.clearValue('input[type=text]')
browser.setValue('input[type=text]', input text')

clearValue() 只需要將 selector 帶入即可，也可以在前面定義使用 xpath 或 css selector:

browser.clearValue('xpath', '//input[@id="searchQA"]')

同理 setValue() 也是相同的做法。

不過這邊有個小雷點，clearValue() 的操作方式是直接將 input 的 value 清空。因此如果使用的前端框架是透過 Virtual DOM 在綁定值時，clearValue() 並不會成功觸發 binding
有趣的部分是，setValue() 是可以達到模擬輸入文字的，因此當我們先對一個輸入欄位清空後再設定值，是可以真的清空並輸入成功的，也就是成功 binding
當然，如果是有使用 onBlur() 的輸入，單純的 setValue() 也是無法成功設定到想要的值

輸入留白

E2E 既然要可以完整測試，error handling 也是不能缺少的。
因此，既然要模擬真的清空輸入後可以成功更新到值，我們可以往幾個方向思考：

清空輸入後點擊空白處

利用離開 onFocus() 的概念，觸發更新輸入欄位。聽起來很合理，實際上卻會遇到問題。
在 W3C 標準之後，對於操作滑鼠與鍵盤的事件已經不再建議使用了，Safari 更是直接無法使用，像是：

browser
    .setValue('input[type=text]', [browser.Keys.a, browser.Keys.x])
    .mouseButtonDown(0)
    .mouseButtonUp(0)

因此，就必須思考其他方式達到清空輸入。

setValue()

先前提到 setValue() 是可以模擬鍵盤輸入的，而其使用的是 utf-8 的字串格式。
所以我們可以利用輸入刪除鍵的方式達到清空輸入欄位：

browser.setValue(input[type=text], '\u0008');

透過送出一個刪除的字元可以刪除一個字，如果希望可以更通用一點，稍加修改變成：

browser.getValue(_selector, result => {
      [...result.value].forEach(() => {
        browser.setValue(_selector, '\u0008');
      });

最後修改成客製化指令：

module.exports = {
  command: async function(_selector) {
      this.getValue(_selector, result => {
      [...result.value].forEach(() => {
        browser.setValue(_selector, '\u0008');
      });
  }
}