Principle:Cypress io Cypress Configuration Scaffolding
| Knowledge Sources | |
|---|---|
| Domains | AST_Transformation, Configuration |
| Last Updated | 2026-02-12 00:00 GMT |
Overview
An AST-based code generation technique that safely modifies existing configuration files by parsing them into an abstract syntax tree, injecting new properties, and serializing back to source code.
Description
Configuration scaffolding uses AST manipulation instead of string concatenation or templating to modify cypress.config.{ts,js} files. This approach preserves existing code formatting, comments, and structure while adding new testing type blocks (e2e or component). By using recast for parsing and @babel/traverse for AST walking, the system can handle various code patterns: direct exports, function calls (defineConfig), and spread operators.
This approach is superior to string-based manipulation because it handles edge cases like existing configuration that uses function wrappers, ES module syntax, or TypeScript.
Usage
Use this principle during the Cypress setup wizard when adding E2E or component testing configuration to an existing cypress.config file, or when creating a new configuration file from scratch.
Theoretical Basis
AST Manipulation Pipeline:
1. Read existing config file content (or create empty)
2. Parse to AST using recast with TypeScript parser
3. Traverse AST to find the default export
4. Determine export pattern:
a. Object literal → add property directly
b. defineConfig() call → add to argument object
c. Function call → wrap with spread: { ...fn(), newProp }
5. Inject new ObjectProperty node for testing type block
6. Serialize AST back to source via recast.print()
7. Optionally format with Prettier
8. Write modified source back to file
Results: 'ADDED' | 'MERGED' | 'NEEDS_MERGE'