Precise Frontend Testing through Static Code Analysis

Precise Testing

Author: Yang Hainan (Original from JD Cloud Enterprise Services Department, authorized reuse)

1. Background

With the evolution of frontend technologies toward data‑binding frameworks, frontend code now has dependencies similar to backend services. To accurately assess the impact range of frontend code changes—whether by manual evaluation, experience, or full regression testing—this article proposes a static‑analysis‑based precise testing method that identifies affected functional areas.

2. How to Perform Precise Analysis

The goal is to determine which functionality is affected by a change. The precise frontend testing process is divided into four steps:

1) Identify the impacted pages.

2) Identify the impacted functionalities.

3) Based on the analysis results, locate the corresponding automated test case set and trigger execution.

4) Compare the incremental frontend coverage to confirm that the changes are fully covered.

By starting from routing information, a relationship between routes and displayed pages is built; then, using import relationships from entry files, a frontend code dependency tree is constructed. A git diff identifies changed files, which are traced back to the affected pages.

3. Implementation of Precise Analysis

1) Design Idea

Parse routing files to build a dependency tree for each menu, enabling reverse lookup from changed files to impacted pages.

2) Implementation Logic

Based on the design, and considering current technical support and rapid experimentation goals, the first version of the frontend precise analysis solution was developed.

Key logic: analysis and storage of the file dependency tree.

4. Application

1) Webhook Automatic Trigger

Configure a webhook link on the coding platform (http://codebase.jdfin.local/api/webhook/triggerEffectAnalysis) to automatically trigger analysis upon code submission.

2) Manual Trigger on Platform

5. Future Plan

The current platform implements about 80% of step one of the four‑step precise testing (routing to page association is not yet automated). It currently reaches page‑level impact, not button‑level. Future work includes researching frontend technologies to automatically parse routes and using Istanbul to compare incremental coverage, ensuring manual regression covers the changes.

-end-