22
震惊！前端自动化框架原来是这么来的
source link: https://www.tuicool.com/articles/iu6FryB
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
酷家乐工具的特性
酷家乐工具类产品大都是基于HTML的WEB前端页面，如图中红框部分【Canvas画布中的对象并非DOM类对象】，无法通过CSS Selector或XPath Selector选中与操作。
因此，接下来我介绍一种特殊的方式来操作 Canvas 画布中的对象。其中我选用了 Puppeteer 作为了自动化框架的核心工具库，实现这个特殊的需求场景。
自动化框架是如何良好支持酷家乐工具前端画布自动化操作的
在确认【用selector直接获取非DOM对象】是不可行的 & 通过【坐标录制】or【图像匹配】效果不佳、稳定性差的情况下，我们直接将需求诉诸于待测产品本身。
KAF/APP Core 作为酷家乐工具的底层框架，根据测试需求提供了一系列的API，包括：获取对象的屏幕坐标、获取对象的空间坐标与尺寸属性、获取/设置相机位置等。
我们搭建了一个以 Puppeteer 为自动化框架的核心工具库的框架，并以上述的工具类产品的画布操作方式，支持酷家乐工具前端自动化。
一个 DEMO
我们来看看“移动主卧的床”这个用例是如何实现的
过程中发生了什么：
- 打开方案
- 将相机视角切换到【操作对象被放大到画布中心】的位置
- 获取操作对象的【屏幕坐标】，选中对象
- 获取操作对象的【初始XYZ空间坐标】
- 移动操作对象
- 获取操作对象的【最终XYZ空间坐标】
- 对比【始末XYZ空间坐标】，校验移动有效性
CASE
测试数据
运行结果
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK