乐趣区

关于前端:跨端跨框架-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
场景纲要:  外露伺机人_抉择列表页伺机人
     当   跳转页面到[单程填写页]
     那么 页面渲染实现呈现元素[已选伺机人姓名]
     那么 <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

  1. 请确保配置的测试设施可能失常连贯

    • Android: 执行命令 adb devices , 查看设施列表中是否蕴含测试设施
    • iOS:以 tidevice 库举例,执行命令 tidevice list,查看设施列表中是否蕴含测试设施
  2. 下载安装测试包

    • 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.py
2. 在 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 command
cd {PATH_TO_PROJECT_FOLDER}
# Run
flybirds run -P ./features/test/everything.feature -define platform=Android
cp -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
退出移动版