点一点，自动生成 web UI 测试用例

[chiyan-lin]

背景和目的

随着业务的发现，公司开始推行单测，前端作为UI展示，各种组件要写测试用例，对忙碌的前端仔来说，无疑是加多了很多写测试用例的工作量。

在写UI单测的时候，最麻烦的就是mock数据以及测试脚本的书写。jest提供了很多开箱即用的测试工具，配合上 vue-utils 的测试库其实也能减少很多麻烦的操作。

实际操作中，测试用例是由开发通过手工编写代码生成的，这里的手工有两层含义：手工编写模拟用户操作的代码、手工编写验证执行结果正确性的代码。得到的测试代码往往只是用作流程的串联，导致大家的成就感低，而且由于需要编写代码，成本较高，所以写测试用例的意愿也不强烈。

为了打破这种恶性循环，可以从不愿编写测试用例这一块下手，将测试的成本尽可能降低，降低到测试对于开发人员而言没有额外负担，从而令大家愿意进行测试。
那么长此以往，随着测试用例的增加，项目质量得以提升，现网问题逐渐减少，就能有更多的时间进行业务开发，令质量进一步上升，变成一个正向循环。

而写UI单测，其实就是模仿界面上的交互操作，然后看页面展示是不是符合预期，这其实黑盒测试。如果我们能把测试过程的操作记录下来，然后重放这个操作，是不是也可以达到同样的目的。

方案实现

实现一个nodejs软件，测试人员或者开发安装软件，然后通过指令触发软件的运行。

整体实现上，难点主要在测试用例的录制，录制后重放，以及测试结果的校验这三块。整个过程需要保障录制用户行为的准确性，测试结果的后端数据的一致性（测试结果的校验用图像对比的方式，所以需要要求在用例重放的过程，后端数据跟录制时是一样的）

基本交互

项目管理界面

测试用例管理界面（关联项目）

用例录制

在页面打开的时候，会注入操作面板代码，在页面悬浮。用户点击开始录制，record 脚本开始记录当前操作的全部行为。

ababa.mp4

其中，截个图的作用是记录当前系列操作的结果，也就是测试期望。生成的图片会上传到图片服务器，存储起来用于对比。

重放测试就是运行录制的操作的操作效果，在这里是一个简单的重播功能。点击结束录制就会将刚才的录制记录进行保存。

生成的记录如下：

[ 
        {
            "event" : "click",
            "value" : "470,139",
            "target" : "/HTML/BODY[1]/DIV[1]/DIV/DIV/DIV[1]/MAIN[1]/DIV/DIV[1]/DIV[1]/DIV[1]/DIV/HEADER[1]/NAV/UL[1]/LI[3]/A"
        }, 
        {
            "event" : "click",
            "value" : "536,142",
            "target" : "/HTML/BODY[1]/DIV[1]/DIV/DIV/DIV[1]/MAIN[1]/DIV/DIV[1]/DIV[1]/DIV[1]/DIV/HEADER[1]/NAV/DIV[1]/DIV/LI[1]"
        }, 
        {
            "event" : "click",
            "value" : "558,233",
            "target" : "/HTML/BODY[1]/DIV[1]/DIV/DIV/DIV[1]/MAIN[1]/DIV/DIV[1]/DIV[1]/DIV[1]/DIV/HEADER[1]/NAV/DIV[1]/DIV/UL[1]/LI[3]/A"
        }, 
        {
            "event" : "click",
            "value" : "370,140",
            "target" : "/HTML/BODY[1]/DIV[1]/DIV/DIV/DIV[1]/MAIN[1]/DIV/DIV[1]/DIV[1]/DIV[1]/DIV/HEADER[1]/NAV/UL[1]/LI[1]/A"
        }, 
        {
            "event" : "screenShot",
            "target" : "system",
            "value" : "/2021-9-28/KGHTWCQ1E0V914POXH9MFY.jpeg"
        }
    ]

对于已经录制好的单测，就可以进行测试用例的执行，执行效果其实跟测试重放一致，最终会生成测试报告。

测试报告

在进行录制重放的时候，会将对应一次测试过程的所有用例进行重放，最后验证用例是否通过的标准就是在同样位置的截图进行像素对比，根据两张图片像素是否有区别来判断用例是否通过。

这是一篇比较偏产品介绍的文章，接下来会比较具体的技术实现。