置信很多敌人开始做微信自动化测试都是依据这个官网文档进行操作的。也置信很多敌人依据这个操作一步步操作下来,基本上都是失败的。在这里,不得不吐槽一下写这个文档的兄弟,一些注意事项也没有提醒进去,等我真正跑起来,才发现坑这么大。
测试脚本
const automator = require('miniprogram-automator')
describe('index', () => {
let miniProgram
let page
beforeAll(async () => {
miniProgram = await automator.launch({projectPath: '/Users/mac/Documents/project/miniprogram-demo/miniprogram/'})
page = await miniProgram.reLaunch('/page/component/index')
await page.waitFor(500)
}, 30000)
afterAll(async () => {await miniProgram.close()
})
it('desc', async () => {const desc = await page.$('.index-desc')
expect(desc.tagName).toBe('view')
expect(await desc.text()).toContain('以下将展现小程序官网组件能力')
})
})
报错图
第一个坑
Failed to launch wechat web devTools, please make sure http port is open
在解决这个问题之前,请确认你曾经把微信开发者工具 - 平安设置 - 服务端口关上,如下图所示。若没有,请关上:
设置实现后,再次运行jest index.spec.js,尝试是否胜利,若仍然报错,则须要手动操作一次命令行脚本。具体步骤如下:
- 启动命令行工具并切换到 你本地微信开发者工具的命令行工具所在的目录,具体地址如下图所示。
这里须要留神一下,如果你的装置时批改过微信开发者的装置目录,在测试脚本 index.spec.js 中须要减少一个 cliPath 字段。如果没有更改过,则不须要减少此字段。
beforeAll(async () => {
miniProgram = await automator.launch({
projectPath:'/Users/mac/Documents/project/miniprogram-demo/miniprogram/',
cliPath: '你的 cli 目录'
})
},30000)
- 在该目录下,应用如下命令,手动开启一次自动化:
cli auto --project /Users/username/demo --auto-port 9420
如若胜利,将会主动关上微信开发者工具,并工具的右上角会有相似于下图的告诉,工具会通知你自动化端口已开启。
- 将此窗口敞开,再次运行测试脚本,此时应该不会再报 ”please make sure http port is open”谬误了
第二个坑
TypeError: Connot read property '$' of undefined
这个谬误如果相熟 jQuery 的敌人,应该都很眼生。从测试脚本里的代码里也能够看出,这个谬误是因为脚本运行时获取不到应用了 index-desc 这个 class 的 DOM 节点。所以这个解决这个问题的步骤如下:
- 如果测试项目用的也是官网文档里介绍的小程序示例这个我的项目,请确定在失常状况下,能够看到失常显示的小程序我的项目,如若下图这种状况,请清掉全副缓存并抉择工具 - 构建 npm,使我的项目直到显示失常为止。
- 如果能失常显示小程序示例我的项目,请敞开以后窗口,并运行测试脚本。当测试脚本关上新的微信开发者工具窗口时,第一工夫 抉择工具 - 构建 npm,已确保在测试脚本运行完,小程序已渲染实现。否则,慢一步的话,都会导致报这个错。整个流程能够参考如下视频:
残缺操作流程视频
- 如若屡次尝试,均不能在测试脚本跑完前,使小程序渲染实现。能够思考用以下减少一个字段 –timeout,将期待启动工夫加长一下,能够改为更大的值。
beforeAll(async () => {
miniProgram = await automator.launch({
projectPath: '/Users/mac/Documents/project/miniprogram-demo/miniprogram/',
cliPath: '你的 cli 目录',
timeout: 30000
})
},30000)
最初的测试胜利图