wb-ad-fe-auto-tester(Draft)

The auto front-end tester powered by user actions record and replay

基于用户行为录制和回放的前端自动化测试套件

背景及相关文档

All-in-one doc

开发文档

npm run doc-preview

架构

模块构成

Traffic Picker

User Actions Generator

Test Cases Generator

业务接入使用指南

1. 安装工具

npm install wb-ad-fe-auto-tester

2. 初始化工具

建议添加到script中

npx wb-auto-tester --init

init执行成功后,会在工作区安装测试相关的工具依赖, 并且生成三个文件/目录

• wb-auto-tester.config.js 工具的核心配置文件
• playwright.config.js 测试工具的配置文件
• auto-test-cases 测试用例的输出目录, 工具将会自动归档测试用例脚本

并且会给工作区添加四个新的可用命令

wb-auto-tester

wb-auto-tester --test

wb-auto-tester --debug

wb-auto-tester --replay

这三个命令分别对应了auto tester的三种工作模式, 分别是：

• 生成用例
• 测试模式
• 调试模式
• 回放模式

3. 根据需求修改配置+正确配置cheka+添加锚点上报

修改 wb-auto-tester.config.js 的配置

wb-auto-tester.config.js的配置说明

|参数|要求|备注| |:--:|:--:|:--:| |target|{title?:string,method:string,url:string,mode?:'regular'}|通过method和url来指定需要测试的锚点| |startDateTime|YYYY-MM-DD|起始日期| |endDateTime|YYYY-MM-DD|终止日期| |targetIds|string[]|指定需要测试的用户的sso_id列表| |ignoreIds|string[]|指定需要忽略的用户的sso_id列表|

module.exports = [
    {
        // 测试目标
        target: {
            // 测试标题
            title: '编辑创意',
            // 可选: url是否为正则模式
            mode :'regular',
            // 测试锚点请求方法
            method: 'post',
            // 测试锚点请求url
            // 支持配置为正则, 但是请注意转义符的使用
            url: '/v1/creative/\\d+',
        },
        // 搜寻埋点的目标时间区间
        startDateTime: '2023-09-25 14:00:00',
        // 搜寻埋点的目标时间区间
        endDateTime: '2023-09-25 15:00:00',
        // 需要查找的特定用户的sso_id
        targetIds : ['422342233'],
        // 需要忽略的特定用户的sso_id
        ignoreIds : ['111111111']
    }
];

wb-auto-tester.config.js的配置是一个对象数组，你可以同时配置多个不同的测试目标任务

现阶段，要接入自动测试工具，需要业务项目正确配置cheka并且手动增加锚点上报

3.2 正确配置cheka

考虑到cheka业务的设计规范和数据保存的数量级控制, 如果要正确的使用本项目, 需要确保在cheka上报配置上满足下面两点

1. 项目的上报域名以 ad.weibo.com结尾
2. 配置cheka的blur事件上报

// tips: 请注意要在cheka初始化之前配置
window.wbadmt.blur= true

3.2 锚点上报

锚点上报是指需要测试工具关注的，用户的最核心的操作或相关结果 最简单的例子就是用户对某一重要接口的调用

业务方只需要在相对应的业务代码里增加cheka埋点即可

当然，该埋点需要符合下面的参数要求

|参数|要求|备注| |:--:|:--:|:--:| |eventid|1338451| |eventvalue|JSON.stringify({method: string,url : string,mode?:"regular" params : any})|params: 请求该的body|

sendTracking({
  eventid: 1338451,
  eventvalue: JSON.stringify({
    method: "post",
      url: "/packet",
      params,
    }),
  });

3.2 修改配置cheka配置

在接入的项目中,修改cheka的配置,开启对blur事件的上报支持

window.wbadmt.blur = true

4. 生成用例

npx wb-auto-test

运行后, auto-tester将会根据```wb-auto-tester.config.js``中的配置,尝试生成测试脚本, 结果将会自动归档在auto-test-cases目录下

4.2 回放用户操作

回放模式，是专门针对需要检查用户操作的需求而实现的模式 在使用这一模式时，你需要准备好tid，并且进行设置 随后，工具将尝试对这个tid进行用户操作链路的获取和生成

具体来说，你需要在wb-auto-tester-config.js中进行如下配置

module.exports = [
  {
    startDateTime: "2023-05-08 16:05:00",
    endDateTime: "2023-05-09 16:07:00",
    tid : '4e96ecb9ac9aef1e1fa9677cc00b94d3'
  }
]

然后运行npx wb-auto-tester --replay， 工具会根据这个tid信息，尝试进行用户操作链路的回放生成

5. 运行测试/调试测试

工具具备2种测试模式

• 测试模式 npx wb-auto-tester --test
• 调试模式 npx wb-auto-tester --debug

在测试模式下, auto-tester将自动运行用例目录下的脚本, 并在完成后输出测试结果

如果你需要对特定的脚本/目录进行测试运行，那么你可以指定路径参数

npx wb-auto-tester --test $filePath

工具将会自动打开调试结果，在手动关闭后，你仍可以在playwright-report目录下找到结果

在调试模式下, auto-tester将以调试模式运行测试, 支持自动断点, 可以帮助你快速且可视化地调试测试用例

6. 主动修改脚本

在以调试模式运行后, 你当然可以自主地, 以任何方式修改脚本, 以满足自己的测试需求

修改后仍然可以无缝地以测试模式和调试模式运行用例, 直到得到满意的测试结果

7. 测试结果解读

在完成测试用例的运行后,项目会自动生成测试报告, 其中包含两个报告文件

1. playwright-report : playwright框架自动生成的报告, 展示了脚本的运行结果和每一步自动化操作的结果, 所有的结果都保存在playwright-report这个目录下

2. report.html : 本项目生成的报告, 用来聚焦结果, 会展示测试结果对应的脚本文件和具体的对象diff结果, 方便开发者快速精确地判断测试结果