关于前端:跨端跨框架-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文件进行对立治理，通常存在以下两种状况

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

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

各端不同时，通过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场景纲要:  外露伺机人_抉择列表页伺机人     当   跳转页面到[单程填写页]     那么 页面渲染实现呈现元素[已选伺机人姓名]     那么 <element>的文案为<title>     那么 存在[乘客类型标签儿童]的元素     那么 返回上一页     例子:        |   element          |   title      |        |   抉择伺机人文案     |   抉择伺机人   |        |   已选伺机人姓名     |   李易峰      |        |   已选伺机人证件类型  |   护照       |        |   已选伺机人证件号    |   YHE77     |

多浏览器并发

依靠PlayWright的跨浏览器能力，Flybirds反对所有的古代渲染引擎，包含 Chromium、WebKit 和 Firefox。

Flybirds反对多浏览器并发模式，不便高效的进行浏览器兼容性测试

配置参数

// browserType: 配置浏览器内核  "web_info": {    "headless": true,    "browserType": ["firefox","chromium","webkit"],      "defaultTimeout": 30  },

执行命令

# 可通过参数指定浏览器内核flybirds run -D browserType=webkit,firefox,chromium

运行前查看

接下来，开始运行前，请先对运行环境进行查看

Android、iOS

请确保配置的测试设施可能失常连贯
- Android: 执行命令 adb devices , 查看设施列表中是否蕴含测试设施
- iOS：以tidevice库举例，执行命令 tidevice list，查看设施列表中是否蕴含测试设施
下载安装测试包
- Android：框架会通过config中配置的packagePath主动下载测试包并装置（请确保手机曾经关上”容许装置未知起源“ ），也可手动下载安装。
- iOS:
  1. 请手动下载演示APP进行装置
  2. 开启wdaproxy
```
 tidevice --udid $udid wdaproxy -B $web_driver_angnt_bundle_id -p $port
```

Web

Web我的项目执行前，先查看浏览器环境是否已装置

# 查看反对装置的浏览器playwright install --help# 不带参数的运行，将装置默认所有的浏览器playwright install# 通过提供一个参数来装置特定的浏览器playwright install webkit

运行

你能够很不便的通过 cli 切换执行环境, 筛选case和管制并发数量，上面列出了一些常用命令

# 查看运行我的项目时反对的操作flybirds run --help#  执行features目录下所有的feature文件cd {PATH_TO_PROJECT_FOLDER}flybirds run  # 指定须要执行的feature汇合，能够是目录，也能够指定到具体feature文件flybirds run -P ./features/test/demo.feature# 运行有特定tag的场景，多个用逗号隔开，‘-’结尾示意不运行蕴含此tag的场景flybirds run -T tag1,tag2,-tag3,tag4# 切换到Web环境执行用例flybirds run -D platform=web # 切换到Android环境执行用例flybirds run -D platform=Android# 切换到iOS环境执行用例flybirds run -D platform=iOS # 执行tag为android的用例flybirds run -T android -D platform=Android # 指定并发执行时开启过程的最大数量。默认是4，只在web环境失效flybirds run --path features -p 5

配置

以下是各端运行前必须的配置项

Android配置项：deviceId、packageName
IOS配置项：platform、deviceId、packageName、webDriverAgent、
Web配置项：platform、browserType、headless

自定义框架扩大

Flybirds的插件式设计模式，保留了良好的扩大，将来咱们会凋谢更多。

批改扩大

如果你心愿在我的项目中批改以后扩大，你能够用本地文件替换plugin上面的（app,device,element,app,step,screen,screen_record），并在 "plugin_info.json" 中做相应配置。

比方你心愿批改web中screen.py文件:

1. 在本地创立一个py文件命名为 screen.py2. 在plugin_info.json 的web中增加如下配置:

  "screen": {  "path": "{local_path}/screen.py",  "ns": "screen.plugin.myextend"  }

{local_path} 为本地门路，"ns"为包名,留神包名的唯一性(以上包名只是例子不做强制限度)

外部加强包

对于团队外部通用的自定义性能，能够思考创立一个extend package，Flybirds反对动静加载，package命名蕴含“-flybirds-plugin”即可。携程机票外部，针对DevOps的各类工具，加强包中都进行了对接，装置后就能够应用。

继续集成

cli提供的命令行执行模式，能够十分不便退出各种继续集成工具.

以Jenkins为例：

# Inside the jenkins shell commandcd {PATH_TO_PROJECT_FOLDER}# Runflybirds run -P ./features/test/everything.feature -define platform=Androidcp -R reports $WORKSPACE

发版打算

咱们将依照 SemVer 版本控制标准进行发版。逐渐新增性能和代码优化，十分欢迎您退出到咱们的共建打算中，在 GitHub 上提出您的贵重倡议，以及在应用时遇到的所有问题，咱们也会对此每周进行一次小版本的迭代。您也能够在这里给咱们精力反对，点上一颗 Star。

参考链接

GitHub地址：https://github.com/ctripcorp/...
PyPI地址：https://pypi.org/project/flyb...
Pages：https://ctripcorp.github.io/f...
PlayWright: https://github.com/microsoft/...
Airtest: https://github.com/AirtestPro...
Behave: https://github.com/behave/behave
欢送在 GitHub issues 和Discussions区发问
反对邮箱：flybirds_support@trip.com