跨端跨框架 UI 自动化测试方案 Flybirds

背景

多端研发对于当今时代的前端开发来说是个绕不过去的话题，为了解决这些问题，行业内推出了很多开发方案，但是跨端 UI 自动化测试的解决方案并不多。

Flybirds从2022年初开源至今已有3月有余，通过与社区内活跃用户的交流和反馈，推出了v0.2 版本的跨端跨框架测试方案，一套脚本多端运行，插件化的架构设计，也方便社区开发者自由加入扩展，一起共建成长。

v0.2 新增特性

• 支持多端脚本复用
• 支持多浏览器渲染引擎：Chromium、WebKit 和 Firefox
• 支持多浏览器并发模式下的兼容性测试

我们需要一个怎么样的多端测试方案

近几年，每隔一段时间就会有很多新的开发框架出现，带来了更好的开发体验和性能的同时，也给自动化测试创造了很多难题。

我们到底需要一个怎样的多端测试方案呢？从 Flybirds 的视角来说，我们希望多端测试不会成为研发流程中的障碍，特别是多端生态整体呈现欣欣向荣之时，自动化测试方案应和开发方案共同成长。

不论是 Web 、React Native 端，还是Native端，理想的方案应该进行多端适配，保留良好扩展，兼顾更多框架，由社区共同建设，促进整体生态繁荣，因此就有了Flybirds 向社区提供的跨端跨框架测试方案。

插件化架构

插件化架构帮助我们将每一个端的能力拆分开, 插件提供运行时所需的组件、API 和配置，Flybirds 将它们分别注入对应的生命周期。

文件结构

                                                                 
├─ cli                            脚手架
├─ core
|   ├─ config_manage.py         配置管理
|   ├─ dsl
|   │    ├─ globalization       国际化处理
|   │    └─ step                Step 列表
|   ├─ global_resource.py       全局配置
|   ├─ launch_cycle             生命周期管理
|   └─ plugin
|        ├─ event               事件管理
|        ├─ plugin_manager.py   插件管理
|        └─ plugins                    
|             ├─ android        Andriod 相关处理
|             ├─ ios            iOS 相关处理
|             └─ web            Web 相关处理
├─ report                       报告
├─ template                     模板处理
└─ utils                                

DSL step 列表

当然在这个架构中, 各端略有不同，主要是各端的平台差异性导致，以下是各端具体支持的 DSL step 列表, 大部分step能够适用于多端

语句模板	语义	适用于
等待[]秒	等待一段时间	ALL
页面渲染完成出现元素[]	进入新的页面时检查指定元素是否渲染完成	ALL
点击[]	点击指定属性的元素	ALL
点击文案[]	点击指定文案的元素	ALL
点击屏幕位置[][]	点击屏幕指定位置	ALL
在 [] 中输入[]	在指定选择器中输入字符串	ALL
向[] 查找[]的元素	向指定方向查找指定属性的元素	ALL
全屏向[] 滑动[]	全屏向指定方向滑动指定距离	ALL
[] 向[] 滑动[]	在指定区域内向指定方向滑动指定距离	ALL
存在[]的文案	检查页面中存在指定的字符串	ALL
不存在[]的文案	检查页面中不存在指定的字符串	ALL
存在[]的元素	检查页面中存在指定属性的元素	ALL
不存在[]的元素	检查页面中不存在指定属性的元素	ALL
文案[] 的属性[] 为 []	检查页面中指定文案的指定属性为指定值	ALL
元素[] 的属性[] 为 []	检查页面中指定元素的指定属性为指定值	ALL
[] 的文案为[]	检查页面中指定元素的文案等于指定值	ALL
[] 的文案包含[]	检查页面中指定元素的文案包含指定值	ALL
回到首页	回到首页	ALL
全屏截图	保存当前屏幕图像	ALL
登录账号[] 密码[]	使用账号密码进行登录	ALL
退出登录	退出系统登录	ALL
结束录屏	结束录制视频	ALL
在[] 中向 [] 查找 [] 的元素	在指定 选择器 的元素内 向指定方向滑动查找 指定选择器的元素	ALL
跳转到[]	跳转到指定的url地址	Android,Web
返回上一页	返回上一页面	Android,Web
开始录屏	开始录制视频	Android,iOS
开始录屏超时[]	开始录屏并设置超时时间	Android,iOS
连接设备[]	连接测试设备	Android,iOS
启动APP[]	启动APP	Android,iOS
重启APP	重启APP	Android,iOS
关闭App	关闭App	Android,iOS
安装APP[]	安装APP	Android
删除APP[]	删除APP	Android
-----	-----	-----

多端应用例子

测试用例

功能: 乘机人模块

@p1 @android @web
场景:外露乘机人_选择列表页乘机人
   当   跳转页面到[单程填写页]
   那么 页面渲染完成出现元素[已选乘机人姓名]
   那么 [选择乘机人文案]的文案为[选择乘机人]
   那么 [已选乘机人姓名]的文案为[李易峰]
   那么 [已选乘机人证件类型]的文案为[护照]
   那么 [已选乘机人证件号]的文案为[YHE77]
   那么 存在[乘客类型标签儿童]的元素
   那么 返回上一页

页面对象管理

多端项目中的页面对象管理，是通过json文件进行统一管理，通常存在以下两种情况

1. 各端相同时，参考以下配置

   // 元素定位配置 ele_locator.json
   {
     "选择乘机人文案": “testid=passger_check”,
     "已选乘机人姓名": “testid=passger_name_checked”,
     "已选乘机人证件类型": “testid=passger_ct_checked”,
     "已选乘机人证件号": “testid=passger_cn_checked”
   }

2. 各端不同时，通过android、ios、web区分

   // scheme配置 schema_url.json  
   {
     "单程填写页": {
    "android": "urlschemel://auth_activity",
    "ios": "urlschemel://ios_auth_activity",
    "web": "https://address"
     }
   }
   
   // 元素定位配置 ele_locator.json
   {
     "乘客类型标签儿童": {
    "android": "textid=passger_type_child",
    "ios": "lableid=passger_type_child",
    "web": "xpath=//html/body/div"
     }
   }
   

数据驱动参数化

实际项目中，大部分的自动化测试都是基于数据驱动参数化，因此还需要搭配「 场景大纲+例子」一起使用，这里我们对上面的例子进行改造：

功能: 乘机人模块

@p1 @android @web
场景大纲:  外露乘机人_选择列表页乘机人
     当   跳转页面到[单程填写页]
     那么 页面渲染完成出现元素[已选乘机人姓名]
     那么 的文案为