Cocos Creator 从“新手引导”到“自动化测试”

手新引导框架,自动化测试框架,先看一段视频:

点击此处观看视频 https://www.bilibili.com/video/av60001770/

在线预览体验 http://example.creator-star.cn/demo-ui-autorun

注意,在电脑上预览才能体验自动引导功能!

Shawn 刚开始只是为了完成新手引导功能点,同时要求引导代码要做非***式,尽量对游戏代码零干扰。

1. 步骤指令

当引导框架完成后,发现引导的配置工作效率低下,非程序员非项目程序员,上手困难,于是又在引导框架中增加了步骤指令机制,使引导配置尽可能地JSON化,而非JS化。

引导步骤指令是由程序员编写的函数,比如 Shawn 已经在引导框架中提供了3条指令:

  • 节点定位指令:节点定位、遮罩镂空、事件拦截
  • 手指提示指令:在定位指令的基础上增加了手指提示动画
  • 文本提示指令:显示一行或多行文字提示

下面配置是一条手指指令,提示用户点击某个按钮:

{
    desc:‘点击主界面主页按钮‘,
    command: { cmd:‘finger‘, args:‘Home > main_btns > btn_home‘ },
    delayTime: 0.5,
}

你可以根据自己的游戏业务需求,设计自己的指令,例如:

{
    desc: ‘确认网络推送建筑数据为木材厂‘,
    command: {
        cmd: guide.command.WATCH_PUSH,
        pushType: Push.BUILDING
    },
    onPushData: function (data) {
        //建筑状态为已完成,建筑为木材厂
        return data.status === 4 &&
               data.BUILDING_CID === ConstantCid.BuildingCid.WOOD;
    }
}

上面 Shawn 在一款SLG项目中的引导配置,指令为 WATCH_PUSH,用于监听服务器推送数据,参数是 Push.BUILDING 意思是建筑数据,只要服务器推送建筑数据,步骤中的 onPushData 函数就会响应,可以通过 data 参数,做条件判定,返回为 true 指令任务完成。

2. 自动引导

引导配置的问题解决了,又发现引导的测试工作效率低下,每次都要重头再来。于是在思考,能否让电脑自己去执行引导流程呢?当然...是可以的!

惊喜不断,在电脑浏览器上通过模拟鼠标点击的方式,Shawn 实现了自动引导功能,突然之间让 Shawn 发现了新的大陆—自动化测试!

3. 流程录制与回放

引导配置不就是测试流程吗?通过引导配置指挥计算机做重复的事情,这样可以大量节省测试人员的时间,特别是做回归测试,测试人员机械、麻木地要把游戏的大多数功能都执行好几遍,想想都觉得痛苦。

于是又想到,将节点的点击操作按顺序记录下来,一是输出再加工,二是直接回放+自动引导,可以极大降低引导配置的难度,更为重要的是它不在是简单的引导功能,而是软件自动化测试!

回想曾经的工作中,测试团队为了研究自动化测试,付出了多少时间、成本但结果往往都是强差人意!希望 Shawn 无心之举能帮助更多的游戏测试人员和企业节省时间、降低成本,当然引导框架还有很多值得改进的地方,期待你的参与我们共同成长!

Shawn 的 Chat 文稿已经完成,根据本台规则7月23日出炉与大家见面,现在在做最后的校验检查,本篇教程的内容包含了 引导实现和自动引导的细节,包含以下内容:

  • 节点定位
  • 遮罩显示
  • 触摸事件的拦截与放行
  • 定位指令实现
  • 手指动画指令实现
  • 文本提示指令实现
  • 引导框架源码分析
  • 自动引导实现
  • 流程录制与回放实现
  • 引导测试工具雏形

Shawn 心愿是帮助更多的Cocos Creator 初学者快速入门,协助企业降低开发成本,做有价值的事情!同时 Shawn 也提供线下指导服务,有兴趣的伙伴或企业可加我微信:z6346289。

关注我的微信公众号「奎特尔星球」、「少年奎特尔」,我的文章在公众号上首发,感谢你的阅读,愿我们一起共同成长!

原文地址:https://blog.51cto.com/14459992/2422099

时间: 2024-11-04 16:45:36

Cocos Creator 从“新手引导”到“自动化测试”的相关文章

cocos Creator js 房卡麻将/血战/H5四川麻将源码下载搭建

房卡麻将/血战/H5四川麻将 源码 支持iOS/Android/H5 完整源码 1.基于NODEJS+MYSQL的服务器,成熟的技术方案,高效稳定,且方便Windows开发,Linux平台布署,节约服务器运转成本. 2.采用最新版本的cocos引擎,cocos creator开发,可快速的进行界面调整.且能够快速地发布iOS,Android版本. 3.如需H5版本,只需针对H5平台进行资源优化即可. 4.成熟可靠的房卡式设计,能满足大部分用户使用体验. 5.产品经过大量测试,可以运转稳定. 测试

cocos creator随笔

接触一个月cocos creator做个笔记... 1.socket.io 封装了websocket , Ajax等,故任何浏览器都可以使用socket.io建立异步连接.websocket 双向需要握手建立连接,http 单向. 短连接:一次性交换数据,如登入,创建角色等  长连接:推送 (一) socket.emit('tell one person'); socket.broadcast.emit('tell to everyone'); socket.on('I heard',funct

【COCOS CREATOR 系列教程之四】基于0.7.1先简单制作一个PAGEVIEW

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocos-creator/1999.html 由于当前版本还没有发布1.0,因此还有不少组件没有发布,那么Himi也看到Cocos Creator群里有几个童鞋问起过PageView的问题,那么Himi正好借此练手,基于当前版本制作一个PageView. 本文分为两部分进行讲解: 1. 制作PageView     2. 如何使用 一. 制作

【COCOS CREATOR 系列教程之二】脚本开发篇&事件监听、常用函数等示例整合

[Cocos Creator ](千人群):  432818031 上一篇,介绍了Himi在使用过cc所有组件后的一篇总结,没有具体介绍每个组件的原因在于官方文档很齐全,而且也有视频的介绍. 所以希望童鞋们可以把我这两篇博文当成对组件.脚本两部分开发的整理与总结. 后续的文章,Himi应该主要更新一些官方还未补充或者还没有的教程.避免无用功. 下面直接放出代码,因为不是很难理解.所以不再一一赘述,都是常用的函数.事件监听.动作回调.定时器等开发过程中必接触的. 大致内容如下: cc 属性介绍 获

Cocos Creator—如何给资源打MD5版本号

Cocos Creator 是Cocos最新一代的游戏开发者工具,基于 Cocos2d-x,组件化,脚本化,数据驱动,跨平台发布.Cocos Creator的开发思路已经逐步跟Unity 3D靠拢,写起来也更方便快捷,开发效率更高. 但既然是新东西,免不了各种坑.其中在发布Web Mobile平台上,就有各种小问题,例如给资源加上md5版本号,Cocos Creator就不支持.从16年底开发组就说要支持MD5 Cache,等了大半年,新的1.6内测版本终于增加了MD5 Cache的功能,但效果

Cocos Creator—定制H5游戏首页loading界面

Cocos Creator从1.0版本发布到现在也有一年多了,按理说一些常见的问题网上都有解决方案,例如"如何自定义首页加载进度条界面"这种普遍需求,应该所有人都会遇到的,因此也有完善的解决方案才对.我在网上搜了一些文章,虽然也有讨论的帖子,但是方案都不尽人意.因此只能再次自己动手丰衣足食了,在此我总结一下我的思路和策略,分享给大家,希望后来的人少走弯路,另外这里的方案只针对H5游戏发布,其他平台可以借鉴思路自己实现. 首页加载的loading界面,官网的文档并没有提及,我是通过构建发

Cocos Creator—优化首页打开速度

Cocos Creator是一个优秀的游戏引擎开发工具,很多地方都针对H5游戏做了专门的优化,这是我比较喜欢Cocos Creator的一点原因. 其中一个优化点是首页的加载速度,开发组为了加快首页的渲染速度,减少白屏时间,把逻辑代码和首页加载代码做了彻底分离.首次页面加载的只是一个相当于加载器的初始化文件,文件体积特别小,不像某些引擎,一开始就需要加载主逻辑js文件,一开始就给我来个上百kb的文件加载,然后才能显示loading条,白屏时间当然会延长不少. 说到这里,不得不吐槽一下Cocos的

cocos creator动画编辑器学习

动画是一个渐变的过程,怎么样在cocos creator的动画编辑器中实现这个过程. 一.层级关系: 1节点.2动画(Animation).3动画剪辑(Animation Clip).4属性轨道.5动画帧 a.  动画(Animation)是节点上的一个组件. b.  动画剪辑(Animation Clip)就是一份动画的声明数据,将它挂载到动画(Animation)上作为一个属性进行设置. c.  动画剪辑(Animation Clip)上可添加多个属性轨道来控制不同属性. d.  在一条属性

关于Cocos Creator用js脚本代码播放骨骼动画的步骤和注意事项

1.用cc.find()方法找到相应的骨骼动画节点,并把这个对象赋值给一个var出来的新对象. 具体代码:var spineboy_anim = cc.find("UI_Root/anchor_lb/spineboy"); 2.用getComponent()方法找到相应骨骼动画节点的骨骼动画组件,并把这个对象赋值给一个var出来的新对象. 具体代码:var ske_anim_comp = spineboy_anim.getComponent(sp.Skeleton); 3.把第二点的新