touch-and-touch v0.5.31
touch and touch
无负担的 UI 自动化测试工具, 依赖基础标签的事件和 value 进行录制
安装
npm i --save touch-and-touch
创建实例:
import TouchAndTouch from "touch-and-touch";
document.body.append(TouchAndTouch({ name: "example" }));
录制事件
以下标签,我们会监听相应的事件:
监听输入变化:
- input
- textarea
- form
- select
监听点击事件:
- a
- button
- lib
- span
除了以上元素,其他元素需要监听点击事件,需要满足以下情况之一:
录制元素标志
只有具有 tat 属性的元素才会被录制
因为需要确保被录制的每个元素的唯一标识都是唯一的,每次执行值为确定的, 否则:
- 若遇到相同的唯一标识,touch-and-touch 会默认点击第一个;
- 若找不到上次记录的标识元素,会一直等待它出现.
touch-and-touch 在刚开始设计中,是可以自动拼接元素身上的属性进行捕获,但是这会带来一个致命缺点:在开发过程中由于元素的属性无可避免的会变化,若其中一个元素变化了,就会导致后续的录制无法被播放,从而反而影响了自动测试的复用性。
相信作者的经验,使用唯一 tat 作为录制标记,才是复用性最高的自动测试方案。
(不推荐)若对历史项目进行录制,某些页面不方便添加 tat 标记,可以勾选 自动标记
的开关进行录制,它会尽可能的找到多个属性进行组合作为记录的 id。
自动使用内容作为标记
注意,这种情况最好仅用于局部动态请求的数据内容,不建议在顶层使用。复用率最高的测试方案就是为每个需要交互的元素添加唯一的 tat 属性
若给一个元素添加 tat-auto
属性,会使用属性的值作为查找器查找子元素,并且将 textContent 设置为子元素 tat 值, 若要获取其他值作为 tat 值,可以定义 tat-auto-detail
属性
例子 1, 使用 tat-auto
<!-- 原始 DOM -->
<div tat-auto=".dog">
<button class="dog">button-a</button>
<button>button-b</button>
</div>
<!-- 自动处理过的 DOM -->
<div tat-auto=".dog">
<button tat="button-a" class="dog">button-a</button>
<button>button-b</button>
<div></div>
</div>
例子 2, 使用 tat-auto
+ tat-auto-detail
<div tat-auto=".dog" tat-auto-detail="textContent, class">
<button class="dog">button-a</button>
<button>button-b</button>
</div>
<!-- 自动处理过的 DOM -->
<div tat-auto=".dog">
<button tat="button-a, dog" class="dog">button-a</button>
<button>button-b</button>
<div></div>
</div>
忽略录制
若某个元素有:tat-ignore
属性,它及它的子元素的交互都不会被录制,例如我们的录制面板就是 tat-ignore
。
播放录制
根据录制的事件列表,会对不同的元素进行模拟动作
- input: 根据之前记录的 type,使用之前记录的 value 触发 oninput / onchange
- textarea: 根据之前记录的 type,使用之前记录的 value 触发 oninput / onchange
- form: 播放之前记录的每次 onchange 事件
- select: 根据之前记录的 type,使用之前记录的 value 触发 onclick
- a: 根据之前记录的 type,使用之前记录的 value 触发 onclick
- button: 根据之前记录的 type,使用之前记录的 value 触发 onclick
- 其他元素: 包含 tat-btn 属性的 div,根据之前记录的 type,使用之前记录的 value 触发 onclick
录制时使用 mockjs.Random
在 input 过程中可以直接输入:
mock.word(5, 10)!!
当输入值的过程, touch-and-touch
发现 !!
结尾的值时,会把 input value 作为函数进行执行,并且把返回值输入到输入框中, 当播放时,会重新执行函数,获取新的随机值进行测试
使用上下文变量
- 在第一输入框的输入过程中,可以直接输入:
set("a", mock.phone())!!
此时会获取一个随机手机号,并且存到 a 变量中,变量 a 会存储在 indexedDb 数据库中
- 在第二个输入框获取变量 a:
get("a")!!
此时会获取上一次的变量 a 作为值进行测试
主动提交记录
若某些非页面可以反馈的状态,我们希望 TouchAndTouch 进行校验,我们可以在状态达到条件时,主动在代码中使用 CustomEvent 提交记录:
window.dispatchEvent(new CustomEvent("tat", { detail: "done dog" }));
在播放时,会检测是否有在指定行为获取到 CustomEvent,来校验测试是否失败
生产环境进行测试
生产环境默认不应该加载 TouchAndTouch,您可以设置一个函数,当在控制台执行之后,执行 TouchAndTouch, 例子如下:
window.tat = () => {
sessionStorage.setItem("tat-creator");
window.location.reload();
};
if (sessionStorage.getItem("tat-creator")) {
import("touch-and-touch").then((tat) => {
document.body.append(tat.default());
});
}
然后在 Chrome 控制台中执行:
window.tat();
云端同步
- initData: 初始化列表数据
- onChangeData: 当数据写入 indexed 变更时的回调用
TouchAndTouch({
name:'example'
initData:async ()=>{
const data = fetch(...); // get list from cloud
return data;
},
onChangeData:(list)=>{
fetch(...); // push list to cloud
}
})
锁定面板
默认 Ctrl + L 锁定面板,可以自定义 lockCtrlKey
修改热键
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago