基于官方自动化库miniprogram-automator
上进行了封装,提供了wait模式和mock的功能,另外获取dom元素更加稳定便捷。
mpx低版本需要在creatApp()上挂载xfetch, mixin([email protected]版本以上则无需此步骤)
createApp({
mixin: mpx.mixin.
xfetch: mpx.xfetch
})
执行 npm run release 执行命令之前,请确保 report-client 已经 build,并且产出已经在 report-server 目录下。 由于 report-client 初始化比较耗时,发布过程中提供跳过选项,请自行判断是否需要 npm i
pnpm add -D @mpxjs/e2e
Automator 模块提供了启动及连接开发者工具的方法。
【新增方法】
初始化mock,提供mock需要的配置可实现本地mock或更改接口返回参数
interface E2eMockConfig {
staticDir: string, // 本地文件目录:
debug: boolean // debug模式
}
Automator.initMock(mockCfg: E2eMockConfig): Promise<MiniProgram>
设置需要mock的路径和返回结果
Automator.setMock (path:string, response:any): () => void
// 示例:
let un = Automator.setMock('https://api.hongyibo.com.cn/gulfstream/pre-sale/v1/other/pGetIndexInfo', {
errno: 0,
errmsg: 'mock-index-info',
data: {
a: 1,
b: 2,
c: 3
}
});
// 需要取消时可以调用 un,注意这一步骤非必须!!
un();
参数:
- path: 接口
- response: 该接口响应的 mock 数据
返回值:取消函数,调用该函数即可从 mock map 中移除该 mock
从 mock map 中移除指定 path 对应的的 mock 数据;
Automator.removeMockFromMap (path:string): void
【新增方法】
稳定等待['页面', '组件', '组件更新', '接口发起', '接口返回'],解决waitFor不能解决时间不确定的情况,发生报错。并且增加多种等待时机,更加掌控e2e流程
wait(path: string, type?: string): Promise<string | undefined> | void;
const miniProgram = await Automator.launch({
projectPath: './dist/wx'
})
// 页面
page = await miniProgram.reLaunch('/pages/index/index')
await miniProgram.wait('pages/index/index')
// 组件
const suggest1 = await miniProgram.wait('suggest/components/suggestcaafe3e4/suggest', 'component')
// 组件更新
const suggest2 = await miniProgram.wait('suggest/components/suggestcaafe3e4/suggest', 'componentUpdate')
// 请求
const request = await miniProgram.wait('https://xxxx.xxx/xxx', 'request')
// 返回结果
const response = await miniProgram.wait('https://xxxx.xxx/xxx', 'response')
expect(response.options.data.errno).toBe(0)
const data = response.options.data.data
expect(data.status).toBe(1)
同时等待多个操作
waitAll<T> (args:[Promise<T>]): Promise<any>
const [suggest] = await miniProgram.waitAll(miniProgram.wait('suggest/suggestcaafe3e4/suggest'), inputbtn.tap())
获取当前页面的路径
const curPath = await miniProgram.currentPagePath()
expect(curPath).toBe('pages/index/index')
【重写方法】重写page和element的$,$$方法
获取dom元素,不同官方$的是,配合components名称可获取自定义组件中的元素,解决官方$获取不到的问题。(不传入components名称则走微信原生方式获取) 切忌传入组件名只能和class选择器配合使用,其他选择器方式可用原生方式
$(className: string, componentsName?: string): Promise<Element | any>
const confirmbtn = await page.$('confirm-btn', 'homepage/components/confirmef91faba/confirm')
const confirmbtn2 = await page.$('.confirm-btn')
const view = await page.$('view')
const id = await page.$('#id')
$$同$
$(className: string, componentsName?: string): Promise<any>
const btns = await page.$$('confirm-btn', 'homepage/components/btnf91faba/btn')
-
$方法为什么取不到dom元素?
可能存在以下几种情况
- dom类名不对,或者组件名不对,或者类名和组件名不匹配
- page对象没有更新,如果跳转到某一个页面,需要重新赋值page即:
page = await miniProgram.currentPage()
- dom元素未渲染,即可能用wx:if控制的元素,如需要获取一定要保证该元素在获取时渲染在模拟器或者真机上
-
组件名的hash值一改动代码就会发生变化,如何固定hash?
在构建配置中加入此参数
new MpxWebpackPlugin({ pathHashMode: 'relative' // 可保证hash不变 })
-
<web-view>
中的内容能自动化测试吗?不能,web-view中的内容无法获取到
-
登录功能能自动化测试吗?
不能,工具无法操作原生的授权弹窗
-
可以不用jest配合测试吗?
可以,你可以把这个库理解成调用微信ide的工具库,jest是测试框架的一种,两者配合使用可以达到你想要的效果