录制用户操作实现自动化任务

今天也想MK代码2024-03-07 17:57

先上视频！！

流程自动化工具-录制操作绘制流程

这个想法之前就有了，趁着周末时间给它撸出来。

实现思路

从之前的文章自动化桌面未来展望中已经验证了录制绘制流程图的可行性。基于DOM录制页面操作轨迹的思路监听页面点击、输入事件即可，同时获取当前操作元素的Xpath，最后生成之前定义数据格式。

复制代码

// 监听点击事件
  document.body.addEventListener('click', _throttleOnClick, {
      capture: true, 
      passive: true,
    })

// 监听输入事件
   document.body.addEventListener('input', _throttleOnInput, {
      capture: true,
      passive: true,
    } )

操作数据重复过多？

当在输入框输入字符时，每次都触发输入事件，发现打印出来数据很多，例如：第一次输入'q',触发了一次，此时记录了'q',紧接输入'w',触发了一次，此时记录'qw',而真正想要的是最后一次的'qw', 而不是['q', 'qw']，因此得做了一个数据去除重复的，思路：把xpath作为唯一key，遍历数组，只要上次操作xpath与xpath一致，就把上一次xpath数据去除。点击事件也是如此。

周末愉快

不上班，呆在浏览器的时间还是一样的多！！哈哈