Frontend Development 18 min read

Flybirds v0.2: A Cross‑Platform, Cross‑Framework UI Automation Testing Solution

The article introduces Flybirds v0.2, a plugin‑based, cross‑platform UI automation framework that supports script reuse across web, React Native and native mobile, multiple browsers, concurrent execution, data‑driven testing, and extensible architecture for seamless integration into DevOps pipelines.

Ctrip Technology
Ctrip Technology
Ctrip Technology
Flybirds v0.2: A Cross‑Platform, Cross‑Framework UI Automation Testing Solution

1. Background

Multi‑device development is an unavoidable topic for modern front‑end development, and while many solutions exist for cross‑platform development, there are few for cross‑platform UI automation testing. Since early 2022, Flybirds has been open‑source for over three months, and based on community feedback it released version v0.2, offering a cross‑platform, cross‑framework testing solution with a reusable script set and a plugin‑based architecture that encourages community extensions.

2. New Features in v0.2

Support for multi‑device script reuse

Support for multiple browser rendering engines: Chromium, WebKit, and Firefox

Support for compatibility testing under concurrent browser mode

3. Desired Multi‑Device Testing Solution

With the rapid emergence of new development frameworks, automation testing faces many challenges. Flybirds aims for a testing solution that does not become a bottleneck in the development workflow, adapts to the flourishing multi‑device ecosystem, and grows together with development tools.

4. Plugin Architecture

The plugin architecture separates capabilities for each platform into independent plugins that provide runtime components, APIs, and configurations, which Flybirds injects into the appropriate lifecycle.

File structure example:

├─ cli                     # CLI scaffolding
├─ core
│   ├─ config_manage.py   # Configuration management
│   ├─ dsl
│   │    ├─ globalization  # Internationalization handling
│   │    └─ step           # Step definitions
│   ├─ global_resource.py # Global resources
│   ├─ launch_cycle        # Lifecycle management
│   └─ plugin
│        ├─ event         # Event management
│        ├─ plugin_manager.py   # Plugin manager
│        └─ plugins
│            ├─ android   # Android‑specific handling
│            ├─ ios       # iOS‑specific handling
│            └─ web       # Web‑specific handling
├─ report                 # Reporting
├─ template               # Template processing
└─ utils

4.2 DSL Step List

The DSL steps are largely platform‑agnostic, covering actions such as waiting, element interaction, navigation, verification, screen capture, and device control. The table below summarizes the statement templates, their semantics, and applicable platforms (ALL, Android, iOS, Web).

Statement Template

Semantic

Applicable To

等待[]秒

Wait for a specified duration

ALL

页面渲染完成出现元素[]

Verify that a specific element has rendered after page load

ALL

点击[]

Click an element with the given attribute

ALL

点击文案[]

Click an element containing the specified text

ALL

点击屏幕位置[][]

Click at the specified screen coordinates

ALL

在 [] 中输入[]

Enter a string into the specified selector

ALL

向[] 查找[]的元素

Search for an element in a given direction

ALL

全屏向[] 滑动[]

Swipe the whole screen in a direction for a distance

ALL

[] 向[] 滑动[]

Swipe within a region in a direction for a distance

ALL

存在[]的文案

Check that the page contains the specified string

ALL

不存在[]的文案

Check that the page does not contain the specified string

ALL

存在[]的元素

Verify the presence of an element with the given attribute

ALL

不存在[]的元素

Verify the absence of an element with the given attribute

ALL

文案[] 的属性[] 为 []

Assert that a specific text's attribute equals a value

ALL

元素[] 的属性[] 为 []

Assert that a specific element's attribute equals a value

ALL

[] 的文案为[]

Assert that an element's text equals the expected value

ALL

[] 的文案包含[]

Assert that an element's text contains the expected substring

ALL

回到首页

Return to the home page

ALL

全屏截图

Capture a screenshot of the entire screen

ALL

登录账号[] 密码[]

Log in using the provided username and password

ALL

退出登录

Log out of the system

ALL

结束录屏

Stop video recording

ALL

在[] 中向 [] 查找 [] 的元素

Search for an element inside a selector in a given direction

ALL

跳转到[]

Navigate to the specified URL

Android, Web

返回上一页

Go back to the previous page

Android, Web

开始录屏

Start video recording

Android, iOS

开始录屏超时[]

Start video recording with a timeout

Android, iOS

连接设备[]

Connect to a test device

Android, iOS

启动APP[]

Launch the specified app

Android, iOS

重启APP

Restart the app

Android, iOS

关闭App

Close the app

Android, iOS

安装APP[]

Install the app

Android

删除APP[]

Uninstall the app

Android

5. Multi‑Device Application Example

5.1 Test Case

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

5.2 Page Object Management

Page objects are managed via JSON files. When platforms share the same configuration, a single mapping is used; otherwise, separate mappings for Android, iOS, and Web are provided.

// Element locator configuration (ele_locator.json)
{
  "选择乘机人文案": "testid=passger_check",
  "已选乘机人姓名": "testid=passger_name_checked",
  "已选乘机人证件类型": "testid=passger_ct_checked",
  "已选乘机人证件号": "testid=passger_cn_checked"
}
// Scheme configuration (schema_url.json)
{
  "单程填写页": {
    "android": "urlschemel://auth_activity",
    "ios": "urlschemel://ios_auth_activity",
    "web": "https://address"
  }
}

// Element locator with platform distinction
{
  "乘客类型标签儿童": {
    "android": "textid=passger_type_child",
    "ios": "lableid=passger_type_child",
    "web": "xpath=//html/body/div"
  }
}

6. Data‑Driven Parameterization

Most automation tests are data‑driven. By combining "Scenario Outline" with examples, the same test logic can be executed with different data sets.

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

7. Multi‑Browser Concurrency

Leveraging Playwright's cross‑browser capabilities, Flybirds supports Chromium, WebKit, and Firefox, enabling concurrent compatibility testing.

7.1 Configuration Parameters

// browserType: configure browser engines
"web_info": {
  "headless": true,
  "browserType": ["firefox", "chromium", "webkit"],
  "defaultTimeout": 30
}

7.2 Execution Command

# Specify browsers via parameter
flybirds run -D browserType=webkit,firefox,chromium

8. Pre‑Run Checks

8.1 Android & iOS

Ensure test devices are connected (e.g., adb devices for Android, tidevice list for iOS).

Install the test package (Android via configured packagePath , iOS manually or via wdaproxy ).

8.2 Web

Verify browser installations using Playwright commands:

# List supported browsers
playwright install --help
# Install all default browsers
playwright install
# Install a specific browser, e.g., WebKit
playwright install webkit

9. Running Tests

Flybirds provides a CLI to switch environments, filter cases, and control concurrency. Common commands include:

# Show help
flybirds run --help
# Run all feature files
flybirds run
# Run a specific feature file
flybirds run -P ./features/test/demo.feature
# Run with tags
flybirds run -T tag1,tag2,-tag3,tag4
# Switch platform
flybirds run -D platform=web
flybirds run -D platform=Android
flybirds run -D platform=iOS
# Limit concurrency (Web only)
flybirds run --path features -p 5

10. Configuration

Required configuration items per platform:

Android: deviceId , packageName

iOS: platform , deviceId , packageName , webDriverAgent

Web: platform , browserType , headless

11. Custom Framework Extensions

The plugin‑based design allows developers to replace or extend components (e.g., app , device , element , step , screen , screen_record ) by updating plugin_info.json with local paths and namespaces.

12. Internal Enhancement Packages

Teams can create an -flybirds-plugin package for internal reusable features; Flybirds can dynamically load these packages, facilitating DevOps tool integration.

13. Continuous Integration

Flybirds can be integrated into CI tools such as Jenkins:

# Inside Jenkins shell
cd {PATH_TO_PROJECT_FOLDER}
flybirds run -P ./features/test/everything.feature -define platform=Android
cp -R reports $WORKSPACE

14. Release Plan

Releases follow SemVer, with incremental feature additions and code optimizations. Contributions are welcomed via GitHub issues, discussions, or by starring the repository.

References

GitHub: https://github.com/ctripcorp/flybirds

PyPI: https://pypi.org/project/flybirds

Documentation: https://ctripcorp.github.io/flybirds/

Playwright: https://github.com/microsoft/playwright-python

Airtest: https://github.com/AirtestProject/Airtest

Behave: https://github.com/behave/behave

Support Email: [email protected]

cross‑platformautomationPlugin ArchitectureUI testingPlaywrightFlybirds
Ctrip Technology
Written by

Ctrip Technology

Official Ctrip Technology account, sharing and discussing growth.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.