Automate Try/Catch Insertion for Large‑Scale UI Tests with Babel Plugins

Problem Overview

In enterprise UI automation testing, rapid product iteration creates a massive, multi‑repo test case base. Existing exception capture is shallow, often providing only a high‑level stack trace in Allure reports. The prevalence of async/await further obscures the exact line or function that failed, making debugging costly.

Design Principles

Transparency – the plugin must be low‑impact, inserting try/catch only during compilation without altering original logic or style.

Configurability – developers can define include/exclude patterns, black‑ and white‑lists, and skip specific files or functions.

Technology Stack

The test suite is built on Puppeteer, Jest, and JavaScript. The solution leverages the Babel compiler ecosystem (@babel/core, @babel/preset‑typescript, babel‑jest) to parse source code into an AST, traverse it, and inject try/catch statements at precise locations.

Solution Features

Two complementary Babel plugins are introduced:

babel-plugin-jest-try-catch

Automatically wraps await statements inside Jest test functions with try/catch, enhancing error handling and test stability.

Applicable scenario: Jest test cases.

Jest function detection: recognizes beforeAll, afterAll, afterEach, beforeEach, test, it, etc.

Smart wrapping: adds try/catch only to single‑line await expressions, handling expression statements, variable declarations, and assignments.

Avoids duplicate wrapping: does not wrap await already inside a try/catch/finally block.

Variable scope & destructuring: correctly processes const/let/var declarations and supports object/array destructuring.

Blacklist/whitelist: file‑path include/exclude patterns.

Ignore comments: @ignoreTryCatch annotation can skip specific functions or lines.

Custom error logging: integrates with enhancedLogError to generate detailed logs tied to the await expression.

Workflow

babel-plugin-function-try-catch

Provides automatic try/catch wrapping for top‑level functions, class methods, and object functions, protecting shared utility code.

Applicable scenario: public utility functions and top‑level functions.

Automatic top‑level function wrapping: encloses the outermost function body with try/catch.

File filtering: include/exclude patterns.

Ignore comments: @ignoreTryCatch can skip specific functions.

Custom log integration: works with enhancedLogError to produce precise error messages.

Workflow

Plugin Configuration

// babel.config.js
const { enhancedLogError } = require("@qunhe/pybell-utils");
global.enhancedLogError = enhancedLogError;
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-typescript'
  ],
  plugins: [
    ['@qunhe/pybell-utils/try-catch/jest/babel-plugin-jest-try-catch', {
      includes: ['**/__tests__/**/*.js'],
      excludes: ['**/__tests__/messageDemo/**'],
      errorLogger: 'enhancedLogError'
    }],
    ['@qunhe/pybell-utils/try-catch/function/babel-plugin-function-try-catch', {
      includes: ['**/lib/**/*.js'],
      excludes: ['**/lib/selector/**'],
      errorLogger: 'enhancedLogError'
    }]
  ]
};

Implementation Results

After two months of governance, the system captured 42,913 public‑function failures and 108,203 test‑statement failures. De‑duplicated counts show 564 distinct public‑function failures and 852 distinct test‑statement failures. Post‑treatment metrics indicate a 28% reduction in public‑function failures and a 15.7% drop in test‑statement error occurrences.

Conclusion

The dual‑plugin approach achieves low‑intrusion, compile‑time AST transformation that automatically adds try/catch to both Jest await calls and top‑level utility functions without touching business code. Structured error logs combined with the UI automation framework fill the gaps in Allure reports, dramatically improving observability, reducing manual debugging effort, and enhancing overall test reliability.