小程序自动化测试

背景

近期团队打算做一个小程序自动化测试的工具，期望能够做的业务人员操作一遍小程序后，自动还原之前的操作路径，并且捕获操作过程中发生的异常，以此来判断这次发布时候会影响小程序的基础功能。
上述描述看似简单，但是中间还是有些难点的，第一个难点就是如何在业务人员操作小程序的时候记录操作路径，第二个难点就是如何将记录的操作路径进行还原。
自动化 SDK

如何将操作路径还原这个问题，当然首选官方提供的 SDK： miniprogram-automator 。

小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。通过该 SDK，你可以做到以下事情：

• 控制小程序跳转到指定页面

• 获取小程序页面数据

• 获取小程序页面元素状态

• 触发小程序元素绑定事件

• 往 AppService 注入代码片段

• 调用 wx 对象上任意接口

• …
  

上面的描述都来自官方文档，建议阅读后面内容之前可以先看看 官方文档 ，当然如果之前用过 puppeteer ，基本是无缝衔接。下面简单介绍下 SDK 的使用方式。

如果对软件测试、接口、自动化、性能测试、测试开发、面试经验交流。感兴趣可以785128166，群内会有不定期的发放免费的资料链接，这些资料都是从各个技术网站搜集、整理出来的，如果你有好的学习资料可以私聊发我，我会注明出处之后分享给大家。

有个地方需要提醒一下：使用 SDK 之前需要开启开发者工具的服务端口，要不然会启动失败。

捕获用户行为

有了还原操作路径的办法，接下来就要解决记录操作路径的难题了。

在小程序中，并不能像 web 中通过事件冒泡的方式在 window 中捕获所有的事件，好在小程序所以的页面和组件都必须通过 Page 、 Component 方法来包装，所以我们可以改写这两个方法，拦截传入的方法，并判断第一个参数是否为 event 对象，以此来捕获所有的事件。

// 暂存原生方法
const originPage = Page
const originComponent = Component

// 改写 Page
Page = (params) => {
  const names = Object.keys(params)
  for (const name of names) {
    // 进行方法拦截
    if (typeof obj[name] === 'function') {
      params[name] = hookMethod(name, params[name], false)
    }
  }
  originPage(params)
}
// 改写 Component
Component = (params) => {
  if (params.methods) {
      const { methods } = params
      const names = Object.keys(methods)
      for (const name of names) {
        // 进行方法拦截
        if (typeof methods[name] === 'function') {
          methods[name] = hookMethod(name, methods[name], true)
        }
      }
  }
  originComponent(params)
}

const hookMethod = (name, method, isComponent) => {
  return function(...args) {
    const [evt] = args // 取出第一个参数
    // 判断是否为 event 对象
    if (evt && evt.target && evt.type) {
      // 记录用户行为
    }
    return method.apply(this, args)
  }
}