微信小程序测试方案,小程序测试用例

欢迎大家前往腾讯云社区，获取更多腾讯海量技术实践的晾衣架哦~

作者： zsdpy

前言2017年1月9日微信小程序正式上线，不安装小程序就可以使用了。 依托微信强大的生态环境，我们可以做很多H5做不到的事情。 自微信小程序发布以来，许多与小程序相关的项目不断开发，将一些共性的组件集成在一起。 但是，对于小程序如何进行测试，仍然很混乱。 做很多项目，积累经验和开源库，然后整理如何进行测试。 以下内容介绍了小程序的UI测试和单元测试。

工具准备nodepuppeteerweptmochachai位于node

这个应该不需要太多介绍，但是这次的demo要求node版本大于7.6.0。 虽然puppeteer要求最低版本为v6.4.0，但官方示例使用了大量的async/await等新功能，因此必须使用v7.6.0及更高版本的node、async/await

puppeteer

Chrome团队提供的更友好的Headless Chrome Node API用于替代用户在页面上单击、拖动和输入等许多操作。 常见的使用场景仍然适用于UI自动化测试，puppeteer可以将页面截图保存为图像或PDF，以解决爬虫无法实现的操作(异步加载页面内容)。

类似的工具：

* phantomjs

* seleniumhq

* nightmare

wept

wept将小程序与开发者工具或微信客户端分离，直接在浏览器上运行，在后台使用node模拟返回小程序API (wx.log in，wx.getUserInfo )

mocha

JavaScript测试框架可以在浏览器和Node环境中使用。 使用测试框架，可以向JavaScript代码中添加相应的测试用例，以使项目代码更健壮。

chai

Chai是一个BDD/TDD模式的断言库，运行在node和浏览器环境下，API简单易懂，断言类型和方式丰富，与mocha相结合，江湖人戏称之为“抹茶”

配置环境npm i -g wept

npmi-save-devpuppeteermochachai

安装puppeteer时可能会发生以下错误

error : failedtodownloadchromiumr 508693！ set ' puppeteer _ skip _ chromium _ download ' envariabletoskipdownload.error 3360 download failed 3360 serverreturnedcode 55550 chromium-browser-snapshot s/win _ x64/508693/chrome-win32.zipatclientrequest.https.get.reet utils chromium downloader.js :197:21 (at object.once wrapper (events.js 336031636030 ) atemitone ) events.js 33601115550 33607 ) athttpparser.parseronincomingclient [ ASON incoming ] (http _ clien ent athttpparser.parseronheaderscomplete (http ) atemi tone (events.js :1153:13 ) at socket.emit (events.js :210:7 ) atclientrequest.onsocket ) d: (() htps-proxy-agentindex.js :181:14 )实际上，在下载puppeteer软件包后，通过运行node install.js来运行chromium (实验版chrome

然后手动下载chromium。 包含指向https://storage.Google APIs.com/chromium-browser-snapshot s/win _ x64/508693/chrome-wi的链接

n32.zip

TODO

直接看官方给出的demo

const puppeteer = require('puppeteer');(async () => { //这里和官方不一样的就是，需要手动指定chromium目录所在的地址（上面链接下载之后解压），headless为true则不会打开chromium const browser = await puppeteer.launch({executablePath: '/chromium/chrome.exe',headless: false}); //相当于新建选项卡 const page = await browser.newPage(); //跳转到指定URL await page.goto('https://example.com'); //截图 await page.screenshot({path: 'example.png'}); //关闭页面或者选项卡 await browser.close();})();

上面几行代码其实就是相当于我们日常的一些操作：打开chrome->新建选项卡->输入url并回车->页面截图->保存，也可以看出puppeteer是站在使用者的角度去设计API。

跑通测试demo之后，来试试小程序这边，首先必须让小程序跑在chrome上面，就要用到wept了。

1. 直接在小程序根目录上面执行wept
然后打开chrome，访问http://localhost:3000/#!pages/index/index ，就可以看到小程序运行在chrome上了，接下来要让puppeteer去抓取小程序里面的内容，直接上代码

const puppeteer = require('puppeteer');const devices = require('puppeteer/DeviceDescriptors');(async () => { const browser = await puppeteer.launch({executablePath: '/chromium/chrome.exe',headless: true}); const page = await browser.newPage(); //设置展示的设备https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js await page.emulate(devices['iPhone 6']); //多一个参数waitUntil，指跳转之后等待网络空闲之后再执行下一步操作，没有这个的话，截图很有可能是白屏，因为内容还没渲染出来 await page.goto('http://localhost:3000/#!pages/index/index', {waitUntil: 'networkidle'}); //小程序的内容其实是放在一个iframe里面，外面是无法直接抓取到iframe里面的内容，所以这里需要获取页面所有的iframe const frames = await page.frames(); //根据iframe的name属性来获取正确的iframe const weChatFrame = frames.find(f => f.name() === 'view-0'); //在上下文环境中获取需要抓取的内容 const outerText = await weChatFrame.evaluate(() => { //上下文执行环境，跟H5一致 const anchors = Array.from(document.querySelectorAll('.container')); return anchors.map(anchor => anchor.textContent); }); console.log('the outerText: ', outerText); await browser.close();})();

直接来看页面执行的效果

这样我们就能拿到小程序的内容，便于我们后续的单元测试，接下来我们可以加入”抹茶”来测试输出是否符合预期，先上代码

const puppeteer = require('puppeteer');const devices = require('puppeteer/DeviceDescriptors');const expect = require('chai').expect;describe('output test', () => { it('should return Hello 测试帐号 ', () => { (async () => { //小程序内容获取代码跟上述一致 //... expect(outerText[0]).to.equal('Hello 测试帐号'); //... }) })})

运行效果

结语

小程序其实也有上线一个云测试，但是我觉得有个不好的地方，假如你的小程序是依赖于后台CGI返回数据作为展示，那么你必须先上线CGI才能使用云测试，不够灵活，更希望有一个能自己mock数据来测试不同情况下的小程序的展示。

本篇文章介绍使用wept和puppeteer来对小程序做E2E测试，对于测试环境和正式环境还是有差异的，比如Object.defineProperty小程序是不支持这个API的，但是测试环境是可以跑通的，当然测试环境下面也可以通过某种方式（比如delete）来禁用不支持小程序的API，从而达到测试环境尽可能的贴近小程序的正式环境。当然更希望的是小程序官方能给出相应的单元测试方案吧。

相关阅读

jzdddd：如何快速、便捷开发小程序
微信小程序开发工具，腾讯云服务支持PHP语言啦！
蓝牙在小程序中的应用

此文已由作者授权腾讯云技术社区发布，转载请注明原文出处
原文链接：https://cloud.tencent.com/community/article/826358