Implementing BDD UI Automation Testing with Cucumber and Puppeteer at Ctrip

Leo Li, a senior software engineer at Ctrip, is responsible for developing and maintaining the BDD‑Test UI automation framework for the vacation business.

With increasing emphasis on test quality and the growing complexity of front‑end projects, manual testing is no longer sufficient. Introducing BDD‑driven UI automation helps ensure project quality through automated tools.

In daily development, bugs are inevitable, but the goal is to prevent them from reaching production. Ctrip already runs unit tests, Sonar code‑quality scans, manual QA, and gray‑release processes, yet UI automation remains a missing layer in the testing pyramid.

Front‑end developers use modern tools like TypeScript and ESLint, but these only catch issues at compile time. UI automation, positioned at the top of the testing pyramid, provides additional confidence by testing core business flows.

When codebases become large and legacy code quality degrades, even small changes can cause catastrophic bugs. Automated UI tests can quickly detect regressions after refactoring.

1. UI Automation Background and Significance

UI automation sits at the top of the testing pyramid, offering high confidence at higher cost and complexity.

2. BDD UI Automation Concept

Four development models are introduced: TDD, ATDD, BDD, DDD. BDD focuses on describing system behavior in natural language, enabling collaboration among developers, QA, product managers, and non‑technical stakeholders.

The traditional W‑model workflow is contrasted with the BDD workflow, where feature files written in Gherkin drive automated steps.

3. Our BDD‑UI‑Testing Practice Model

We selected Cucumber.js as the BDD framework and Puppeteer for browser automation, creating the @ctrip/cucumber_web_common package.

Project structure includes:

Feature files (.feature) describing scenarios.

Step definitions implementing the steps.

Support code for shared utilities (e.g., browser and page instances).

Cucumber command‑line interface for running tests.

Example CLI commands:

$ cucumber-js features/**/*.feature

$ cucumber-js features/dir

$ cucumber-js features/trip.feature

$ cucumber-js features/trip.feature:3

$ cucumber-js --name "trip 1"

Parallel execution is enabled in GitLab CI using Cucumber’s experimental parallel mode:

CUCUMBER_PARALLEL=true

CUCUMBER_TOTAL_SLAVES=10

CUCUMBER_SLAVE_ID=0

In a medium‑size project, 10 parallel processes finish testing in about 2½ minutes.

4. Test‑ID Strategy

To avoid flaky selectors, stable data-test-id attributes are added to DOM elements, improving maintainability and reliability of UI tests.

5. DevOps Integration

BDD‑UI‑Testing is integrated into Ctrip’s DevOps pipeline: code changes trigger GitLab CI, which runs unit tests, Sonar scans, and then the BDD UI tests. Test results are automatically reported and uploaded to the testing platform.

Both development and testing sides have dedicated CI flows, and the testing platform can trigger test execution via APIs and message queues.

6. Why Puppeteer Over Selenium?

Officially maintained by Google, better Chrome compatibility.

Excellent support for Single‑Page Applications.

Single‑language stack (JavaScript) simplifies integration with Cucumber.js.

Simpler network request interception for mocking.

Nevertheless, Selenium can also be used with Cucumber in other languages if desired.

7. Summary and Outlook

The article demonstrates how Ctrip’s vacation team built a BDD UI automation framework using Cucumber and Puppeteer, integrated it into CI/CD, and achieved scalable, maintainable UI tests. Future work includes AI‑based visual comparison and more flexible mock data solutions.

Key takeaways: use BDD to bridge business and technical teams, employ test‑ids for stable selectors, leverage parallel CI for speed, and continuously evolve the framework within a DevOps culture.