小程序自动化测试的wx API拦截

发布日期： 2020-11-13 阅读量： 作者： 网络

微信小程序开发教程栏目小程序自动化测试的wx API拦截。

随着小程序越来越被广泛使用，我们前端的开发工作也从单纯的web开发，扩大到web+小程序的跨端开发。为了提高研发效率，越来越多的web模块需要迁移、更新，兼容小程序以实现跨端复用。而这些模块也会跟随业务进行迭代和版本更新，这时候，我们就需要有良好的测试来保障各端模块的可靠性。

由于我们将许多已有的web模块迁移到小程序，web端的测试相对已经比较完备了。因此我们需要考虑的是：

如何快速的将已有的web用例迁移到小程序
针对新模块，如何快速编写两端用例。

（我们在web端使用的主要是Puppeteer和Jest的搭配。）

可直接移步最终方案

测试模块类型

我们目前的模块主要是以下三种类型：

与环境无关的逻辑层模块
与环境关联的逻辑层模块
与环境关联的UI组件模块

类型1的模块由于不受环境限制，可与web共用单元测试，无需额外的测试用例开发。

类型3的模块，由于小程序与web端差异较大，比较难实现复用（目前我们的web UI层主要基于React，小程序使用原生开发，同时配合kbone进行部分页面的同构开发）。

我们这里主要针对类型2的模块进行测试用例的迁移。

小程序端测试工具选择

小程序官方目前提供了两种工具来支持小程序测试：

组件单元测试提供了一个测试工具集以支持自定义组件在 nodejs 单线程中运行。
小程序自动化为开发者提供了一套通过外部脚本操控小程序的方案。

通过官方工具结合Jest, Mocha等测试框架，我们可以实现在小程序环境下的测试。

我们选择了小程序自动化。类似于在Puppeteer运行web端的测试，我们可以通过小程序自动化，操控开发者工具，以实现小程序环境下的测试。两者的相似之处给我们实现测试用例的跨端迁移甚至复用提供了可能性。

如何迁移测试用例

以迁移一个上报模块的测试用例为例，如下是我们已有的一个web上报模块测试用例。

web测试用例

该用例覆盖的路径为：调用imlog.default.error()方法 -> 浏览器将发起请求 -> 对请求参数进行校验。

test('.error()调用正常', async done => {  const opts = {    project: 'imlogtest',
  };  // 检查上报请求的参数
  const expector = req => {    try {      const url = req.url();      const method = req.method();      const headers = req.headers();      const body = req.postData();      const data = JSON.parse(body);

      expect(url).toBe(DEFAULT_URL); // 请求的url符合预期
      expect(method).toBe('POST'); // 请求的method符合预期
      expect(headers['content-type']).toBe('text/plain'); // 请求的contentType符合预期
      expect(data.url).toBe(TEST_PAGE_URL); // 请求体的url字段符合预期

      done();
    } catch(error) {
      done(error);
    }
  };  // 监听上报请求并校验参数
  page.once('request', expector);  // 在浏览器中执行上报
  page.evaluate(    (o) => {      const reportor = window.imlog.default;
      reportor.config(o);
      reportor.error('test'); // 进行上报
    },
    opts
  );
});复制代码

# 小程序自动化测试 # wx API拦截

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯3467 】【 SEO推广3399 】

上一篇: 关于CentOS YAPI部署（代码分享）

下一篇: 一、Linux CentOS服务器购买、搭建与管理（图文全流

小程序自动化测试的wx API拦截

随便看看