主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
【相关学习推荐:微信小程序教程】
背景最近,团队打算做一个小程序自动测试工具,希望业务人员在操作一次小程序后,可以自动恢复之前的操作路径,并捕捉操作过程中出现的异常,从而判断此次发布是否会影响小程序的基本功能。
上面的描述看似简单,但仍有一些困难。第一个难点是业务人员操作小程序时如何记录操作路径,第二个难点是如何还原记录的操作路径。
官方SDK:迷你程序-automator是解决自动化SDK如何恢复操作路径的首选。
小程序自动化SDK为开发者提供了一种通过外部脚本控制小程序的方案,从而达到小程序自动化测试的目的。使用该SDK,您可以执行以下操作:
控制applet跳转到指定页面以获取applet页面数据,获取applet页面元素状态,触发applet元素绑定事件,将代码片段注入AppService并调用wx对象上的任何接口...以上描述均来自官方文件,建议先阅读官方文件再阅读以下内容。当然,如果你以前使用过puppeteer,你可以很快上手,api基本相同。下面简单介绍一下SDK的使用方法。
//介绍SDK Const Automator = Require(‘mini program -Automator‘)//启动微信开发者工具Automator . launch({//Windows下微信开发者工具//cli.bat //安装路径下的cli工具。在MacOS下,安装路径为CLI clip path:‘path/to/CLI’,//项目地址,即要运行的小程序的路径project path:‘path/to/project’。}).然后(async mini program =》{/mini program是IDE启动后的示例//启动小程序中的索引页const page = Await mini program。重新启动(‘/page/index/index‘‘)//等待500毫秒Wait page . Wait for(500)//获取页面元素constelement = awaitpage。$(‘。main -BTN‘)//点击元素await element。tap()//关闭IDE await miniprogram。Close()})有一个地方需要提醒:在使用SDK之前,需要打开开发者工具的服务端口,否则将无法启动。
捕捉用户行为通过还原操作路径的方法,接下来将解决记录操作路径的问题。
在小程序中,我们不能以web中事件冒泡的方式捕获窗口中的所有事件。幸运的是,小程序的所有页面和组件都必须由页面和组件方法包装,因此我们可以重写这两个方法,拦截传入的方法,并判断第一个参数是否为事件对象,从而捕获所有事件。
//临时本机方法const origin page = page const origin component = component//重写页面page =(params)=》{ const names = object . keys(params)。for(const name of names){//方法拦截if(type of obj)为了准确获取元素,我们需要在构造中增加一个步骤,修改wxml文件,并将所有元素的类属性复制到data-className中。
复制代码但获得类后,还会有另一个坑。小程序的自动测试工具无法直接获取页面中自定义组件中的元素,因此必须先获取自定义组件。
{{text}}如果查找,请复制代码//。toast -直接关闭,将得到null const element = awaitpage。$(‘toast-close‘)element . tap()//错误!//您必须首先通过标记名//找到自定义组件,然后找到相应的元素const element = awaitpage。$(‘干杯。toast -close‘)元素。通过类名从自定义组件中点击()。复制代码,这样当我们构建操作时,我们需要为元素插入标记名。
复制代码现在我们可以继续愉快地记录用户行为。
//记录用户行为的array const actions =【】;//添加用户行为const addaction =(type,query,Value =““)=》{ actions . push({ time:date . now(),type,query,Value })}//代理事件方法const hook method =(name,method,is component)=》{ return function(...args){ const【evt】= args//取出第一个参数//判断是否为事件对象If(evt & & evt . target & & evt . type & & evt types . includes(evt . type)//判断事件类型(const {type,target,detail} = evtconst {id,Dataset = { } = target const { class name =‘} = Dataset const { value =‘} = detail//当事件触发时,输入框的值//记录用户行为let query =‘‘If(If元素query += id} else {// id不存在,元素query+= class name } addaction(type,query,Value)}返回方法。apply(this,args)} } }这里的复制代码已经记录了用户的所有点击、输入和按回车键的相关操作。但是滚动屏幕的操作没有记录,所以我们可以直接表示Page的on Page滚动方法。
//记录用户行为的array const actions =【】;//添加用户行为const addaction =(type,query,value =““)=》{ If(type = = =‘scroll‘| | type = =‘input‘){//如果最后一个行为也是滚动或输入,则可以将值重置为const last = this。动作【这。actions . length -1】if(last & last。type = = type)。{ last . Value = Value last . time = date . now()return } } actions . push({ time:date . now(),type,query,Value })} page =(params)=》{ const names = object。(const name of names){//方法拦截if(type of obj【name】)的键(参数)。= = =‘function‘){ params【name】= hook method(name,params【name】,False)} } const { on page scroll } = params//Intercept scroll事件参数。在页面上滚动=功能(...args){ const【evt】= args const { scrolltop } = evtaddaction(‘scroll‘,‘,scroll top)。apply(this,args)} Origin page(params)}复制代码。这里有一个优化点,就是在滚动操作记录时,可以判断最后一次操作是否也是滚动操作。如果是同样的操作,只需要修改滚动距离即可,因为两次滚动都可以完成。同样,输入事件也是如此,输入值也可以一步到位。
恢复用户行为后,您可以在控制台上输出用户行为的json文本。复制json文本后,您可以通过自动化工具运行它。
//introduction SDK Const Automator = Require(‘mini program -Automator‘)//用户操作行为Const Actions =【{ type:‘tap‘,query:‘goods。标题‘,值:‘,时间:1596965650000 },{类型:‘滚动‘,查询:‘,值:560,时间:1596965710680 },{类型:‘点击‘,查询:gotoTop,值:‘,时间:1596965770000 }】//启动微信开发者工具automator . launch({项目路径:‘路径/到/项目‘,})。然后(async miniProgram =》{ let page = await miniProgram . re launch(“/page/index/index“)let prev Time for(const action of actions){ const { type,query,value,Time } = action if(prev Time){//计算两个操作之间的等待时间,awaitpage。wait for(time -prev time)}//重置上次操作时间prevTime = time //获取当前页面实例page = awaitmini程序。current page()switch(type){ case‘tap‘:const element = await page。$(查询)奖励元素。点击()breakcase“input”:const element = await page。$(query)await element . input(value)break;case“confirm”:const element = await page。$(query)await element . trigger(‘confirm‘,{ value });打破;case“scroll”:await miniprogram . pagescrollto(value)break;} //在每个操作之后,等待5s以防止后续操作找到页面await page . wait for(5000)}//关闭IDE await miniprogram . Close()})复制代码。这只是对用户操作行为的简单还原。在实际操作过程中,还会涉及到网络请求和localstorage mock,这里就不说了。同时,我们还可以访问jest工具,这对于编写用例更加方便。
总结看似困难的要求,只要你用心挖掘,总能找到相应的解决方案。另外,微信小程序的自动化工具真的有很多坑。遇到问题可以先去小程序社区找。大部分坑都被前人踩过,有些一时解决不了的问题只能通过其他方式来避免。最后,祝世界没有虫子。
以上是讲解小程序自动化测试的详细内容。更多资讯请关注主机参考其他相关文章!
这几篇文章你可能也喜欢:
- 小程序自动化测试详解(小程序自动化测试题及答案详解)
- 如何使用docker自动维护和监控容器(Docker自动运行)
- 如何在wordpress插件中添加自动发布功能(WordPress插件开发教程)
- 如何通过Systemd和Crontab实现Linux系统下服务器监控的自动化
本文由主机参考刊发,转载请注明:小程序自动化测试的详细描述(小程序自动化测试工具) https://zhujicankao.com/101793.html
评论前必须登录!
注册