自动化 End-End 测试 Nightwatch.js 之踩雷笔记：输入

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');
      });
  }
}