跨端跨框架 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能够适用于多端

多端应用例子

测试用例

功能: 乘机人模块

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