表单元素输入

表单元素，如 input，textarea 等字符输入元素可以通过 formInput 模拟逐字输入。

formInput: https://macacajs.github.io/macaca-wd/#formInput

普通元素输入内容

普通元素通过设置 contenteditable 属性也可以进行输入，通过 elementInput 可以模拟逐字输入。

elementInput: https://macacajs.github.io/macaca-wd/#elementInput

输入的例子

比如这个常见的场景案例，给一个登陆框输入账户密码：

it('input should be correct', () => {
  return driver
    .getUrl(`${BASE_URL}/antd-sample#login`)
    .elementByCss('[accessbilityId="username"]')
    .formInput('username')
    .elementByCss('[accessbilityId="login"]')
    .click()
    .elementByCssOrNull('#app > form > div:nth-child(1) .ant-form-explain')
    .then(res => assert.deepEqual(res, null));
});

示例源码参考：链接，可以拉一下代码跑跑看。

更加通用的 API

domEvent: 给目标元素派发键盘事件，通过 domEvent 模拟几乎任何浏览器的事件，完成测试触发等目标 https://macacajs.github.io/macaca-wd/#domEvent

目前支持：

mouseEvents 中的单击、双击、拖拽、滚轮等事件
keyboardEvent 中的键盘行为
UIEvents 中的提交，失焦点、选中
bubbleEvents 中的滚动、改变大小
TouchEvent 中的触摸开始、移动、结束
GestureEvent 手势等操作

事件支持列表见：https://github.com/macacajs/dom-event-simulate

文件上传场景

文件上传的 input[type="file"] 元素框的弹出与 alert confirm 一样，会 block 浏览器的 BOM 行为，将交互权限交给用户，处理比较麻烦。通过 domEvent 模拟 change 事件的响应可以简单解决文件上传的问题。

var element = document.querySelector('#input');

element.addEventListener('change', function(e) {
  console.log(e.target.files);
}, false);

domEvent(element, 'change', {
  data: {
    target: {
      files: [
        {
          file: 'file1.png',
        },
        {
          file: 'file2.jpg',
        }
      ],
    },
  }
});

表单元素输入

普通元素输入内容

输入的例子

更加通用的 API

文件上传场景

相关链接