谈谈小程序自动化,微信小程序自动化测试方案

来源:未知 浏览 156次 时间 2021-06-10 15:48

浏览器领域我们有如selenium和puppeteer这样的库可以自动化控制浏览器执行自动化脚本SEO关键词可以自动化控制浏览器执行自动化脚本以完成自动化端对端测试、定时自动化任务等。随着持续集成、持续部署也就是CI/CD的需求日益增长自动化也成为必不可少的一环。

对于日益增长的小程序开发需求我们能不能自动化控制小程序呢进而达成自动测试、自动发布等任务呢?

谈谈小程序自动化

这个SDK通过脚本控制本机的微信开发者工具来近似达到自动化测试业务的目的同时也可通过远程控制真机达到真机测试的目的。

原理与初步体验

我们首先来体验一下这个SDK。

谈谈小程序自动化

我们知道微信开发者工具提供了命令行与 HTTP 服务两种接口供外部调用开发者可以通过命令行或 HTTP 请求指示工具进行登录、预览、上传等操作。

SDK通过命令行方式将微信开发者工具调起再通过外部方式导入目标项目。微信开发者工具通过读取目标项目的project.config.js初始化项目。并读取启动命令的 --auto-port 参数使得SDK可以通过此端口的Websocket服务实现与对应的目标小程序调试窗口进行交互。

这就是 miniprogram-automator 工作的大致原理。

感兴趣的读者可以尝试使用微信开发者工具的cli方式来尝试运行此命令。

cli auto --project { 项目路径 } --auto-port { websocket的端口 }

为了运行上述命令我们需要找到微信开发者工具的安装目录。不同的操作系统位置不同。Mac位于:<安装路径>/Contents/MacOS/cliwindows位于: <安装路径>/cli.bat。对于经常使用的读者建议将cli所在的目录放在系统的环境变量中。

你可能遇到IDE服务超时的情况。因此为了保证开发者工具能够通过命令行打开需要将开发者工具的HTTP服务调用接口打开。

打开的方式是进入微信开发者工具选择:设置 > 安全设置。在服务端口中选择:打开。此时微信开发者工具会自动指定一个可用的端口号。

细心的读者会发现这里又出现了一个“端口”。不同于上面提到的端口这个端口是IDE提供对外服务的端口。如上图所示36146是IDE服务的端口。你在启动IDE之后可以访问 :36146/open

你的IDE就会聚焦到你的面前。 :36146/ 是IDE服务的根域名open是命令读者可以参考 命令索引 通过不同的URL发出不同的命令。

好安装好了SDK我们来操练一下:

首先我们init一个npm库如 auto 通过: npm i miniprogram-automator --save-dev 或 yarn add miniprogram-automator --dev 即可安装 miniprogram-automator 。

接下来我们下载一个 微信示例程序 并解压在~/demo-miniapp/

下面我们新建一个文件如index.js内容如下:

const automator = require('miniprogram-automator') automator.launch({ projectPath: '~/demo-miniapp/', // 项目文件地址 }).then(async miniProgram => { const page = await miniProgram.reLaunch('/page/tabBar/component/index') await page.waitFor(500) const element = await page.$('.kind-list-text') console.log(await element.attribute('class')) await element.tap() await page.waitFor(500) await miniProgram.close() })

现在让我们运行起来。 node index.js 。我们看到IDE自动启动并加载了我们的项目文件并自动地点开了第一个项目过一段时间之后程序自动的退出。

这就是我们对于自动运行的初步体验。

标签: 我们开发者工具微信