Applying BDD and the MEC Framework to Improve Ctrip Ticket Front‑End Development

Author Introduction

Ren Yuehua, a front‑end software engineer at Ctrip Ticket, participated in the implementation of RN Clean Architecture for international ticketing and the development of the MEC Chinese testing framework.

Preface

Historically, the team followed a "code‑first, test‑later" model where acceptance testing relied heavily on manual effort.

1. Challenges

The traditional agile workflow caused low‑quality communication between product managers and engineers, difficulty keeping PRD, test‑case documents, and code in sync, high risk from late defect discovery, slow iteration due to manual regression testing, and high cost with low coverage for UI automation.

2. What is BDD

Behavior‑Driven Development (BDD) is an agile technique that encourages collaboration among developers, QA, and non‑technical stakeholders by describing software behavior in natural language. It extends Test‑Driven Development with readable, executable specifications.

Key steps of BDD include:

Stakeholders discuss requirements together.

Discussions focus on software behavior.

Outcomes are natural‑language, non‑programmer‑readable test case documents.

These test cases can be executed on an automation platform.

Developers write code to satisfy the test cases.

The team uses Cucumber for BDD support and Macaca as the UI automation framework.

3. BDD Transformation Process

Cucumber

Cucumber provides the Gherkin syntax where each feature consists of scenarios written with GIVEN, WHEN, THEN statements that map directly to automation code.

Example feature file for the one‑way flight sorting function:

# language: zh-CN
功能: 排序-单程列表页

  场景:
    假如 跳转页面到[机票单程列表页]
    当   点击[直飞优先按钮]
    那么 第[1]程列表页按照直飞航班在前，中转航班在后排序

Macaca

Macaca is an open‑source cross‑platform UI automation framework (PC, Android, iOS, Hybrid) that offers a unified API, rich documentation, multi‑language support (Java, JavaScript, Python), and open‑source visibility.

MEC (Macaca Eating Cucumber)

The team built MEC on top of Cucumber and Macaca, providing:

Extended Macaca APIs for schema navigation, service mocking, and login.

30+ ready‑to‑use natural‑language steps covering interactions, assertions, mocks, and navigation.

A CLI with 10 commands for project initialization, patching, running, downloading apps, compiling, and reporting.

UI ViewModel‑based validation to improve coverage for complex scenarios such as list ordering, long lists, and execution speed.

Support for reusable scenario fragments by extending the Gherkin compiler.

An API for business teams to add custom natural‑language steps.

Built‑in reporting templates that generate clear execution results.

Documentation and promotion materials were also prepared to help both technical and non‑technical team members adopt BDD.

4. Simultaneous Development and Testing

With BDD, test development can occur in parallel with or even ahead of code development, allowing feature writers (often QA) to contribute directly to automation. The workflow shifted from "code‑first, test‑later" to a synchronized development‑testing model.

5. Review

Introducing BDD unified communication language across stakeholders, kept the living documentation in sync with production behavior, enabled concurrent development and testing, reduced late‑stage defect risk, and moved quality assurance from manual to automated testing, achieving over 90% UI test coverage and a 75% reduction in integration testing cost.

Appendix

Macaca: https://macacajs.github.io

Cucumber: https://cucumber.io