背景 多端研发对于当今时代的前端开发来说是个绕不过去的话题，为了解决这些问题，行业内推出了很多开发方案，但是跨端 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国际化处理 |│└─ stepStep 列表 |├─ global_resource.py全局配置 |├─ launch_cycle生命周期管理 |└─ plugin |├─ event事件管理 |├─ plugin_manager.py插件管理 |└─ plugins |├─ androidAndriod 相关处理 |├─ iosiOS 相关处理 |└─ webWeb 相关处理 ├─ 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 场景大纲:外露乘机人_选择列表页乘机人 当跳转页面到[单程填写页] 那么 页面渲染完成出现元素[已选乘机人姓名] 那么 的文案为