耗时接近3个月肝出了一个页面元素权限自动化测试工具

1、前言

公司的一个后台管理系统项目比较庞大，模块多，功能多，角色多，每个角色的权限不同，可进入的页面也就不同，页面中的按钮也不同，这样一个系统如果遇到一次大的升级改造那么就需要投入大量的测试精力去测试每个页面及页面中按钮的权限是否正确，此时Leader就有想法了，能不能用node打造一个自动化测试的工具呢？，于是一个神圣而又艰难的任务就派给我了。

由于之前没接触过自动化测试，突然让我用node写这样一个工具，我肯定是不知道从何下手的，于是本能的去Github上搜索看有没有类似产品，找到了以下这些，但都不满足我的需求：

• Autoline
  国内大牛用Python写的一个工具，他把python的功能转化成了UI，然后我们在自动化测试工具的管理后台就可以一步一步添加测试步骤，但它有个致命问题--测试步骤不能调整顺序，前面一步错了后面所有的步骤都白费
• Autotest_platform
  一款基于 POM 模式开发的 Web UI 自动化测试平台
• UI Recorder
  UI Recorder是由阿里开发的一款面向多端的 UI 自动化录制工具，类似于Selenium IDE 但比Selenium IDE 更加强大!
  这个工具属实是强大，最开始就想用它的，最后发现它还是不能满足我的需求

我想要的效果到底是怎么样的呢，请看下面这张Gif图（我接近3个月的成果）：

2、技术栈

主栈：node.js+puppeteer
其他依赖：

1. lowdb
   存储测试结果数据
2. log4js
   写日志
3. desktop-screenshot
   屏幕截图，只在启动浏览器时使用到，用来屏幕的宽高，在打开浏览器时根据屏幕大小设置浏览器大小
4. image-size
   获取图片大小，与【desktop-screenshot】结合使用
5. cheerio
   用来向测试报告模板的html中插入数据

为什么选择Puppeteer？
简单来说就是：因为Puppeteer是Chrome开发团队开发维护的并且基于nodejs的包

Puppeteer的功能：

• 可以操作鼠标、键盘输入、点击事件等行为
• 可以向页面插入js、css代码
• 可以向页面执行函数（任何页面中js能执行的代码都可以执行）
• 可以拦截页面中的请求
• 可以截图（只能截取当前页面）

3、难题

1. 怎么获取页面的数据？
   如用户信息、页面中的列表数据等
2. 怎么监听页面跳转了？
   比如正在执行A页面中的测试，突然认为的跳到B页面去了，此时应该结束A页面的测试
3. 怎么判断元素是否存在？怎么操作dom？
4. 怎么点击元素？

解决了上述问题，接下来就是如何编码的事情了。

4、实现原理

待我编写完开发手册后再来编写，嘻嘻...

5、测试报告、日志

测试报告（测试报告是用html写的，比word、excel更灵活）：

日志