chore: bootstrap AI agent context files (AGENTS.md + CLAUDE.md) (#33429)

* chore: bootstrap AI agent context files (AGENTS.md + CLAUDE.md)

Adds a three-tier set of AI context files across the monorepo:

- Root AGENTS.md / CLAUDE.md — project overview, workspaces, common
  commands, architecture map, code conventions, and CI/CD summary
- Workspace-level pairs for cli/, packages/, npm/, tooling/,
  system-tests/, and scripts/
- Package-level pairs for all 33 packages/, 15 npm/, 3 tooling/
  packages, and the cli workspace (117 files total)

CLAUDE.md files are thin wrappers (@AGENTS.md import + workflow rules)
so Claude Code picks them up walking upward from cwd. AGENTS.md files
carry the substantive content and are also read natively by Codex CLI
and Cursor.

Command conventions applied throughout:
- No watch / file-watcher commands (agents run once and read results)
- No bare full-suite test runs for large packages; always target a
  specific file (<path-to-spec>) or glob ("<glob-pattern>")
- No cypress:open (interactive mode); use cypress:run with --spec
- Test runner syntax varies by package: vitest (test --),
  mocha (test-unit/test-integration --), jest (--testPathPattern),
  Cypress CT (cypress:run:ct -- --spec)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* gitignore

* clarify AI internal docs and contribution guidelines

* update TOC

* tweak nvm wording

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ryan Manuel
2026-03-09 16:01:52 -05:00
committed by GitHub
parent 9546ee8e26
commit 4931cf06ff
119 changed files with 2945 additions and 1 deletions
+3 -1
View File
@@ -403,4 +403,6 @@ system-tests/lib/validations
# IDE files
.cursor/*
!.cursor/BUGBOT.md
!.cursor/BUGBOT.md
settings.local.json
+223
View File
@@ -0,0 +1,223 @@
# Cypress Monorepo — AGENTS.md
## Overview
Cypress is an open-source end-to-end and component testing framework for the modern web. This monorepo ships the Cypress desktop application and CLI (`cypress`), the JavaScript driver that runs tests in the browser, the Electron-based test runner, a suite of published npm packages (component testing adapters, webpack/vite dev-server integrations, plugins), and the internal tooling used to build and release all of it. Cypress is used by millions of developers to test web applications across Chrome, Firefox, Edge, WebKit, and Electron.
## Workspaces
- **`cli/`** — The main `cypress` npm package (CLI entry point) and co-located component testing framework adapters (`@cypress/react`, `@cypress/vue`, `@cypress/angular`, `@cypress/svelte`, `@cypress/mount-utils`)
- **`packages/`** — Core internal packages: the test driver, Electron app, HTTP server, proxy, rewriter, launcher, frontend Vue app, launchpad, reporter, config, data-context, telemetry, types, errors, and more (33 packages total)
- **`npm/`** — Publicly published npm packages: bundler integrations, component testing adapters, plugins, and dev tooling (15 packages)
- **`tooling/`** — Internal build tooling: V8 snapshot creation, `packherd` dependency bundler, and `electron-mksnapshot` (3 packages)
- **`system-tests/`** — Full end-to-end system test suite run against a built Cypress binary
- **`scripts/`** — Internal build, release, and CI automation scripts
## Prerequisites
- **Node**: Use the node version specified in the `.node-version` file (check with `node -v`; run `nvm use` to manage versions)
- **Package manager**: Yarn 1 (`yarn@1.22.22`) — do not use npm or pnpm
- **Lerna**: Orchestrated via root `package.json` scripts; installed as a dev dependency
- **Electron** (for binary builds): handled automatically by `@packages/electron` during build
## Common Commands
### Setup & Development
```bash
# Install all dependencies (runs post-install hooks automatically)
yarn
# Start Cypress in dev mode (watch, rebuilds on change)
yarn dev
# Open the Cypress GUI in dev + global mode
yarn start
```
### Testing
```bash
# Run tests scoped to a single package (preferred over bare yarn test)
yarn test --scope @packages/server
# Target a specific vitest spec file (packages that use vitest)
yarn workspace @packages/config test -- <path-to-spec>
# Target a specific vitest spec by glob pattern
yarn workspace @packages/net-stubbing test -- "<glob-pattern>"
# Target a specific mocha spec file (packages that use mocha)
yarn workspace @packages/server test-unit -- <path-to-spec>
# Filter mocha tests by name pattern
yarn workspace @packages/server test-unit -- --grep "<pattern>"
# Run system tests (full binary-level E2E)
yarn test-system
# Run Cypress headlessly against a specific spec (dev mode)
yarn cypress:run -- --spec "path/to/spec.cy.ts"
# Run Cypress component tests against a specific spec (dev mode)
yarn cypress:run:ct -- --spec "path/to/spec.cy.ts"
```
### Type Checking
```bash
# Type-check all TypeScript across the monorepo
yarn type-check
# Lerna-only type check pass
yarn check-ts
```
### Linting & Formatting
```bash
# Lint all packages (no bail, concurrency 2)
yarn lint
# Lint and auto-fix specific scopes
yarn lint:fix
# Remove accidental .only from test files (specific file types)
yarn stop-only
# Remove .only from all test files in packages/
yarn stop-only-all
```
> **Note**: This project does **not** use Prettier. All formatting is enforced via ESLint.
### Build
```bash
# Full monorepo build
yarn build
# Build V8 snapshot (dev)
yarn build-v8-snapshot-dev
# Build V8 snapshot (prod)
yarn build-v8-snapshot-prod
# Clean all build artifacts
yarn clean
# Clean and reinstall (nuclear)
yarn clean-deps && yarn
```
## Architecture
### CLI & Distribution
- **`cypress` (`cli/`)** — The `cypress` npm package users install. Entry point for `cypress open`, `cypress run`, `cypress install`, etc. Version: 15.x.
### Test Runner & Driver
- **`@packages/driver`** — The JavaScript test driver that executes user test code inside the browser. Implements Cypress commands, assertions, retries, and all `cy.*` APIs.
- **`@packages/runner`** — The webpack-bundled runner UI that hosts the AUT (application under test) iframe and driver communication layer.
- **`@packages/app`** — The Vue 3 frontend for the Cypress GUI / Launchpad. Main visual interface for the desktop app.
- **`@packages/launchpad`** — Project creation, onboarding, and test file scaffold UI.
- **`@packages/frontend-shared`** — Shared Vue components and design system tokens used by `app` and `launchpad`.
- **`@packages/reporter`** — The test results reporter UI component (pass/fail tree, log panel).
### Server & Network
- **`@packages/server`** — HTTP server responsible for serving test files, handling browser launching, socket communication, and orchestrating the test run.
- **`@packages/proxy`** — HTTP/S proxy that intercepts all browser traffic during a test run.
- **`@packages/net-stubbing`** — Network stubbing (`cy.intercept`) implementation — request matching, response manipulation.
- **`@packages/network`** — Low-level network protocol utilities.
- **`@packages/network-tools`** — Higher-level networking helpers used across packages.
- **`@packages/https-proxy`** — HTTPS proxy implementation for TLS interception.
- **`@packages/rewriter`** — JavaScript source rewriter that transforms test and app code for Cypress compatibility (instrument, polyfill, inject).
### Configuration & Data
- **`@packages/config`** — Configuration types, defaults, validation, and the public `defineConfig` API.
- **`@packages/data-context`** — Centralized GraphQL data access layer for the Cypress app (projects, specs, runs, settings).
- **`@packages/scaffold-config`** — Logic for scaffolding new testing setups via Launchpad (framework detection, config file generation).
### Desktop & Electron
- **`@packages/electron`** — Electron runtime wrapper, binary building utilities, and auto-update integration.
- **`@packages/launcher`** — Browser detection and launch logic for Chrome, Firefox, Edge, WebKit, and Electron.
- **`@packages/extension`** — WebExtension injected into browsers to enable cross-origin features and automation hooks.
### Types, Errors & Utilities
- **`@packages/types`** — Shared TypeScript type definitions used across all packages.
- **`@packages/errors`** — Cypress error definitions, error templates, and error utilities.
- **`@packages/socket`** — WebSocket communication library used for driver ↔ server messaging (browser and Node sides).
- **`@packages/telemetry`** — OpenTelemetry instrumentation wrapper used throughout the monorepo.
- **`@packages/icons`** — Icon registry and SVG assets.
- **`@packages/stderr-filtering`** — Stderr output filtering utilities.
### Build & Snapshot Infrastructure
- **`@packages/v8-snapshot-require`** — Module loading utilities for V8 snapshots in Electron.
- **`@packages/packherd-require`** — Module loader for dependencies bundled by `@tooling/packherd`.
- **`@packages/web-config`** — Webpack/PostCSS configuration for the Vue frontend bundles.
- **`@packages/ts`** — Shared TypeScript configuration and `ts-node` register helper.
- **`@packages/eslint-config`** — Shared ESLint configuration preset used across packages.
- **`@packages/resolve-dist`** — Resolves paths to compiled distribution artifacts.
- **`@tooling/v8-snapshot`** — V8 snapshot creation tooling for Electron startup optimization.
- **`@tooling/packherd`** — Bundles all reachable dependencies from an entry point into a single artifact.
- **`@tooling/electron-mksnapshot`** — Configurable `mksnapshot` binary wrapper for the target Electron version.
### Component Testing Adapters (published via `npm/`)
- **`@cypress/react`** — Component testing adapter for React.
- **`@cypress/vue`** — Component testing adapter for Vue.js.
- **`@cypress/angular`** — Component testing adapter for Angular.
- **`@cypress/angular-zoneless`** — Angular adapter without zone.js.
- **`@cypress/svelte`** — Component testing adapter for Svelte.
- **`@cypress/mount-utils`** — Shared utilities used by all component testing adapters.
### Bundler Integrations (published via `npm/`)
- **`@cypress/webpack-dev-server`** — Webpack Dev Server launcher for component testing.
- **`@cypress/vite-dev-server`** — Vite Dev Server launcher for component testing.
- **`@cypress/webpack-preprocessor`** — Webpack preprocessor for bundling test spec files.
- **`@cypress/webpack-batteries-included-preprocessor`** — Webpack preprocessor with batteries included (TypeScript, CoffeeScript, etc.).
- **`@cypress/vite-plugin-cypress-esm`** — Vite plugin for mutable ESM modules in browser tests.
### Plugins & Dev Tooling (published via `npm/`)
- **`@cypress/grep`** — Plugin to filter test runs by substring/tag.
- **`@cypress/puppeteer`** — Plugin to enhance Cypress tests with Puppeteer.
- **`@cypress/schematic`** — Official Angular CLI schematic for adding Cypress.
- **`@cypress/eslint-plugin-dev`** — ESLint rules shared across Cypress development packages.
## Code Conventions
- **No Prettier** — Formatting is enforced entirely through ESLint. The `.prettierignore` excludes all files.
- **Single quotes** — `'single'` quote style required for all JS/TS.
- **No semicolons** — Enforced via ESLint (`semi: 'never'`).
- **2-space indentation** — Standard across all JS/TS files.
- **Trailing commas** — Required in multiline contexts (`comma-dangle: 'always-multiline'`).
- **No `var`** — `var` declarations are an ESLint error; use `const` or `let`.
- **Template literals** — `prefer-template: 'error'` — no string concatenation.
- **Object shorthand** — `object-shorthand: 'error'`.
- **No `console`** — `no-console: 'error'`; use the logger utilities instead.
- **TypeScript**: `strict: true` base, but `noImplicitAny: false` (implicit `any` allowed for pragmatic reasons).
- **Type-only imports**: `importsNotUsedAsValues: "error"` — use `import type` for type-only imports.
- **Unused vars**: Prefix with `_` to suppress (`argsIgnorePattern: '^_'`).
- **No `.only` in tests** — `mocha/no-exclusive-tests: 'error'`; `yarn stop-only` removes them.
- **`.skip` requires a comment** — Must include `NOTE:`, `TODO:`, or `FIXME:` comment explaining why.
- **Blank line before `return`** — Enforced via `padding-line-between-statements`.
- **Sync FS calls** — Flagged with a warning (except `existsSync`); prefer async variants.
## CI/CD
- **Primary CI**: CircleCI. Config lives in `.circleci/src/` (modular) and is compiled to `.circleci/packed/pipeline.yml`.
- **Supplementary**: GitHub Actions for security scanning (Snyk), SBOM generation, browser version auto-updates, and PR validation.
- **Base branch**: `develop` — all PRs target `develop`; release branches follow `release/X.Y.Z`.
- **Multi-platform matrix**: Linux x64, Linux ARM64, macOS x64, macOS ARM64, Windows — all run in parallel.
- **Release gate**: All tests must pass through the `ready-to-release` aggregation job before `npm-release` runs.
- **External PRs**: Require manual approval via `approve-contributor-pr` gate before CI runs.
- **Binary builds**: Triggered separately after npm release; cross-platform binaries are assembled and distributed via CDN.
+42
View File
@@ -0,0 +1,42 @@
# CLAUDE.md
## Workflow Orchestration
### 1. Plan Mode Default
- Enter plan mode for ANY non-trivial task (3+ steps or architectural decisions)
- If something goes sideways, STOP and re-plan immediately - don't keep pushing
- Use plan mode for verification steps, not just building
- Write detailed specs upfront to reduce ambiguity
### 2. Subagent Strategy
- Use subagents liberally to keep main context window clean
- Offload research, exploration, and parallel analysis to subagents
- For complex problems, throw more compute at it via subagents
- One task per subagent for focused execution
### 3. Self-Improvement Loop
- After ANY correction from the user: update the closest relevant `CLAUDE.md` file
- Write rules for yourself that prevent the same mistake
### 4. Verification Before Done
- Never mark a task complete without proving it works
- Diff behavior between main and your changes when relevant
- Ask yourself: "Would a staff engineer approve this?"
- Run relevant tests only, check logs, demonstrate correctness
### 5. Demand Elegance (Balanced)
- For non-trivial changes: pause and ask "is there a more elegant way?"
- If a fix feels hacky: "Knowing everything I know now, implement the elegant solution"
- Skip this for simple, obvious fixes - don't over-engineer
- Challenge your own work before presenting it
## Core Principles
- **Minimal Impact**: Changes should only touch what's necessary. Avoid introducing bugs.
@AGENTS.md
+33
View File
@@ -53,6 +53,10 @@ Thanks for taking the time to contribute! :smile:
- [Docker](#docker)
- [Docker as a performance constrained environment](#docker-as-a-performance-constrained-environment)
- [Packages](#packages)
- [AI assistant guidance files](#ai-assistant-guidance-files)
- [Files used by AI tools](#files-used-by-ai-tools)
- [Maintenance expectations](#maintenance-expectations)
- [External references](#external-references)
- [Committing Code](#committing-code)
- [Branches](#branches)
- [Pull Requests](#pull-requests)
@@ -464,6 +468,35 @@ Each package documents how to best work with it, so consult the `README.md` of e
They will outline development and test procedures. When in doubt just look at the `scripts` of each `package.json` file. Everything we do at Cypress is contained there.
### AI assistant guidance files
This repository includes lightweight AI guidance files used by common AI coding tools.
These files are intended to make project structure and conventions more discoverable
to AI assistants while remaining transparent and minimal for human contributors.
#### Files used by AI tools
- `CLAUDE.md` — Used by Claude Code (Claude loads these by walking upward from the working directory).
- `AGENTS.md` — Used by Codex CLI and Cursor. Claude references this via `@import`.
The root `AGENTS.md` provides project-wide context. Workspace and package-level
`AGENTS.md` files add scoped details.
#### Maintenance expectations
These files should be treated like other repository documentation:
- If you change repository structure, commands, conventions, or workflows,
update the relevant `AGENTS.md` / `CLAUDE.md` in the same PR.
- Keep repo-local guidance factual and descriptive (what exists),
not aspirational process.
#### External references
Some AI-related documentation may reference Cypress-internal resources.
Contributing to this repository does not require access to those systems.
## Committing Code
### Branches
+59
View File
@@ -0,0 +1,59 @@
# CLI Workspace
## Purpose
The `cli/` workspace contains the `cypress` npm package — the user-facing CLI and programmatic API — plus the first-party component-testing mount adapters that ship bundled inside it. This is the top-level package users install (`npm install cypress`). The mount adapters (`@cypress/react`, `@cypress/vue`, etc.) live here as sibling directories and are published independently on npm, but their built artifacts are also copied into `cli/` so that users can import them as `cypress/react`, `cypress/vue`, etc.
## Package Map
### Main CLI
**cypress** — The `cypress` npm package. Provides the `cypress` binary, programmatic Node.js API, TypeScript type definitions, and re-exports the built CT adapter artifacts.
### Component-Testing Adapters
**@cypress/angular** — Mount adapter for Angular 18+ components using zone.js-based change detection.
**@cypress/angular-zoneless** — Mount adapter for Angular 20+ components using the experimental zoneless change detection strategy (no zone.js).
**@cypress/mount-utils** — Internal shared utilities and types that all CT mount adapters depend on. Not intended for direct use by end users.
**@cypress/react** — Mount adapter for React 18+ components.
**@cypress/svelte** — Mount adapter for Svelte 5+ components.
**@cypress/vue** — Mount adapter for Vue 3 components.
## Workspace Commands
```bash
# Build the main cypress CLI package
cd cli && yarn build-cli
# Build only (no pre/post steps)
cd cli && yarn build
# Run a specific unit test file
cd cli && yarn test-unit -- <path-to-spec>
# Run unit tests matching a glob pattern
cd cli && yarn test-unit -- "<glob-pattern>"
# Type-check types/
cd cli && yarn types
# Build a CT adapter (example: react)
cd cli/react && yarn build
# Build mount-utils (tsc-based, not rollup)
cd cli/mount-utils && yarn build
```
## Notes
- The main CLI build uses Rollup (configured in `rollup.config.mjs`). Entry points are `lib/index.ts`, `lib/cli.ts`, `lib/cypress.ts`, `lib/exec/xvfb.ts`, `lib/exec/spawn.ts`, and `lib/bin/cypress.ts`. Output goes to `dist/` and is copied to `build/` via `sync-build-dist.ts`.
- Each CT adapter's `postbuild` runs `../../scripts/sync-exported-npm-with-cli.js`, which copies the adapter's published files into the matching subdirectory under `cli/` (e.g. `npm/react/dist``cli/react/dist`). This is what makes `import ... from 'cypress/react'` work.
- Unit tests for the CLI itself live in `cli/test/` and run under Vitest (`test/**/*.spec.ts`).
- TypeScript type definitions for the public Cypress API live in `cli/types/`. The `dtslint` tool is used to validate them.
- The `CYPRESS_INSTALL_BINARY` environment variable can be set to a path or URL to override the binary downloaded during `postinstall`.
- The `cypress` package sets `"private": true` in its monorepo `package.json` — publishing is handled by CI scripts that prepare a separate `package.json`.
+3
View File
@@ -0,0 +1,3 @@
# CLI
@AGENTS.md
+153
View File
@@ -0,0 +1,153 @@
# AI Tooling for the Cypress Monorepo
This repo is AI-ready. The goal of these docs is to make **effective AI workflows
discoverable alongside the code**, with minimal process overhead.
> Note: Some references below point to Cypress-internal resources (e.g. AI Hub).
> These are optional background/context and are not required to contribute to this repository.
> All repo-local AI guidance should remain usable without access to internal systems.
## Canonical Source of Truth
Canonical workflows and patterns are curated in the AI Hub (internal reference):
- Patterns: https://aihub.cypress.io/patterns
- Playbooks: https://aihub.cypress.io/playbooks
- Tools (skills installer, etc.): https://aihub.cypress.io/tools
- Recordings / notes: https://aihub.cypress.io/forum
- Browse by tag: https://aihub.cypress.io/browse-by-tag
> If you improve a workflow/pattern materially, prefer capturing it in the Hub
> (PR-reviewed) and linking from here.
## Tool Entrypoints
### Claude Code CLI
[Docs](https://code.claude.com/docs/en/memory) — Claude Code walks **upward** from your
current working directory to the git root at launch, loading every `CLAUDE.md` it finds.
`CLAUDE.md` files in this repo:
```
CLAUDE.md ← root (workflow rules + @AGENTS.md)
cli/CLAUDE.md ← cli workspace
cli/cypress/CLAUDE.md ← cypress main package
cli/angular/CLAUDE.md
cli/angular-zoneless/CLAUDE.md
cli/mount-utils/CLAUDE.md
cli/react/CLAUDE.md
cli/svelte/CLAUDE.md
cli/vue/CLAUDE.md
npm/CLAUDE.md ← npm workspace
npm/angular/CLAUDE.md
npm/angular-zoneless/CLAUDE.md
npm/eslint-plugin-dev/CLAUDE.md
npm/grep/CLAUDE.md
npm/mount-utils/CLAUDE.md
npm/puppeteer/CLAUDE.md
npm/react/CLAUDE.md
npm/schematic/CLAUDE.md
npm/svelte/CLAUDE.md
npm/vite-dev-server/CLAUDE.md
npm/vite-plugin-cypress-esm/CLAUDE.md
npm/vue/CLAUDE.md
npm/webpack-batteries-included-preprocessor/CLAUDE.md
npm/webpack-dev-server/CLAUDE.md
npm/webpack-preprocessor/CLAUDE.md
packages/CLAUDE.md ← packages workspace
packages/app/CLAUDE.md
packages/config/CLAUDE.md
packages/data-context/CLAUDE.md
packages/driver/CLAUDE.md
packages/electron/CLAUDE.md
packages/errors/CLAUDE.md
packages/eslint-config/CLAUDE.md
packages/extension/CLAUDE.md
packages/frontend-shared/CLAUDE.md
packages/https-proxy/CLAUDE.md
packages/icons/CLAUDE.md
packages/launcher/CLAUDE.md
packages/launchpad/CLAUDE.md
packages/net-stubbing/CLAUDE.md
packages/network/CLAUDE.md
packages/network-tools/CLAUDE.md
packages/packherd-require/CLAUDE.md
packages/proxy/CLAUDE.md
packages/reporter/CLAUDE.md
packages/resolve-dist/CLAUDE.md
packages/rewriter/CLAUDE.md
packages/root/CLAUDE.md
packages/runner/CLAUDE.md
packages/scaffold-config/CLAUDE.md
packages/server/CLAUDE.md
packages/socket/CLAUDE.md
packages/stderr-filtering/CLAUDE.md
packages/telemetry/CLAUDE.md
packages/ts/CLAUDE.md
packages/types/CLAUDE.md
packages/v8-snapshot-require/CLAUDE.md
packages/web-config/CLAUDE.md
tooling/CLAUDE.md ← tooling workspace
tooling/electron-mksnapshot/CLAUDE.md
tooling/packherd/CLAUDE.md
tooling/v8-snapshot/CLAUDE.md
system-tests/CLAUDE.md
scripts/CLAUDE.md
```
Each `CLAUDE.md` (except the root) is a thin wrapper — title heading + `@AGENTS.md`.
All substantive content lives in the sibling `AGENTS.md`. This keeps `CLAUDE.md` files
minimal while making them self-documenting via the import.
---
### Codex CLI
[Docs](https://developers.openai.com/codex/guides/agents-md/) — Codex walks **downward**
from the git root to your current working directory, concatenating `AGENTS.md` files
root-first (32 KiB limit total).
`AGENTS.md` files in this repo mirror the `CLAUDE.md` list above, with the same paths
but `AGENTS.md` filename instead. The root `AGENTS.md` provides full project context;
workspace and package `AGENTS.md` files add scoped detail.
---
### Cursor
[Docs](https://cursor.com/docs/context/rules) — Cursor reads `.cursor/rules/*.mdc` and
natively reads `AGENTS.md` files.
Existing Cursor rules in this repo:
- `.cursor/BUGBOT.md` — PR review checklist (security, performance, Cypress-specific rules)
- `packages/electron/.cursor/rules/electron-upgrade.mdc` — Electron upgrade guide
| Type | Frontmatter | When active |
| --- | --- | --- |
| Always Apply | `alwaysApply: true` | Every session |
| Specific Files | `globs: ["app/**"]` | When editing a matching file |
| Agent-requested | `description: "..."` only | Agent decides based on description |
| Manual | none | Only when mentioned via `@rule-name` in chat |
---
## Why AGENTS.md Is the Single Source of Truth
Cursor and Codex read `AGENTS.md` natively; Claude Code reads it via `@import`. One edit
propagates to all three tools. The only separately-maintained content is the workflow
orchestration section in root `CLAUDE.md` — that is Claude Code-specific and intentionally
kept separate.
## Contributing
Hub contributions are preferred for canonical patterns and playbooks. Repo-local scaffolds
(`AGENTS.md` / `CLAUDE.md`) should stay minimal — factual descriptions of what exists,
not aspirational guides.
If you add a new package to the monorepo, add a `CLAUDE.md` and `AGENTS.md` alongside
it following the patterns in existing packages.
When repo structure, commands, or conventions change, update the relevant `AGENTS.md` /
`CLAUDE.md` files in the same PR (similar to keeping READMEs accurate).
+60
View File
@@ -0,0 +1,60 @@
# npm Workspace
## Purpose
The `npm/` directory contains the publicly published npm packages for the Cypress ecosystem, including component testing adapters for each supported UI framework, bundler integrations that power the component testing dev server, and plugins and dev tooling used by Cypress consumers and the Cypress team. These packages are versioned and released independently from the main `cypress` binary; they are released automatically via semantic-versioning commit prefixes (`feat`, `fix`, `chore`, etc.) when changes land on `develop`.
## Package Map
### Component Testing Adapters
- **@cypress/react** — Mount React components (React 18+) in the Cypress test runner
- **@cypress/vue** — Mount Vue 3 components in the Cypress test runner
- **@cypress/angular** — Mount Angular components (Angular 18+) in the Cypress test runner using zone.js
- **@cypress/angular-zoneless** — Mount Angular components (Angular 20+) without zone.js for zoneless change detection
- **@cypress/svelte** — Mount Svelte 5+ components in the Cypress test runner
- **@cypress/mount-utils** — Shared utility types and helper functions consumed by all component testing adapters; not intended for direct use by end users
### Bundler Integrations
- **@cypress/webpack-dev-server** — Implements the object-syntax `devServer` API for Cypress component testing backed by Webpack Dev Server
- **@cypress/vite-dev-server** — Implements the object-syntax `devServer` API for Cypress component testing backed by Vite (supports Vite 5, 6, and 7)
- **@cypress/webpack-preprocessor** — Cypress file preprocessor for bundling test files via Webpack 5; requires peer deps (`@babel/core`, `babel-loader`, etc.) to be installed by the consumer
- **@cypress/webpack-batteries-included-preprocessor** — Wrapper around `@cypress/webpack-preprocessor` that bundles Babel, TypeScript, and CoffeeScript loaders so consumers do not need to configure them separately
- **@cypress/vite-plugin-cypress-esm** — Vite plugin (alpha) that wraps ES modules in a `Proxy` to allow mutation/mocking of ESM namespaces in component tests
### Plugins & Dev Tooling
- **@cypress/grep** — Plugin for filtering Cypress tests by substring or tags at runtime, with options for spec pre-filtering and test burning
- **@cypress/puppeteer** — Plugin for accessing Puppeteer's browser API (`page`, `browser`) from within Cypress test commands via a `cy.puppeteer()` style interface
- **@cypress/schematic** — Official Angular CLI schematic and builder for scaffolding Cypress configuration into Angular projects (`ng add @cypress/schematic`)
- **@cypress/eslint-plugin-dev** — Internal ESLint plugin containing shared lint rules used across Cypress development packages; not intended for use by Cypress consumers
## Workspace Commands
Each package manages its own build. From within a package directory:
```sh
yarn build # compile TypeScript / run rollup (varies by package)
yarn check-ts # type-check without emitting
yarn lint # run ESLint
yarn test -- <path-to-spec> # run vitest targeting a specific file (unit test packages)
yarn test -- "<glob-pattern>" # run vitest specs matching a glob (unit test packages)
yarn cy:run -- --spec <path-to-spec> # run a specific spec (adapter packages)
```
From the monorepo root using Nx:
```sh
yarn nx build @cypress/<pkg> # build a single package
yarn nx run-many -t build --projects=tag:npm # build all npm packages
```
## Notes
- Several packages (`react`, `vue`, `angular`, `angular-zoneless`, `svelte`, `mount-utils`) run a `postbuild` script (`sync-exported-npm-with-cli.js`) that copies their `dist/` output into the `cli/` directory so the main `cypress` binary bundles them. Changes to these packages must be built before testing in the main binary.
- `@cypress/webpack-dev-server` and `@cypress/vite-dev-server` are bundled with the Cypress binary and generally do not need to be installed separately by end users; the object-syntax `devServer` config in `cypress.config.ts` is the primary API.
- `@cypress/webpack-batteries-included-preprocessor` requires `@cypress/webpack-preprocessor` as a peer dependency and must be installed alongside it.
- `@cypress/eslint-plugin-dev` is for internal Cypress development only — do not recommend it to end users; the user-facing ESLint plugin lives at `eslint-plugin-cypress` (a separate repository).
- `@cypress/xpath` (also in this directory) is deprecated and no longer maintained.
- Releases are triggered automatically by semantic commit messages on `develop`; there is no manual publish step for individual packages.
+3
View File
@@ -0,0 +1,3 @@
# npm
@AGENTS.md
+27
View File
@@ -0,0 +1,27 @@
# @cypress/angular-zoneless
`@cypress/angular-zoneless` is a published npm package that provides the `mount` function for mounting Angular components without zone.js, targeting Angular 20+ with zoneless change detection. It is bundled with the `cypress` binary and does not typically need to be installed separately by end users.
## Key Commands
```sh
yarn build # compile via rollup (outputs to dist/); also syncs to cli/angular-zoneless
yarn check-ts # TypeScript type-check without emitting
yarn lint # ESLint
```
## Architecture
- `src/index.ts` — public entry point; re-exports `mount` and related types
- `src/mount.ts` — mounting logic adapted for Angular's zoneless change detection (no zone.js bootstrapping)
## Gotchas / Notes
- Peer dependencies require Angular 20+ (or Angular 20 with development preview of zoneless change detection). Unlike `@cypress/angular`, there is no `zone.js` peer dependency.
- The `postbuild` script copies `dist/` to `cli/angular-zoneless/` in the monorepo root. Build before testing in the Cypress binary.
- Uses TypeScript ~5.9.2 (newer than most other npm packages in this workspace which use ~5.4.5).
## Integration Points
- Depends on `@cypress/mount-utils` (sibling package) for shared adapter utilities and types.
- Counterpart to `@cypress/angular` — use this package for Angular 20+ zoneless projects.
+3
View File
@@ -0,0 +1,3 @@
# @cypress/angular-zoneless
@AGENTS.md
+27
View File
@@ -0,0 +1,27 @@
# @cypress/angular
`@cypress/angular` is a published npm package that provides the `mount` function for mounting Angular components (Angular 18+) inside the Cypress test runner for component testing. It is bundled with the `cypress` binary and does not typically need to be installed separately by end users.
## Key Commands
```sh
yarn build # compile via rollup (outputs to dist/); also syncs to cli/angular
yarn check-ts # TypeScript type-check without emitting
yarn lint # ESLint
```
## Architecture
- `src/index.ts` — public entry point; re-exports `mount` and related types
- `src/mount.ts` — core Angular component mounting logic (bootstraps an Angular application into the Cypress AUT iframe)
## Gotchas / Notes
- Requires `zone.js` as a peer dependency. For Angular 20+ without zone.js, use `@cypress/angular-zoneless` instead.
- The `postbuild` script (`sync-exported-npm-with-cli.js`) copies `dist/` to `cli/angular/` in the monorepo root. If you change this package and need to test it inside the full Cypress binary, you must run `yarn build` first.
- Built output goes to `{workspaceRoot}/cli/angular` per the Nx target config — not just `dist/`.
## Integration Points
- Depends on `@cypress/mount-utils` (sibling package) for shared adapter utilities and types.
- The `cli/angular` copy is what the bundled `cypress` package ships to end users.
+3
View File
@@ -0,0 +1,3 @@
# @cypress/angular
@AGENTS.md
+30
View File
@@ -0,0 +1,30 @@
# @cypress/schematic
`@cypress/schematic` is a published npm package providing the official Angular CLI schematic and builder for Cypress. Running `ng add @cypress/schematic` in an Angular project scaffolds Cypress configuration, creates the `cypress.config.ts`, and registers Cypress as an Angular builder target for e2e and component testing.
## Key Commands
```sh
yarn build # tsc -p tsconfig.build.json; compiles .ts to .js in-place under src/
yarn lint # ESLint
yarn test -- <path-to-spec> # run a specific vitest spec file
yarn test -- "<glob-pattern>" # run vitest specs matching a glob
```
## Architecture
- `src/schematics/` — Angular schematics definitions:
- `collection.json` — schematic collection manifest
- `ng-add/``ng add` schematic (initial Cypress scaffolding)
- `ng-generate/``ng generate` schematics (scaffold additional Cypress config)
- `utils/` — shared schematic utility helpers
- `src/builders/` — Angular builders:
- `builders.json` — builder collection manifest
- `cypress/` — builder that invokes Cypress from the Angular CLI (`ng run app:cypress`)
- `src/e2e.spec.ts`, `src/ct.spec.ts` — vitest tests for the builders/schematics
## Gotchas / Notes
- Unlike most packages in this workspace, this package does NOT compile to a separate `dist/` directory — the TypeScript is compiled in-place and the `main` field points to `./src`. Nx outputs are `src/**/*.js` and `src/**/*.d.ts`.
- The directory name in the monorepo is `cypress-schematic/` but the published package name is `@cypress/schematic`.
- Peer dependencies require `@angular/cli >= 20.0.0` and `cypress >= 15.8.0`.
+3
View File
@@ -0,0 +1,3 @@
# @cypress/schematic
@AGENTS.md
+27
View File
@@ -0,0 +1,27 @@
# @cypress/eslint-plugin-dev
`@cypress/eslint-plugin-dev` is a published npm package providing shared ESLint rules and configurations used internally across Cypress development packages. It is intended exclusively for use within the Cypress monorepo and its internal tooling — it is not the user-facing Cypress ESLint plugin (which lives in a separate `eslint-plugin-cypress` repository).
## Key Commands
```sh
yarn lint # ESLint on this package itself
yarn lint-changed # lint only files changed since the last commit
yarn lint-fix # ESLint with --fix
yarn test -- <path-to-spec> # run a specific vitest spec file
yarn test -- "<glob-pattern>" # run vitest specs matching a glob
```
## Architecture
- `lib/index.js` — main entry point; exports the ESLint plugin (rules and configs)
- `lib/custom-rules/` — custom ESLint rules authored for Cypress internals
- `lib/scripts/` — CLI scripts:
- `lint-changed.js` (also exposed as `lint-changed` binary) — lints only changed files
- `lint-pre-commit.js` (also exposed as `lint-pre-commit` binary) — pre-commit hook linting
## Gotchas / Notes
- This is an internal development tool only. Do not recommend it to Cypress end users; they should use `eslint-plugin-cypress` instead.
- The package exposes two CLI binaries (`lint-changed` and `lint-pre-commit`) which are used in git hooks and CI tooling across the monorepo.
- Peer dependencies cover ESLint 8.x only (`eslint: "^= 8.0.0"`); not compatible with ESLint 9 flat config in its consumer role.
+3
View File
@@ -0,0 +1,3 @@
# @cypress/eslint-plugin-dev
@AGENTS.md
+34
View File
@@ -0,0 +1,34 @@
# @cypress/grep
`@cypress/grep` is a published npm package providing test filtering capabilities for Cypress. It allows users to run subsets of tests by matching against test title substrings or user-defined tags, with options for spec-level pre-filtering and test burning (repeated test execution to detect flakiness).
## Key Commands
```sh
yarn build # tsc; outputs to dist/
yarn lint # ESLint
yarn test -- <path-to-spec> # run a specific vitest spec file
yarn test -- "<glob-pattern>" # run vitest specs matching a glob
# Integration test scripts (each exercises a different filtering scenario):
yarn grep # filter by title substring
yarn tags # filter by tag
yarn burn # repeat tests N times
yarn filter:specs # skip specs with no matching tests
yarn omit:specs # omit filtered specs from results
# ...and many more scenario-specific scripts in package.json
```
## Architecture
- `src/index.ts` — main entry point; registers `it`/`describe` overrides and installs grep filtering logic in the Cypress browser context
- `src/plugin.ts` — Node-side plugin to be registered in `cypress.config.ts`; handles spec pre-filtering
- `src/register.ts` — support file registration helper
- `src/utils.ts` — shared utilities (tag parsing, string matching, etc.)
## Gotchas / Notes
- Two separate entry points are published (`"."` and `"./plugin"`): the root entry is loaded in the browser support file, and `@cypress/grep/plugin` is loaded in the Node plugin file (`setupNodeEvents`).
- Tag syntax supports boolean logic: space-separated tags are OR'd, `+`-joined tags are AND'd, and `-` prefix negates a tag (e.g., `smoke+-high` means "smoke AND NOT high").
- Marked with `"!cypress"` Nx implicit dependency to prevent circular build ordering.
- Uses `find-test-names` and `globby` for spec pre-filtering without running the browser.
+3
View File
@@ -0,0 +1,3 @@
# @cypress/grep
@AGENTS.md
+25
View File
@@ -0,0 +1,25 @@
# @cypress/mount-utils
`@cypress/mount-utils` is a published npm package that exports shared TypeScript types and utility functions used by all Cypress component testing adapter packages. It is not intended for direct use by end users of Cypress.
## Key Commands
```sh
yarn build # tsc compile (outputs to dist/); also syncs to cli/mount-utils
yarn check-ts # TypeScript type-check without emitting
yarn lint # ESLint
```
## Architecture
- `src/index.ts` — single entry point exporting all shared utilities and types for adapter packages
## Gotchas / Notes
- The `build` script tolerates type errors (`|| echo 'built, with type errors'`) — check `yarn check-ts` separately for a clean type report.
- The `postbuild` step syncs `dist/` to both `cli/mount-utils/` and `{projectRoot}/dist` — required before any adapter package that depends on it can build correctly.
- This package has no test script; it is a pure utility library validated through the consuming adapter packages.
## Integration Points
- Consumed by `@cypress/react`, `@cypress/vue`, `@cypress/angular`, `@cypress/angular-zoneless`, and `@cypress/svelte` as a build-time (`devDependencies`) dependency.
+3
View File
@@ -0,0 +1,3 @@
# @cypress/mount-utils
@AGENTS.md
+32
View File
@@ -0,0 +1,32 @@
# @cypress/puppeteer
`@cypress/puppeteer` is a published npm package (currently in public beta) that provides a Cypress plugin enabling access to Puppeteer's browser API from within Cypress test commands, allowing teams to use Puppeteer capabilities (e.g., PDF generation, advanced browser control) alongside their Cypress tests.
## Key Commands
```sh
yarn build # rimraf dist + tsc; outputs to dist/
yarn watch # rimraf dist + tsc in watch mode
yarn check-ts # TypeScript type-check without emitting
yarn lint # ESLint
yarn test -- src/plugin/setup.spec.ts # run a specific vitest spec file
yarn test -- "src/**/*.spec.ts" # run vitest specs matching a glob
yarn cypress:run -- --spec "cypress/e2e/puppeteer.cy.ts" --browser chrome # run a targeted integration test (Chrome required)
```
## Architecture
- `src/plugin/` — Node-side plugin code registered in `setupNodeEvents`:
- `index.ts` — main plugin entry; sets up the Puppeteer CDP connection
- `activateMainTab.ts` — focuses the main browser tab
- `retry.ts` — retry utility for Puppeteer operations
- `setup.ts` — initializes the Puppeteer connection to the Cypress-managed browser
- `util.ts` — shared utilities
- `src/support/index.ts` — browser-side support commands (adds `cy.puppeteer()` or similar custom commands)
- `support/` — published support file directory (separate from `src/support` compiled output)
## Gotchas / Notes
- This package is in public beta — breaking changes may occur. Feedback is tracked in the GitHub discussion linked in the README.
- Requires Chrome (or a Chromium-based browser) because it relies on the Chrome DevTools Protocol (CDP) to connect Puppeteer to the Cypress-managed browser instance.
- The `cypress:run` script explicitly passes `--browser chrome`.
+3
View File
@@ -0,0 +1,3 @@
# @cypress/puppeteer
@AGENTS.md
+30
View File
@@ -0,0 +1,30 @@
# @cypress/react
`@cypress/react` is a published npm package that provides the `mount` function for mounting React components (React 18+) inside the Cypress test runner for component testing. It is bundled with the `cypress` binary and does not typically need to be installed separately by end users.
## Key Commands
```sh
yarn build # rimraf dist + rollup (outputs to dist/); also syncs to cli/react
yarn check-ts # TypeScript type-check without emitting
yarn lint # ESLint
yarn cy:run -- --spec <path-to-spec> # run a specific component test spec
```
## Architecture
- `src/index.ts` — public entry point
- `src/mount.ts` — core React mounting logic (renders into the Cypress AUT iframe using `react-dom`)
- `src/createMount.ts` — factory used to create the `mount` function with custom options
- `src/getDisplayName.ts` — utility to extract display names for logging
## Gotchas / Notes
- The `postbuild` step syncs `dist/` to `cli/react/` in the monorepo root — build before testing against the Cypress binary.
- Ships multiple bundle formats: CJS (`dist/cypress-react.cjs.js`), ESM bundler (`dist/cypress-react.esm-bundler.js`), and browser UMD (`dist/cypress-react.browser.js`).
- Supports React 18 and 19 via peer dependency ranges.
## Integration Points
- Depends on `@cypress/mount-utils` (sibling package) for shared adapter utilities.
- The `cli/react` copy is what the bundled `cypress` package ships to end users.
+3
View File
@@ -0,0 +1,3 @@
# @cypress/react
@AGENTS.md
+27
View File
@@ -0,0 +1,27 @@
# @cypress/svelte
`@cypress/svelte` is a published npm package that provides the `mount` function for mounting Svelte 5+ components inside the Cypress test runner for component testing. It is bundled with the `cypress` binary and does not typically need to be installed separately by end users.
## Key Commands
```sh
yarn build # rimraf dist + rollup; also syncs to cli/svelte
yarn check-ts # TypeScript type-check without emitting
yarn lint # ESLint
```
## Architecture
- `src/index.ts` — public entry point
- `src/mount.ts` — core Svelte component mounting logic
## Gotchas / Notes
- Requires Svelte 5+. Cypress 13 and earlier supported Svelte 4 and below.
- The `postbuild` step syncs `dist/` to `cli/svelte/` — build before testing against the Cypress binary.
- There is no `test` script in this package's `package.json`; component tests are run via Cypress directly.
- Marked with `"!cypress"` as an Nx implicit dependency to avoid circular build ordering issues.
## Integration Points
- Depends on `@cypress/mount-utils` (sibling package) for shared adapter utilities.
+3
View File
@@ -0,0 +1,3 @@
# @cypress/svelte
@AGENTS.md
+36
View File
@@ -0,0 +1,36 @@
# @cypress/vite-dev-server
`@cypress/vite-dev-server` is a published npm package that implements the object-syntax `devServer` API for Cypress component testing backed by Vite. It is bundled with the Cypress binary and typically does not need to be installed separately by end users.
## Key Commands
```sh
yarn build # tsc (tsconfig.build.json); outputs to dist/
yarn check-ts # TypeScript type-check without emitting
yarn lint # ESLint
yarn test -- <path-to-spec> # run a specific vitest spec file
yarn test -- "<glob-pattern>" # run vitest specs matching a glob
```
## Architecture
- `src/devServer.ts` — main entry point; resolves framework config and starts the Vite dev server
- `src/getVite.ts` — dynamically loads the correct installed version of Vite (5, 6, or 7)
- `src/resolveConfig.ts` — merges user Vite config with Cypress-specific overrides
- `src/constants.ts` — shared constants
- `src/plugins/` — Vite plugins injected by the dev server:
- `cypress.ts` — injects the Cypress client runtime
- `sourcemap.ts` — source map handling
- `client/` — browser-side runtime code served to the AUT iframe
- `index.html` — template HTML for the component test runner
## Gotchas / Notes
- Published as an ES module (`"type": "module"` in package.json). Importing from CommonJS contexts requires special handling.
- Supports Vite 5, 6, and 7 simultaneously via aliased dev dependencies (`vite-5`, `vite-6`, `vite-7`) and dynamic version detection at runtime.
- The package runs its own integration tests using a "cypress-in-cypress" approach (`cypress:run`/`cypress:open` scripts) that set special environment variables (`CYPRESS_INTERNAL_E2E_TESTING_SELF_PARENT_PROJECT`).
## Integration Points
- Used as the dev server backend when users configure `devServer: { bundler: 'vite', ... }` in `cypress.config.ts`.
- Works alongside the component testing adapter packages (`@cypress/react`, `@cypress/vue`, etc.) which provide the `mount` function.
+3
View File
@@ -0,0 +1,3 @@
# @cypress/vite-dev-server
@AGENTS.md
+29
View File
@@ -0,0 +1,29 @@
# @cypress/vite-plugin-cypress-esm
`@cypress/vite-plugin-cypress-esm` is a published npm package (currently alpha/pre-release) providing a Vite plugin that intercepts and rewrites ES module imports inside Cypress component tests, wrapping them in a `Proxy` so that ESM module namespaces become mutable. This enables mocking libraries like Sinon to replace module members even though the ESM spec requires sealed namespaces.
## Key Commands
```sh
yarn build # tsc; outputs to dist/
yarn check-ts # TypeScript type-check without emitting
yarn lint # ESLint
yarn cypress:run -- --spec <path-to-spec> # run a targeted component test
```
## Architecture
- `src/index.ts` — Vite plugin entry; registers Vite transform hooks to rewrite ES module imports
- `client/` — browser-side runtime code that implements the `Proxy` wrapper for module namespaces
- `dist/` — compiled output
## Gotchas / Notes
- This package is alpha/pre-release — API and behavior may change. Not recommended for production use without accepting potential instability.
- Debug logs are available at runtime: set `DEBUG=cypress:vite-plugin-cypress-esm` in Node for transform logs; browser console shows proxy interception logs.
- Uses `picomatch` for pattern matching to decide which modules to wrap.
- Requires Vite (consumed from the user's project as a peer dependency); not listed explicitly as a peer but implied by being a Vite plugin.
## Integration Points
- Used alongside `@cypress/vite-dev-server` in Vite-based component test setups.
+3
View File
@@ -0,0 +1,3 @@
# @cypress/vite-plugin-cypress-esm
@AGENTS.md
+31
View File
@@ -0,0 +1,31 @@
# @cypress/vue
`@cypress/vue` is a published npm package that provides the `mount` function for mounting Vue 3 components inside the Cypress test runner for component testing. It is bundled with the `cypress` binary and does not typically need to be installed separately by end users.
## Key Commands
```sh
yarn build # rimraf dist + rollup; also syncs to cli/vue
yarn check-ts # vue-tsc type-check + tsd validation
yarn lint # ESLint (includes .vue files)
yarn cy:run -- --spec <path-to-spec> # run a specific component test spec
yarn tsd # build + run tsd type assertion tests
```
## Architecture
- `src/index.ts` — public entry point; re-exports `mount` and types
- `src/mount.ts` — core Vue 3 mounting logic (creates a Vue app instance inside the Cypress AUT iframe)
- `src/types.ts` — shared TypeScript types for mount options
- `src/shims-vue.d.ts` — TypeScript shim so `.vue` files can be imported
## Gotchas / Notes
- Type-checking uses `vue-tsc` (not plain `tsc`) and also runs `tsd` assertions in the `test-tsd/` directory. Run `yarn check-ts` to execute both.
- The `postbuild` step syncs `dist/` to `cli/vue/` — build before testing against the Cypress binary.
- Peer dependency on `@cypress/webpack-dev-server` is optional (used in webpack-based setups).
## Integration Points
- Depends on `@cypress/mount-utils` (sibling package) for shared adapter utilities.
- Optional peer dependency on `@cypress/webpack-dev-server` for webpack-based component test configurations.
+3
View File
@@ -0,0 +1,3 @@
# @cypress/vue
@AGENTS.md
@@ -0,0 +1,27 @@
# @cypress/webpack-batteries-included-preprocessor
`@cypress/webpack-batteries-included-preprocessor` is a published npm package that wraps `@cypress/webpack-preprocessor` with a pre-configured webpack setup that includes Babel, TypeScript, and CoffeeScript support out of the box. It is intended for users who do not want to configure their own webpack setup for Cypress test file preprocessing.
## Key Commands
```sh
yarn build # tsc; outputs to dist/
yarn check-ts # TypeScript type-check without emitting
yarn lint # ESLint
yarn test -- <path-to-spec> # run a specific vitest spec file
yarn test -- "<glob-pattern>" # run vitest specs matching a glob
```
## Architecture
- `index.ts` (compiled to `dist/`) — single entry point; constructs and exports the pre-configured preprocessor, bundling babel-loader, ts-loader, and coffee-loader with default configurations
## Gotchas / Notes
- Requires `@cypress/webpack-preprocessor` as a peer dependency — both packages must be installed together.
- Bundles many dependencies directly (`@babel/core`, `@babel/preset-env`, `ts-loader`, `coffee-loader`, etc.) so consumers do not need to install them. This is intentional and differs from `@cypress/webpack-preprocessor`.
- Includes Node.js polyfills (`buffer`, `os-browserify`, `path-browserify`, `process`, `stream-browserify`) for browser-targeted builds.
## Integration Points
- Directly depends on (and wraps) `@cypress/webpack-preprocessor` via a peer dependency relationship.
@@ -0,0 +1,3 @@
# @cypress/webpack-batteries-included-preprocessor
@AGENTS.md
+41
View File
@@ -0,0 +1,41 @@
# @cypress/webpack-dev-server
`@cypress/webpack-dev-server` is a published npm package that implements the object-syntax `devServer` API for Cypress component testing backed by Webpack Dev Server. It is bundled with the Cypress binary and typically does not need to be installed separately by end users.
## Key Commands
```sh
yarn build # rimraf dist + tsc; outputs to dist/
yarn check-ts # TypeScript type-check without emitting
yarn clean # rimraf dist
yarn lint # ESLint
yarn test -- <path-to-spec> # run a specific vitest spec file
yarn test -- "<glob-pattern>" # run vitest specs matching a glob
```
## Architecture
- `src/devServer.ts` — main entry; resolves framework/webpack config and starts Webpack Dev Server
- `src/index.ts` — public exports
- `src/createWebpackDevServer.ts` — constructs the webpack dev server instance with Cypress-specific config
- `src/makeWebpackConfig.ts` — builds the merged webpack configuration
- `src/makeDefaultWebpackConfig.ts` — base webpack config applied to all setups
- `src/CypressCTWebpackPlugin.ts` — custom webpack plugin for component testing
- `src/loader.ts` — custom webpack loader
- `src/aut-runner.ts` — browser-side AUT runner entry
- `src/browser.ts` — browser runtime utilities
- `src/constants.ts` — shared constants
- `src/helpers/` — framework-specific config helpers:
- `angularHandler.ts` — Angular webpack config integration
- `nextHandler.ts` — Next.js webpack config integration
- `sourceRelativeWebpackModules.ts` — resolves webpack modules relative to the user's project
## Gotchas / Notes
- Uses a "cypress-in-cypress" integration test approach (special env vars required; see `cypress:run` script).
- Webpack itself is a dev dependency only (`webpack: "npm:webpack@^5"`) — consumers supply their own webpack install via their project.
## Integration Points
- Works alongside component adapter packages (`@cypress/react`, `@cypress/vue`) which provide the `mount` function.
- Has specific handling for Angular and Next.js project structures in `src/helpers/`.
+3
View File
@@ -0,0 +1,3 @@
# @cypress/webpack-dev-server
@AGENTS.md
+27
View File
@@ -0,0 +1,27 @@
# @cypress/webpack-preprocessor
`@cypress/webpack-preprocessor` is a published npm package that provides a Cypress file preprocessor for bundling test files via Webpack 5. It is a low-level package that does not include any loaders or Babel plugins — consumers must configure webpack themselves.
## Key Commands
```sh
yarn build # rimraf dist + tsc; outputs to dist/
yarn check-ts # TypeScript type-check without emitting
yarn lint # ESLint
yarn test-unit -- <path-to-spec> # run a specific vitest unit spec file
yarn test-unit -- "<glob-pattern>" # run unit specs matching a glob
yarn test-e2e -- <path-to-spec> # run a specific vitest e2e spec file
```
## Architecture
- `lib/index.ts` (compiled to `dist/`) — main entry; exports the preprocessor factory function
- `test/unit/` — vitest unit tests
- `test/e2e/` — vitest e2e tests that exercise real webpack compilation
- `scripts/test-webpack-5.ts` — test runner script invoked by `yarn test`
## Gotchas / Notes
- Peer dependencies (`@babel/core`, `@babel/preset-env`, `babel-loader`, `webpack@^5`) must be installed in the consumer's project. This package deliberately ships without bundled loaders.
- For a batteries-included alternative with TypeScript and CoffeeScript support built-in, use `@cypress/webpack-batteries-included-preprocessor`.
- The `main` field points to `dist` (a directory), relying on Node's `index.js` resolution within it.
+3
View File
@@ -0,0 +1,3 @@
# @cypress/webpack-preprocessor
@AGENTS.md
+91
View File
@@ -0,0 +1,91 @@
# Packages Workspace
## Purpose
The `packages/` workspace contains all first-party Cypress packages that make up the Cypress monorepo. These packages are the implementation of the Cypress test runner, its tooling, and supporting infrastructure. Each package is a standalone npm package (scoped under `@packages/`) consumed by the Cypress binary build, by each other, and in some cases by the public.
## Package Map
### App & Frontend
- **@packages/app** — The main Vue 3 front-end application for the Cypress browser-side UI (specs list, Test Replay, runner toolbar, Studio).
- **@packages/launchpad** — Vue 3 Electron-rendered application shown when running `cypress open`; handles login, project selection, and configuration setup.
- **@packages/frontend-shared** — Shared Vue 3 components, TailwindCSS config, composables, and i18n strings consumed by both `app` and `launchpad`.
- **@packages/reporter** — The test result reporter UI (command log, test tree) rendered inside the runner iframe.
- **@packages/runner** — Legacy webpack bundler for `driver` and `reporter`; being phased out in favour of `app`.
### Test Runner & Driver
- **@packages/driver** — Core JavaScript library loaded inside the browser; executes Cypress commands and manages the test runtime.
- **@packages/extension** — Chrome/Firefox WebExtension that enables browser automation (v2 Manifest V2, v3 Manifest V3).
### Server & Network
- **@packages/server** — Node.js heart of Cypress: HTTP server, proxy orchestration, file watching, plugin execution, and IPC with the browser.
- **@packages/proxy** — HTTP interception proxy layer; applies middleware to requests and responses to enable stubbing, rewriting, and header injection.
- **@packages/net-stubbing** — Server-side implementation of `cy.intercept()`; route matching, request/response lifecycle, and driver event bridge.
- **@packages/network** — Node.js networking utilities: HTTP/HTTPS proxy-aware agents, CA certificate management, and connection helpers.
- **@packages/network-tools** — Isomorphic (browser + Node.js) low-level networking utilities: CORS helpers, URI parsing, domain utilities.
- **@packages/https-proxy** — Intercepts TLS connections by acting as a dynamic CA; generates per-hostname certificates on the fly using `node-forge`.
- **@packages/rewriter** — Rewrites JS and HTML at proxy time to inject Cypress instrumentation (e.g., `document.domain` injection, spec bridge).
### Configuration & Data
- **@packages/config** — Canonical Cypress configuration schema, option definitions, validation logic, and AST-based `cypress.config` file transforms.
- **@packages/data-context** — Centralized GraphQL data layer (Nexus schema) for the Cypress app; manages project state, Cloud queries, file watching, and actions.
- **@packages/scaffold-config** — Detects frameworks/bundlers in a user's project and scaffolds `cypress.config.js` and supporting files during onboarding.
### Desktop & Electron
- **@packages/electron** — Installs, packages, and manages the Electron binary that wraps Cypress; provides the `cypress-electron` CLI entrypoint.
- **@packages/launcher** — Detects installed browsers on macOS, Linux, and Windows and launches them with the correct flags and profile paths.
### Types, Errors & Utilities
- **@packages/types** — Shared TypeScript type definitions used across the entire monorepo.
- **@packages/errors** — Centralised error definitions, formatting utilities, and `errTemplate` tagged-template system for all Cypress error messages.
- **@packages/socket** — Thin shared wrapper around `socket.io` client and server instances used for browserserver IPC.
- **@packages/telemetry** — OpenTelemetry convenience wrapper for capturing performance spans and usage signals inside Cypress processes.
- **@packages/icons** — Cypress icon assets (SVG, PNG, ICO) and build scripts that produce browser-consumable image files.
- **@packages/stderr-filtering** — Utility for tagging and filtering noisy third-party stderr output into `debug` streams.
### Build & Snapshot Infrastructure
- **@packages/v8-snapshot-require** — Loads V8 heap snapshots created by `@tooling/v8-snapshot` to accelerate Electron startup time.
- **@packages/packherd-require** — Module loader for bundles produced by `@tooling/packherd`; also provides on-demand TypeScript transpilation with source-map support.
- **@packages/web-config** — Shared webpack/Vite configuration helpers for browser bundles inside the monorepo.
- **@packages/ts** — Standardises `ts-node` version and base `tsconfig` options for development-time TypeScript require hooks.
- **@packages/eslint-config** — Monorepo-wide ESLint flat-config with rules for TypeScript, Vue, React, Cypress tests, and imports.
- **@packages/resolve-dist** — Centralizes path resolution for compiled/static assets referenced from server-side code.
- **@packages/root** — Bundles the monorepo root `package.json` as an installable package so any package can reference root metadata without absolute paths.
- **@packages/runner** — (see App & Frontend above)
## Workspace Commands
```bash
# Run tests targeting a specific file (vitest packages)
yarn workspace @packages/<name> test -- <path-to-spec>
# Run tests targeting a specific file glob (vitest packages)
yarn workspace @packages/<name> test -- "<glob-pattern>"
# Build a specific package
yarn workspace @packages/<name> build
# Run lint for a specific package
yarn workspace @packages/<name> lint
# Type-check a specific package
yarn workspace @packages/<name> check-ts
# Run all package builds (from repo root)
yarn build
```
## Notes
- Most packages publish both CJS (`cjs/`) and ESM (`esm/`) builds; the `main` field points to CJS and `module` to ESM.
- `@packages/ts` provides require-time TypeScript transpilation during development so most packages do not need pre-built `.js` files to run tests locally.
- Many packages use `vitest` for unit tests; the front-end packages (`app`, `launchpad`, `frontend-shared`) use Cypress component tests and E2E tests (cypress-in-cypress pattern).
- The `nohoist` workspace option is set in `driver` and `frontend-shared` to prevent specific dependencies from being hoisted to the monorepo root.
- Packages that depend on generated GraphQL types (from `data-context`) must run `yarn build:graphql` before type-checking will pass.
+3
View File
@@ -0,0 +1,3 @@
# Packages
@AGENTS.md
+61
View File
@@ -0,0 +1,61 @@
# @packages/app
The main Vue 3 front-end for the Cypress browser-side UI. It renders the specs list, runner toolbar, Studio panel, test replay controls, and settings screens that appear inside the Cypress-controlled browser window during `cypress open`.
## Key Commands
```bash
# Build production assets
yarn workspace @packages/app build
# Open the app in cypress-in-cypress dev mode (run from repo root first with yarn watch)
yarn workspace @packages/app dev
# Run component tests against a specific file or glob
yarn workspace @packages/app cypress:run:ct -- --spec <path-to-spec>
# Run E2E tests against a specific spec
yarn workspace @packages/app cypress:run:e2e -- --spec <path-to-spec>
# Type-check
yarn workspace @packages/app check-ts
# Lint
yarn workspace @packages/app lint
```
## Architecture
```
src/
components/ General-purpose UI components used across the app
composables/ Vue composables (reactive state helpers)
debug/ Debug panel views
generated/ Auto-generated GraphQL fragment and query types
layouts/ Top-level Vue layout wrappers
navigation/ Sidebar and navigation components
pages/ Route-level page components (one per view)
prompt/ Prompt/dialog overlay components
router/ Vue Router configuration
runner/ AUT iframe container and runner toolbar components
runs/ Cypress Cloud runs list and run details views
settings/ Project and global settings views
specs/ Specs list, spec search, and spec creation UI
store/ Pinia stores for local UI state
studio/ Studio panel and code generation UI
```
## Gotchas / Notes
- The app uses Vite for building but is **not** started directly — run `yarn watch` from the **repo root**, which spawns the Gulp pipeline. The `start` and `watch` scripts in this package intentionally error out to enforce this.
- Tests use a **cypress-in-cypress** self-testing pattern: the app itself is the AUT, with `CYPRESS_INTERNAL_E2E_TESTING_SELF_PARENT_PROJECT=1` set to enable self-testing mode. The env var `INTERNAL_E2E_TESTING_SELF_PARENT_PROJECT` is passed via `--expose` to the child Cypress process.
- The `test` script is a no-op (`echo 'ok'`) — use `cypress:run:ct` or `cypress:run:e2e` directly.
- Module Federation (`@module-federation/runtime`) is used to load the runner and reporter bundles at runtime.
- `CYPRESS_SNAPSHOT_UPDATE=1` triggers mocha event snapshot updates during the dedicated snapshot E2E run.
## Integration Points
- Consumes **@packages/frontend-shared** for shared components, composables, and GraphQL fragment types.
- Consumes **@packages/data-context** for the GraphQL schema types (browser-side `src/index.ts` browser entry).
- Consumes **@packages/socket** for browser↔server real-time IPC.
- Consumed by **@packages/server** / **@packages/resolve-dist** which serves the built `dist/` assets to the browser.
+3
View File
@@ -0,0 +1,3 @@
# App
@AGENTS.md
+44
View File
@@ -0,0 +1,44 @@
# @packages/config
Contains the canonical Cypress configuration option definitions, validation logic, and AST-based utilities for reading and modifying `cypress.config` files. Used by `server`, `data-context`, and `driver` to resolve and validate user-provided configuration values.
## Key Commands
```bash
# Run a specific test file
yarn workspace @packages/config test -- <path-to-spec>
# Run tests matching a glob pattern
yarn workspace @packages/config test -- "<glob-pattern>"
# Build CJS and ESM outputs
yarn workspace @packages/config build
# Type-check
yarn workspace @packages/config check-ts
```
## Architecture
```
src/
ast-utils/ Babel-based helpers for reading and writing cypress.config source files
project/ Per-project configuration resolution (merges defaults, env, cli overrides)
browser.ts Browser-safe subset of config exports (ESM entry point)
index.ts Node.js entry point; re-exports all config utilities
options.ts Master list of every supported configuration option with types and defaults
utils.ts Shared utility functions
validation.ts Per-option validation functions used at runtime
```
## Gotchas / Notes
- Builds to both `cjs/` and `esm/` directories. The `browser` field in `package.json` points to the ESM build so bundlers targeting the browser get a tree-shakeable subset without Node.js-only imports.
- The `ast-utils/` directory uses Babel's parser and `recast` to perform lossless source transforms on config files (preserving comments and formatting).
- Tests use `vitest run` — no watch mode by default; use `test-debug` for breakpoint debugging with `--inspect-brk`.
## Integration Points
- Depended on by **@packages/server**, **@packages/data-context**, and **@packages/driver** for configuration schema and validation.
- Uses **@packages/errors** (dev dep) for error type definitions.
- Uses **@packages/network-tools** (dev dep) for URL/domain utilities used in validation.
+3
View File
@@ -0,0 +1,3 @@
# Config
@AGENTS.md
+57
View File
@@ -0,0 +1,57 @@
# @packages/data-context
Centralized GraphQL data layer for the Cypress application. It implements a Nexus schema (code-first GraphQL) that is the single source of truth for all application state — project configuration, Cloud data, file system events, browser list, and user actions — consumed by both `app` and `launchpad` via urql.
## Key Commands
```bash
# NOTE: Full suite is slow (hundreds of tests); always target a specific file or grep pattern
# Run a specific test file
yarn workspace @packages/data-context test -- <path-to-spec>
# Run tests matching a path pattern
yarn workspace @packages/data-context test -- --testPathPattern="<pattern>"
# Build: generate GraphQL schema + Nexus types
yarn workspace @packages/data-context build
# Rebuild only the GraphQL codegen (fragment/query types)
yarn workspace @packages/data-context build:graphql
# Type-check
yarn workspace @packages/data-context check-ts
```
## Architecture
```
src/
actions/ Mutation handlers (one file per domain: ProjectActions, AuthActions, etc.)
codegen/ Code generation helpers for scaffolding config and test files
data/ Data sources that wrap filesystem, Cloud API, and process state
gen/ Auto-generated Nexus type output (nxs.gen.ts) — do not edit by hand
polling/ Long-poll helpers for Cloud data (runs, recordings)
sources/ GraphQL query resolvers grouped by domain
util/ Shared utilities (error formatting, file helpers, etc.)
DataContext.ts Root class that wires together all actions and sources
DataActions.ts Aggregate of all action classes
graphql/
graphql-codegen.yml Codegen config (generates fragment/query types for consumers)
schemas/ JSON schema definitions
```
## Gotchas / Notes
- `src/gen/nxs.gen.ts` is auto-generated by `yarn nexus-build`. Never edit it manually; re-run `yarn workspace @packages/data-context build` to regenerate after schema changes.
- Tests run with `--experimental-vm-modules` because the test suite uses Jest with ES module support. The runner is Jest (not vitest) for this package.
- The `browser` field in `package.json` points to `src/index.ts` (source), which allows Vite-based consumers (`app`, `launchpad`, `frontend-shared`) to import TypeScript directly without a pre-build step.
- The GraphQL schema is built in two phases: (1) `build:schema` emits a JSON SDL, (2) `build:graphql` runs graphql-codegen against it for downstream consumers.
## Integration Points
- Consumed by **@packages/app**, **@packages/launchpad**, and **@packages/frontend-shared** as the GraphQL backend.
- Depends on **@packages/config** for configuration option resolution.
- Depends on **@packages/scaffold-config** for framework detection during onboarding.
- Depends on **@packages/socket** for real-time subscriptions.
- Depends on **@packages/telemetry** for OpenTelemetry spans around data operations.
+3
View File
@@ -0,0 +1,3 @@
# Data Context
@AGENTS.md
+50
View File
@@ -0,0 +1,50 @@
# @packages/driver
The core JavaScript library loaded inside the browser that is responsible for executing Cypress commands and managing the test runtime. It implements the `cy` object, all built-in commands (`cy.get`, `cy.click`, `cy.intercept`, etc.), the Mocha integration, and the AUT lifecycle.
## Key Commands
```bash
# NOTE: Full suite is slow (hundreds of tests); always target a specific file or grep pattern
# Run a specific vitest unit test file
yarn workspace @packages/driver test -- <path-to-spec>
# Run vitest tests matching a glob pattern
yarn workspace @packages/driver test -- "<glob-pattern>"
# Run driver E2E tests against a specific spec
yarn workspace @packages/driver cypress:run -- --spec <path-to-spec>
# Type-check
yarn workspace @packages/driver check-ts
```
## Architecture
```
src/
config/ Driver-level config helpers (reading resolved config inside the browser)
cross-origin/ Cross-origin iframe communication: spec bridge, postMessage protocol
cy/ Core cy object, command queue, stability waits, timeouts, chaining
cypress/ Top-level Cypress singleton, mocha integration, error handling
dom/ DOM utilities (selectors, traversal, visibility checks, screenshots)
util/ Shared browser utilities (events, timers, serialization helpers)
main.ts Bundle entry point
cypress.ts Public Cypress API surface
```
## Gotchas / Notes
- The driver is consumed by `@packages/runner` (webpack bundle) and ultimately served to the browser. It is **not** built in isolation; changes are picked up by running `yarn watch` from the repo root or `yarn workspace @packages/runner watch`.
- `workspaces.nohoist: ["*"]` is set so that all dependencies are installed locally inside `packages/driver/node_modules` rather than hoisted — this prevents version conflicts with browser-targeted packages.
- Cypress tests for the driver itself use a local Express server (spawned automatically in `e2e.setupNodeEvents`) rather than a manually started dev server.
- `postinstall` runs `patch-package` to apply local patches to dependencies.
- Cross-origin testing (`cy.origin`) relies on the `cross-origin/` spec bridge and a secondary `cypress.ts` bundle injected into cross-origin frames.
## Integration Points
- Runtime dependency of **@packages/runner** (bundled) and implicitly **@packages/app** (loaded via Module Federation).
- Uses **@packages/net-stubbing** for the browser-side `cy.intercept()` implementation.
- Uses **@packages/socket** for browser↔server real-time communication.
- Uses **@packages/errors** for consistent error formatting.
+3
View File
@@ -0,0 +1,3 @@
# Driver
@AGENTS.md
+50
View File
@@ -0,0 +1,50 @@
# @packages/electron
Installs, packages, and manages the Electron binary that powers Cypress. During development it uses symlinks so the local Electron shell matches the final compiled binary 1:1. Provides the `cypress-electron` CLI entrypoint used by the Cypress build pipeline.
## Key Commands
```bash
# Build TypeScript sources to dist/
yarn workspace @packages/electron build
# Download and install the Electron binary
yarn workspace @packages/electron build-binary
# Run a specific test file
yarn workspace @packages/electron test -- test/paths.spec.ts
# Run tests matching a glob pattern
yarn workspace @packages/electron test -- "test/**/*.spec.ts"
# Start Electron with the local app (development)
yarn workspace @packages/electron start
```
## Architecture
```
src/
electron.ts Electron process bootstrap (BrowserWindow setup, IPC handlers)
index.ts Public API entry: exposes open(), install(), and paths()
install.ts Downloads and installs the Electron binary via @electron/packager
open.ts Opens Electron with the Cypress app loaded
paths.ts Resolves paths to the Electron binary and resources
print-node-version.ts Utility to print Node.js version bundled in Electron
app/
index.js Minimal Electron `main` process entry injected into the packaged app
bin/
cypress-electron CLI script: delegates to install or open based on arguments
```
## Gotchas / Notes
- After `yarn install`, this package requires an explicit `yarn build` before it is usable — the `postinstall` script prints a reminder but does not build automatically.
- The `build:esm` target exists but is not part of the default `build` target for daily use; it is available for testing ESM compatibility.
- `@electron/fuses` is used to set Electron security fuses (e.g., disabling Node.js integration in renderers) during binary packaging.
## Integration Points
- Depends on **@packages/icons** for the application icon assets used when packaging the binary.
- Depends on **@packages/stderr-filtering** to suppress noisy Electron stderr output during tests.
- Consumed by the Cypress binary build pipeline and by **@packages/server** which spawns the Electron process.
+3
View File
@@ -0,0 +1,3 @@
# Electron
@AGENTS.md
+44
View File
@@ -0,0 +1,44 @@
# @packages/errors
Centralised error definitions and formatting utilities for the entire Cypress codebase. Provides the `errTemplate` tagged-template system for authoring structured, ANSI-colored error messages, and exports all named Cypress error types consumed by `server`, `driver`, `data-context`, and other packages.
## Key Commands
```bash
# Run a specific test file
yarn workspace @packages/errors test -- test/errors.spec.ts
# Run tests matching a glob pattern
yarn workspace @packages/errors test -- "test/**/*.spec.ts"
# Build CJS and ESM outputs
yarn workspace @packages/errors build
# Type-check
yarn workspace @packages/errors check-ts
```
## Architecture
```
src/
errors.ts All named Cypress error definitions (one export per error type)
errorTypes.ts TypeScript enum/union of every error name
errorUtils.ts Utilities: stack trace manipulation, error wrapping helpers
errTemplate.ts Tagged template literal system for constructing formatted errors
normalizeNetworkErrorMessage.ts Maps network error codes to human-readable messages
stackUtils.ts Stack frame filtering and formatting
stripIndent.ts Template literal helper to remove leading indentation
index.ts Public entry point re-exporting everything
```
## Gotchas / Notes
- Builds to both `cjs/` and `esm/` directories. The `browser` field in `package.json` points to the ESM build, making it safe to import in browser bundles.
- See `guides/error-handling.md` at the repo root for the full authoring guide on how to add new errors.
- `errTemplate` uses `chalk` for ANSI coloring in Node.js and `ansi_up` for converting ANSI to HTML in browser contexts — do not import Node.js-only APIs inside error definitions.
## Integration Points
- Imported by nearly every other package in the monorepo; changes here have broad impact.
- Consumed by **@packages/server**, **@packages/driver**, **@packages/data-context**, **@packages/config**, and others for all user-facing error messages.
+3
View File
@@ -0,0 +1,3 @@
# Errors
@AGENTS.md
+26
View File
@@ -0,0 +1,26 @@
# @packages/eslint-config
A monorepo-wide ESLint flat-config package providing standardised linting rules across JavaScript, TypeScript, React, Vue, and Cypress test files. Consumed by most other packages in the `packages/` workspace as their ESLint configuration base.
## Key Commands
```bash
# Lint the package itself
yarn workspace @packages/eslint-config lint
```
## Architecture
```
src/
baseConfig.ts Core flat-config with TypeScript, import, and stylistic rules
cliOverrides.ts Overrides applied for CLI/Node.js contexts
index.ts Main entry: composes and exports the full flat-config array
```
## Gotchas / Notes
- Uses ESLint v9 **flat config** format (`eslint.config.*`). Packages consuming this config must also be on ESLint v9+.
- The package uses `jiti` as a peer runtime so ESLint can load the TypeScript config files without a pre-build step.
- There is no `test` script — the config is validated implicitly by running `lint` across consumer packages.
- Targets ESLint v9.31+ as a peer dependency; earlier ESLint versions are incompatible with the flat-config API used here.
+3
View File
@@ -0,0 +1,3 @@
# ESLint Config
@AGENTS.md
+29
View File
@@ -0,0 +1,29 @@
This package copies e2e spec files and app content from the external `cypress-example-kitchensink` npm package into the Cypress repository, where the specs are used to scaffold new user projects and the app is published to `https://example.cypress.io`.
**Key Commands**
```bash
# Copy kitchensink specs and app into this package
yarn workspace @packages/example build
# Deploy app content to GitHub Pages (production!)
yarn workspace @packages/example deploy
```
**Architecture**
- `cypress/` — Example e2e spec files copied from `cypress-example-kitchensink` (do not edit here)
- `lib/` — Supporting JS for the build/copy process
- `gulpfile.js` — Gulp tasks that drive the copy and asset-revision steps
- `cypress.config.js` — Cypress config for running the example specs
**Gotchas / Notes**
- Do not edit any files in `cypress/` or `app/` directly. All changes must be made in the upstream [`cypress-example-kitchensink`](https://github.com/cypress-io/cypress-example-kitchensink) repository and then pulled in by bumping the `devDependency` version and re-running `build`.
- Running `deploy` publishes directly to the GitHub Pages production site; verify the `./build` directory first.
- The `cypress/` and `app/` directories are outputs of the build step and must be committed after a kitchensink version bump.
- To update the example content: bump `cypress-example-kitchensink` in `package.json`, run `yarn` and `yarn workspace @packages/example build`, then open a PR.
**Auto-Generated Files**
- `cypress/` and `app/` — Copied from `cypress-example-kitchensink` by the `build` script; do not edit by hand.
+3
View File
@@ -0,0 +1,3 @@
# Example
@AGENTS.md
+50
View File
@@ -0,0 +1,50 @@
# @packages/extension
The WebExtension loaded by Chrome and Firefox during Cypress test runs. It automates the browser at the extension level — handling new-tab interception and communicating back to the Cypress server via `socket.io`. Supports both Manifest V2 (`app/v2/`) and Manifest V3 (`app/v3/`).
## Key Commands
```bash
# Build both V2 and V3 extension bundles
yarn workspace @packages/extension build
# Run a specific test file
yarn workspace @packages/extension test -- <path-to-spec>
# Run tests matching a glob pattern
yarn workspace @packages/extension test -- "<glob-pattern>"
# Type-check
yarn workspace @packages/extension check-ts
```
## Architecture
```
app/
v2/
background.ts MV2 background page: socket connection, tab management
client.ts Content script injected into pages
init.ts Extension initialisation logic
manifest.json MV2 manifest
v3/
content.ts Content script for MV3
service-worker.ts MV3 service worker replacing the background page
manifest.json MV3 manifest
newtab.html / popup.html Extension UI pages
lib-dist/ Compiled TypeScript library code (published)
app-dist/ Compiled extension bundles (published)
theme/ Extension icon and popup theme assets
```
## Gotchas / Notes
- Like `@packages/electron`, this package requires `yarn build` after install — the `postinstall` script only prints a reminder.
- The V2 bundle is produced by `webpack-cli` and the V3 bundle by `tsc` directly; the main `build` gulp task orchestrates both.
- The `nx.implicitDependencies` declares `@packages/server` and `@packages/socket` — changes to either of those trigger a rebuild of the extension in CI.
## Integration Points
- Depends on **@packages/socket** at runtime for browser↔server communication.
- Depends on **@packages/icons** for extension icon assets.
- Consumed by **@packages/server** which injects the built extension into browser launch arguments.
+3
View File
@@ -0,0 +1,3 @@
# Extension
@AGENTS.md
+54
View File
@@ -0,0 +1,54 @@
# @packages/frontend-shared
Shared Vue 3 component library, TailwindCSS configuration, composables, GraphQL fragments, and i18n strings consumed by both `@packages/app` (browser-side UI) and `@packages/launchpad` (Electron-rendered UI). Any component or utility intended to appear identically in both apps belongs here.
## Key Commands
```bash
# Build the shared library
yarn workspace @packages/frontend-shared build
# Run component tests against a specific file or glob
yarn workspace @packages/frontend-shared cypress:run:ct -- --spec <path-to-spec>
yarn workspace @packages/frontend-shared cypress:run:ct -- --spec "<glob-pattern>"
# Generate the Shiki syntax highlighting theme
yarn workspace @packages/frontend-shared generate-shiki-theme
# Type-check
yarn workspace @packages/frontend-shared check-ts
# Lint
yarn workspace @packages/frontend-shared lint
```
## Architecture
```
src/
assets/ Static assets (images, fonts) shared between apps
components/ Base and higher-level Vue 3 components (inputs, cards, modals, header, etc.)
composables/ Shared Vue composables (e.g., useExternalLink, useGraphQLClient)
generated/ Auto-generated files: GraphQL schema snapshot used in tests
gql-components/ Components that are tightly coupled to specific GraphQL queries/fragments
graphql/ urql exchanges, GraphQL client setup, and fragment definitions
locales/ i18n JSON translation files
public/ Static public assets served during development
shiki/ Syntax highlighting theme and language definitions
store/ Shared Pinia stores
styles/ Global CSS and Tailwind base styles
utils/ Shared utility functions
warning/ Warning/deprecation notification components
```
## Gotchas / Notes
- There are **no E2E tests** in this package — only component tests. E2E coverage comes from `app` and `launchpad` which consume these components.
- The `build` target depends on `generate-shiki-theme` (declared in `nx.targets`) — run that first if the generated theme file is missing.
- `patch-package` is applied via `postinstall` to patch a local dependency; it is nohoisted to prevent conflicts.
- The `generated/schema-for-tests.gen.json` is an nx output artifact and must exist before component tests can run type-checking correctly.
## Integration Points
- Depends on **@packages/data-context** (implicit nx dependency) — the GraphQL schema types are generated from data-context's Nexus build.
- Consumed by **@packages/app** and **@packages/launchpad** as a library; both import Vue components and composables directly from `src/`.
+3
View File
@@ -0,0 +1,3 @@
# Frontend Shared
@AGENTS.md
+45
View File
@@ -0,0 +1,45 @@
# @packages/https-proxy
Acts as a dynamic TLS certificate authority so Cypress can intercept and inspect HTTPS traffic. It generates per-hostname certificates on the fly using `node-forge`, enabling the proxy to decrypt, modify, and re-encrypt bytes flowing between the browser and any HTTPS origin.
## Key Commands
```bash
# Run a specific test file (single-file parallelism disabled — see Gotchas)
yarn workspace @packages/https-proxy test -- test/unit/ca.spec.ts
# Run tests matching a glob pattern
yarn workspace @packages/https-proxy test -- "test/unit/**/*.spec.ts"
# Build CJS and ESM outputs
yarn workspace @packages/https-proxy build
# Regenerate test CA certificates
yarn workspace @packages/https-proxy regenerate:certs
# Type-check
yarn workspace @packages/https-proxy check-ts
```
## Architecture
```
lib/
ca.ts Certificate Authority: generates and caches per-hostname TLS certificates
index.ts Public entry point: creates and starts the proxy server
proxy.ts CONNECT-tunnel handler: intercepts TLS handshakes and injects CA cert
server.ts HTTP server wrapper used during testing
util/
parse.ts Parses CONNECT request hostnames and ports
```
## Gotchas / Notes
- `proxy.spec.ts` and `server.spec.ts` cannot run in parallel because both bind to overlapping ports. The `test-unit` script uses `vitest run` without `--pool=forks`; the `test-debug` script explicitly passes `--no-file-parallelism`.
- Test helper certificates live in `test/helpers/certs/`. Regenerate them with `regenerate:certs` (requires OpenSSL in `$PATH`) when they expire or when the CA key needs to rotate.
- The `semaphore` package throttles concurrent certificate generation to avoid race conditions under high load.
## Integration Points
- Consumed by **@packages/proxy** and **@packages/server** which instantiate the HTTPS proxy server as part of the Cypress HTTP interception pipeline.
- Depends on **@packages/network** (dev dep) for HTTP agent utilities used in integration tests.
+3
View File
@@ -0,0 +1,3 @@
# HTTPS Proxy
@AGENTS.md
+43
View File
@@ -0,0 +1,43 @@
# @packages/icons
Cypress icon and image assets — application icons, favicons, and the Cypress logo — along with build scripts that produce browser-consumable and OS-native image files (SVG, PNG, ICO). Consumed by packages that need to embed Cypress branding in UI or in packaged binaries.
## Key Commands
```bash
# Build all icon assets (runs build-assets, cjs, and esm targets)
yarn workspace @packages/icons build
# Run a specific test file
yarn workspace @packages/icons test -- test/icons.spec.ts
# Run tests matching a glob pattern
yarn workspace @packages/icons test -- "test/**/*.spec.ts"
```
## Architecture
```
assets/
cypress.iconset/ macOS iconset (multiple resolutions) for the Dock icon
favicon/ Web favicon assets
icons/ SVG and PNG source icons
logo/ Cypress wordmark and logomark assets
scripts/
build.ts Converts SVGs/PNGs to browser-ready dist files (uses tsx)
ico.ts Converts PNGs to Windows .ico format (uses to-ico)
dist/ Compiled output: browser-ready icon files
index.ts Public entry: exports resolved paths to each icon asset
index.d.ts TypeScript declarations for the icon path exports
```
## Gotchas / Notes
- The `build-assets` step must complete before `build:cjs` / `build:esm` because the TypeScript sources reference files that are generated into `dist/` during the asset build.
- There is no `README.md` in this package — the `readme.md` file visible at the package root is the icons package's own readme (lowercase filename).
- Icons are published as resolved file paths (not inlined data URIs), so consumers receive the path and must serve or bundle the files themselves.
## Integration Points
- Consumed by **@packages/electron** for the application Dock/taskbar icon when packaging the binary.
- Consumed by **@packages/extension** for the browser extension icon and popup theme.
+3
View File
@@ -0,0 +1,3 @@
# Icons
@AGENTS.md
+46
View File
@@ -0,0 +1,46 @@
# @packages/launcher
Finds and launches browsers for each operating system. It detects installed browsers (Chrome, Firefox, Edge, Webkit, Electron, and others) on macOS, Linux, and Windows, and launches them with the correct flags and profile directories for Cypress test runs.
## Key Commands
```bash
# Run a specific test file
yarn workspace @packages/launcher test -- test/unit/detect.spec.ts
# Run tests matching a glob pattern
yarn workspace @packages/launcher test -- "test/unit/**/*.spec.ts"
# Build production JavaScript (tsc)
yarn workspace @packages/launcher build-prod
# Type-check
yarn workspace @packages/launcher check-ts
```
## Architecture
```
lib/
browsers.ts Master list of known browser definitions (names, family, version regexes)
detect.ts Platform-aware browser detection (delegates to darwin/linux/windows)
errors.ts Launcher-specific error definitions
known-browsers.ts Static registry of all browsers Cypress knows about
types.ts TypeScript types: FoundBrowser, Browser, LaunchOptions, etc.
utils.ts Shared helper functions
darwin/ macOS detection: reads app bundles, plist files, and spotlight
linux/ Linux detection: searches common install paths and PATH entries
windows/ Windows detection: reads registry and known install locations
```
## Gotchas / Notes
- This package does **not** have a pre-built output in the repo; `build-prod` is run by the binary build pipeline. During development, `@packages/ts` provides require-time transpilation.
- `mock-fs` is used in unit tests to simulate filesystem layouts for each OS without needing real browser installs.
- `win-version-info` reads Windows PE (Portable Executable) file headers to extract browser version strings from `.exe` files.
- The `nx.implicitDependencies` on `@packages/data-context` means that changes to data-context trigger launcher rebuilds in CI, because data-context exposes browser state to the GraphQL layer.
## Integration Points
- Consumed by **@packages/server** to enumerate browsers and launch them during `cypress open` and `cypress run`.
- Consumed by **@packages/data-context** which surfaces the browser list through the GraphQL API to the front-end.
+3
View File
@@ -0,0 +1,3 @@
# Launcher
@AGENTS.md
+55
View File
@@ -0,0 +1,55 @@
# @packages/launchpad
The Vue 3 application rendered by Electron when a user runs `cypress open`. It is the visual Cypress desktop UI responsible for login, project selection, global and project settings, browser selection, onboarding (scaffolding `cypress.config.js`, installing dependencies), and initiating test runs.
## Key Commands
```bash
# Build production assets
yarn workspace @packages/launchpad build
# Open launchpad in cypress-in-cypress dev mode (run yarn watch from repo root first)
yarn workspace @packages/launchpad dev
# Run component tests against a specific file or glob
yarn workspace @packages/launchpad cypress:run:ct -- --spec <path-to-spec>
# Run E2E tests against a specific spec
yarn workspace @packages/launchpad cypress:run:e2e -- --spec <path-to-spec>
# Type-check
yarn workspace @packages/launchpad check-ts
# Lint
yarn workspace @packages/launchpad lint
```
## Architecture
```
src/
components/ Launchpad-specific Vue components (project picker, browser selector, etc.)
generated/ Auto-generated GraphQL query and fragment types
global/ App-wide utilities (error boundary, global styles)
images/ Launchpad illustration assets
setup/ Onboarding wizard steps (framework detection, config scaffolding, etc.)
warning/ Deprecation and compatibility warning views
welcome/ Welcome screen and initial project creation flow
App.vue Root application component
main.ts Vite entry point
Main.vue Top-level layout with router-view
```
## Gotchas / Notes
- Like `@packages/app`, `start` and `watch` scripts intentionally error — always run from the repo root with `yarn watch`.
- Tests use the **cypress-in-cypress** self-testing pattern (same `CYPRESS_INTERNAL_E2E_TESTING_SELF_PARENT_PROJECT=1` env var as `app`).
- The `test` script runs component tests only (`cypress:run:ct`). E2E system tests live in `@tooling/system-tests`.
- `nx.implicitDependencies` on `@packages/frontend-shared` and `@packages/data-context` means any change in those packages invalidates the launchpad build cache.
## Integration Points
- Depends on **@packages/frontend-shared** for shared Vue components, composables, and TailwindCSS config.
- Depends on **@packages/data-context** for the GraphQL backend (project state, Cloud data, onboarding actions).
- Depends on **@packages/scaffold-config** for framework detection and config file generation during onboarding.
- Consumed by **@packages/electron** which loads the built `dist/` as the Electron renderer.
+3
View File
@@ -0,0 +1,3 @@
# Launchpad
@AGENTS.md
+42
View File
@@ -0,0 +1,42 @@
This package contains the server-side code and shared type definitions for Cypress's network stubbing feature (`cy.intercept()`). The corresponding driver-side (browser) code lives in `@packages/driver`.
**Key Commands**
```bash
# Build TypeScript to JS
yarn workspace @packages/net-stubbing build-prod
# Run a specific test file
yarn workspace @packages/net-stubbing test -- <path-to-spec>
# Run tests matching a glob pattern
yarn workspace @packages/net-stubbing test -- "<glob-pattern>"
# Type-check
yarn workspace @packages/net-stubbing check-ts
```
**Architecture**
- `lib/server/` — Server-side interception logic
- `index.ts` — Entry point; registers the net-stubbing plugin with the proxy
- `route-matching.ts` — Matches incoming requests against registered routes
- `intercepted-request.ts` — Represents a request currently being intercepted
- `driver-events.ts` — Handles events from the driver (browser) to the server
- `state.ts` — Manages the server-side route and handler state
- `util.ts`, `types.ts` — Server-specific utilities and types
- `lib/external-types.ts` — Public TypeScript types for users (e.g., `RouteMatcherOptions`, `StaticResponse`)
- `lib/internal-types.ts` — Internal protocol types shared between server and driver
- `lib/types.ts` — Re-exports and combined type definitions
- `lib/util.ts` — Shared utility functions
**Gotchas / Notes**
- Do not build `.js` files manually during development; `@packages/ts` provides require-time transpilation.
- End-to-end behavioral tests live in `@packages/driver` (`net_stubbing_spec`), not in this package's `test/` directory.
- The `lib/server/` entry point is what gets imported by `@packages/server`; the browser side is in `@packages/driver`.
**Integration Points**
- Loaded by `@packages/proxy` via `@packages/server` to intercept requests matching registered routes.
- Communicates with `@packages/driver` over `@packages/socket` to exchange route registrations and response stubs.
+3
View File
@@ -0,0 +1,3 @@
# Net Stubbing
@AGENTS.md
+43
View File
@@ -0,0 +1,43 @@
# @packages/network-tools
Isomorphic (browser and Node.js) low-level networking utilities. Provides CORS helpers, URI parsing, domain utilities, and `document.domain` injection logic that must run in both the browser-side driver and the server-side proxy without Node.js-specific APIs.
## Key Commands
```bash
# Run a specific test file
yarn workspace @packages/network-tools test -- <path-to-spec>
# Run tests matching a glob pattern
yarn workspace @packages/network-tools test -- "<glob-pattern>"
# Build CJS and ESM outputs
yarn workspace @packages/network-tools build
# Type-check
yarn workspace @packages/network-tools check-ts
```
## Architecture
```
lib/
accept-encoding.ts Parses and normalizes Accept-Encoding header values
cors.ts CORS utilities: origin comparison, header manipulation
document-domain-injection.ts Helpers for injecting document.domain overrides via the spec bridge
index.ts Public entry point re-exporting all modules
types.ts Shared TypeScript types
uri.ts URI parsing, normalization, and same-origin comparison helpers
```
## Gotchas / Notes
- This package must remain isomorphic — do not import Node.js built-ins (`fs`, `net`, `tls`, etc.) here. For Node.js-only networking, use **@packages/network**.
- Builds to both `cjs/` and `esm/`; the ESM build is consumed by browser-bundled packages.
- Uses `@cypress/parse-domain` for domain parsing, which handles edge cases like public-suffix-aware eTLD+1 extraction.
## Integration Points
- Consumed by **@packages/driver** (browser) for CORS and URI utilities used in command implementations.
- Consumed by **@packages/rewriter** and **@packages/proxy** (Node.js) for the same CORS and URI logic on the server side.
- Consumed by **@packages/config** for URL/domain validation.
+3
View File
@@ -0,0 +1,3 @@
# Network Tools
@AGENTS.md
+45
View File
@@ -0,0 +1,45 @@
# @packages/network
Node.js-only networking utilities used throughout the Cypress server-side stack. Provides a proxy-aware HTTP/HTTPS agent, CA certificate management, connection helpers, and utilities for blocked hosts and client certificate handling.
## Key Commands
```bash
# Run a specific test file
yarn workspace @packages/network test -- <path-to-spec>
# Run tests matching a glob pattern
yarn workspace @packages/network test -- "<glob-pattern>"
# Build CJS and ESM outputs
yarn workspace @packages/network build
# Type-check
yarn workspace @packages/network check-ts
```
## Architecture
```
lib/
agent.ts HTTP/HTTPS proxy-aware agent with keepalive support (uses node-forge for TLS)
allow-destroy.ts Wraps net.Server to add a .destroy() method that closes active sockets
blocked.ts Checks whether a URL is blocked by the Cypress blocklist config
ca.ts CA certificate loading and trust store management
client-certificates.ts Manages per-origin client TLS certificate configuration
concat-stream.ts Re-exports concat-stream for use in the proxy pipeline
connect.ts HTTP CONNECT tunnel helpers
http-utils.ts HTTP response/request utilities (header manipulation, stream helpers)
index.ts Public entry point re-exporting all modules
```
## Gotchas / Notes
- This package is **Node.js only** — it imports `node-forge`, `fs-extra`, and other Node.js APIs directly. For isomorphic networking utilities (browser + Node.js), use **@packages/network-tools** instead.
- Builds to both `cjs/` and `esm/`; the `module` field points to the ESM build for modern bundlers.
- Tests use `vitest run`; the `test-debug` script enables `--inspect-brk` for breakpoint debugging.
## Integration Points
- Consumed by **@packages/server**, **@packages/proxy**, **@packages/https-proxy**, and **@packages/rewriter** for all Node.js HTTP networking.
- **@packages/network-tools** depends on this package (dev dep) in its test suite.
+3
View File
@@ -0,0 +1,3 @@
# Network
@AGENTS.md
+43
View File
@@ -0,0 +1,43 @@
# @packages/packherd-require
Module loader for bundles produced by `@tooling/packherd`. Also provides on-demand TypeScript transpilation with source-map support so that TypeScript modules can be required at runtime without a pre-build step — used internally by `@packages/ts` during development.
## Key Commands
```bash
# Run a specific test file
yarn workspace @packages/packherd-require test -- <path-to-spec>
# Run tests matching a glob pattern
yarn workspace @packages/packherd-require test -- "<glob-pattern>"
# Build TypeScript to dist/
yarn workspace @packages/packherd-require build
# Type-check
yarn workspace @packages/packherd-require check-ts
```
## Architecture
```
src/
default-transpile-cache.ts Default file-system cache implementation for transpiled TypeScript output
loader.ts Core module loader: resolves bundled modules from packherd snapshots
require.ts Main entry: custom require hook that intercepts module resolution
sourcemap-support.ts Installs source-map support so stack traces reference .ts files
transpile-ts.ts On-demand TypeScript → JavaScript transpilation (using esbuild)
types.ts TypeScript types for the loader API
```
## Gotchas / Notes
- The `main` field points to `dist/require.js` (compiled), but `types` points to `src/require.ts` (source). The compiled output must exist before other packages that depend on this can load it — `yarn build` is required after install.
- Transpile cache is written to disk by default; the cache location can be overridden via environment variables documented in the package README.
- Source-map support is installed process-wide when the require hook is activated — this affects all subsequent `Error.stack` output in the same Node.js process.
- `esbuild` is used (not `tsc`) for fast on-demand transpilation; some TypeScript features that require type information (e.g., `const enum`) may not be fully supported.
## Integration Points
- Used by **@packages/ts** as the runtime TypeScript require hook for development-mode transpilation across the monorepo.
- Pairs with **@packages/v8-snapshot-require** and `@tooling/v8-snapshot` / `@tooling/packherd` for production snapshot-based module loading in Electron.
+3
View File
@@ -0,0 +1,3 @@
# Packherd Require
@AGENTS.md
+41
View File
@@ -0,0 +1,41 @@
This package implements Cypress's HTTP interception proxy. It sits between the browser and the network, intercepting every request and response to enable test assertions, stubbing, and rewriting.
**Key Commands**
```bash
# Build TypeScript to JS
yarn workspace @packages/proxy build-prod
# Run a specific test file
yarn workspace @packages/proxy test -- <path-to-spec>
# Run tests matching a glob pattern
yarn workspace @packages/proxy test -- "<glob-pattern>"
# Type-check without emitting
yarn workspace @packages/proxy check-ts
```
**Architecture**
- `lib/http/` — Core middleware pipeline for request/response interception
- `request-middleware.ts` — Manipulates outgoing HTTP requests from the browser
- `response-middleware.ts` — Manipulates HTTP responses before they reach the browser
- `error-middleware.ts` — Handles errors occurring in the request/response cycle
- `lib/network-proxy.ts` — Top-level proxy orchestration class
- `lib/resourceTypeAndCredentialManager.ts` — Tracks resource types and credentials per request
- `lib/types.ts` — Shared TypeScript types for the proxy layer
**Gotchas / Notes**
- Do not build `.js` files manually during development; `@packages/ts` handles require-time transpilation.
- High-level debug logs: `DEBUG=cypress:proxy:*`
- Detailed per-request logs: `DEBUG=cypress-verbose:proxy:http`
- Integration tests live in `@packages/server`, not only in this package's `test/` directory.
**Integration Points**
- Used by `@packages/server` as the core HTTP interception layer.
- Depends on `@packages/rewriter` to transform JS/HTML response bodies.
- Depends on `@packages/net-stubbing` for `cy.intercept()` route matching.
- Depends on `@packages/socket` for real-time communication with the browser.
+3
View File
@@ -0,0 +1,3 @@
# Proxy
@AGENTS.md
+42
View File
@@ -0,0 +1,42 @@
The reporter is the in-browser UI panel that displays running test results, including pass/fail/pending stats, total duration, a command log with suites/tests/hooks/assertions, and controls for auto-scrolling and run state.
**Key Commands**
```bash
# Build for local testing (webpack bundle)
yarn workspace @packages/reporter build-for-tests
# Run Cypress component tests against a specific spec
yarn workspace @packages/reporter cypress:run:ct -- --spec <path-to-spec>
# Run Cypress component tests matching a glob
yarn workspace @packages/reporter cypress:run:ct -- --spec "<glob-pattern>"
```
**Architecture**
- `src/` — All React/MobX source code
- `src/commands/` — Command log item rendering and command model
- `src/runnables/` — Suite, test, and runnable tree rendering and store
- `src/attempts/` — Retry attempt rendering
- `src/hooks/` — Hook (before/after) rendering and model
- `src/header/` — Stats bar, controls, and run state header
- `src/errors/` — Error display with code frames and stack traces
- `src/sessions/` — Session display and model
- `src/studio/` — Studio test recording UI components
- `src/agents/`, `src/routes/`, `src/instruments/` — Network stub and spy display
- `src/lib/` — Shared utilities, state, events, and scroll management
- `src/main.tsx` — Entry point (browser field in package.json)
**Gotchas / Notes**
- The reporter has no standalone build command; it is bundled via `@packages/runner`'s webpack build. Run `yarn workspace @packages/runner watch` to pick up reporter changes in the live app.
- Tests have moved from `cypress/integration` to component tests (`*.cy.tsx` files colocated in `src/`).
- The reporter uses MobX for state management — models in `src/runnables/`, `src/commands/`, etc. are observable.
- The `browser` field in `package.json` points to `src/main.tsx`, meaning this package is consumed as a browser bundle, not a Node module.
**Integration Points**
- Bundled into `@packages/runner` via webpack; changes here require rebuilding `@packages/runner`.
- Consumes types from `@packages/types` and UI components from `@packages/frontend-shared` and `@packages/app`.
- Driver events flow from `@packages/driver` into the reporter's event bus (`src/lib/events.ts`).
+3
View File
@@ -0,0 +1,3 @@
# Reporter
@AGENTS.md
+31
View File
@@ -0,0 +1,31 @@
This package centralizes resolution of file-system paths to compiled and static assets for use in server-side Node.js code, so that scattered path logic across packages can be kept in one place.
**Key Commands**
```bash
# Build both CJS and ESM outputs
yarn workspace @packages/resolve-dist build
# Build only CommonJS output
yarn workspace @packages/resolve-dist build:cjs
# Build only ESM output
yarn workspace @packages/resolve-dist build:esm
# Remove build artifacts
yarn workspace @packages/resolve-dist clean
```
**Architecture**
- `src/` — TypeScript source (compiled to `cjs/` and `esm/`)
- The package exports a single index that provides path-resolution helpers used by the server to locate bundled frontend assets at runtime.
**Gotchas / Notes**
- Only the CJS build (`cjs/`) is used in production; the ESM build is compiled but intentionally not included in the binary to keep binary size down.
- There are no tests in this package.
**Auto-Generated Files**
- `cjs/` and `esm/` — Generated by `tsc`; do not edit by hand.
+3
View File
@@ -0,0 +1,3 @@
# Resolve Dist
@AGENTS.md
+36
View File
@@ -0,0 +1,36 @@
This package rewrites JavaScript and HTML content flowing through the Cypress proxy, enabling features such as source map support, URL rewriting, and instrumentation injection.
**Key Commands**
```bash
# Build TypeScript to JS
yarn workspace @packages/rewriter build-prod
# Run a specific test file
yarn workspace @packages/rewriter test -- test/unit/js.spec.ts
# Run tests matching a glob pattern
yarn workspace @packages/rewriter test -- "test/unit/**/*.spec.ts"
# Type-check without emitting
yarn workspace @packages/rewriter check-ts
```
**Architecture**
- `lib/js.ts` — JavaScript AST rewriting logic using `recast`
- `lib/js-rules.ts` — Rules applied to JS ASTs during rewriting
- `lib/html.ts` — HTML rewriting using `parse5-html-rewriting-stream`
- `lib/html-rules.ts` — Rules applied to HTML nodes during rewriting
- `lib/async-rewriters.ts` — Async wrappers that coordinate rewriting pipelines
- `lib/deferred-source-map-cache.ts` — Caching layer for deferred source map generation
**Gotchas / Notes**
- Do not build `.js` files manually during development; `@packages/ts` provides require-time transpilation.
- `parse5-html-rewriting-stream` is nohoisted in workspaces to avoid version conflicts.
- Integration tests for the rewriter are also present in `@packages/server` and `@packages/proxy`.
**Integration Points**
- Called by `@packages/proxy`'s response middleware to transform response bodies before they reach the browser.
+3
View File
@@ -0,0 +1,3 @@
# Rewriter
@AGENTS.md
+30
View File
@@ -0,0 +1,30 @@
This package bundles the monorepo root `package.json` as an installable package so that any package in the monorepo (or installed inside `node_modules`) can import it without relying on an absolute path to the repository root.
**Key Commands**
```bash
# Build both CJS (index.js) and ESM (index.mjs) outputs
yarn workspace @packages/root build
# Build only CommonJS
yarn workspace @packages/root build:cjs
# Build only ESM
yarn workspace @packages/root build:esm
```
**Architecture**
- `index.ts` — Source that re-exports the root `package.json`
- `rollup.config.mjs` — Rollup config used to produce both CJS and ESM bundles
- `index.js` — Generated CJS bundle (do not edit)
- `index.mjs` — Generated ESM bundle (do not edit)
**Gotchas / Notes**
- There is no file watcher for this package. If the root `package.json` changes you must manually re-run `yarn workspace @packages/root build`.
- Packages using Vite/ESM import `index.mjs`; CommonJS consumers use `index.js`.
**Auto-Generated Files**
- `index.js` and `index.mjs` — Generated by rollup; do not edit by hand.
+3
View File
@@ -0,0 +1,3 @@
# Root
@AGENTS.md
+36
View File
@@ -0,0 +1,36 @@
The runner is a legacy webpack bundle that packages `@packages/reporter` and `@packages/driver` for use inside the Cypress test iframe. It is being progressively deprecated in favor of `@packages/app`, but still owns the production `cypress_runner.js` bundle and runner-level styles.
**Key Commands**
```bash
# Build the webpack bundle (development)
yarn workspace @packages/runner build
# Build for production (minified)
yarn workspace @packages/runner build-prod
```
**Architecture**
- `src/main.jsx` — Entry point; assembles reporter and driver into the runner iframe
- `src/cross-origin.js` — Handles cross-origin iframe communication
- `src/main.scss` — Runner-level styles (including legacy Cypress styles)
- `unified-runner.tsx` — Unified runner entry used in some Cypress app contexts
- `webpack.config.ts` — Webpack configuration for the runner bundle
- `dist/` — Generated bundle output (do not edit)
**Gotchas / Notes**
- This package is deprecated in favor of `@packages/app`. Do not add new features here; migrate to `@packages/app` instead.
- Tests were moved to `@packages/app`; running `cypress:open` or `cypress:run` from this package will error.
- Nx implicit dependencies on `@packages/driver`, `@packages/reporter`, and `@packages/config` mean any change in those packages invalidates the runner's Nx cache and triggers a rebuild.
- `dom.js` uses webpack-specific loaders and cannot be imported directly by Vite.
**Integration Points**
- Bundles `@packages/reporter` and `@packages/driver` as implicit webpack dependencies.
- The built `dist/cypress_runner.js` is served by `@packages/server` to the browser.
**Auto-Generated Files**
- `dist/` — Generated by webpack; do not edit by hand.
+3
View File
@@ -0,0 +1,3 @@
# Runner
@AGENTS.md
+43
View File
@@ -0,0 +1,43 @@
This package detects the framework, bundler, and library used by a project, and scaffolds the initial `cypress.config.js` and support files when a user configures Cypress for the first time via the Launchpad UI.
**Key Commands**
```bash
# Build all outputs (CJS, ESM, browser)
yarn workspace @packages/scaffold-config build
# Run a specific test file
yarn workspace @packages/scaffold-config test -- <path-to-spec>
# Run tests matching a glob pattern
yarn workspace @packages/scaffold-config test -- "<glob-pattern>"
# Type-check
yarn workspace @packages/scaffold-config check-ts
```
**Architecture**
- `src/detect.ts` — Auto-detection logic for frameworks and bundlers installed in the user's project
- `src/frameworks.ts` — Registry of supported frameworks (React, Vue, Angular, Svelte, Next.js, etc.)
- `src/dependencies.ts` — Dependency definitions and version requirements for each integration
- `src/commandFile.ts` — Logic for generating `cypress.config.js` command files
- `src/supportFile.ts` — Logic for generating support file scaffolding
- `src/component-index-template.ts` — Template for the component index HTML file
- `src/ct-detect-third-party.ts` — Detection for third-party CT framework plugins
**Gotchas / Notes**
- The `browser/dependencies` output is NOT used in the production binary; it exists for internal testing purposes only.
- The ESM build is compiled but not currently consumed; production usage is CJS only.
- When adding a new framework, you must also add a `<name>-configured` and `<name>-unconfigured` system-test project and wire it into `component_testing_spec.ts`.
- New dependencies must be declared in `src/constants.ts` with descriptions.
**Integration Points**
- Consumed by `@packages/data-context` and `@packages/launchpad` to drive the configuration wizard UI.
- System-test projects in `system-tests/projects/` exercise the scaffolding end-to-end.
**Auto-Generated Files**
- `cjs/`, `esm/`, `browser/` — Generated by `tsc`; do not edit by hand.
+3
View File
@@ -0,0 +1,3 @@
# Scaffold Config
@AGENTS.md
+59
View File
@@ -0,0 +1,59 @@
The server is the heart of the Cypress application — the Node.js process that proxies all browser traffic, manages browser automation, coordinates state between the Launchpad and Driver, handles file I/O, manages plugins and reporters, records video, and communicates with Cypress Cloud.
**Key Commands**
```bash
# Start the full Cypress application (dev mode)
yarn workspace @packages/server start
# NOTE: Full suite is slow (hundreds of tests); always target a specific file or grep pattern
# Run a specific unit test file
yarn workspace @packages/server test-unit -- <path-to-spec>
# Filter unit tests by name pattern
yarn workspace @packages/server test-unit -- --grep "handles request"
# Run a specific integration test file
yarn workspace @packages/server test-integration -- <path-to-spec>
# Filter integration tests by name pattern
yarn workspace @packages/server test-integration -- --grep "video capture"
# Build TypeScript to JS (production)
yarn workspace @packages/server build-prod
```
**Architecture**
- `lib/browsers/` — Browser launch, automation, and CDP/BiDi communication for Chrome, Firefox, Electron, and WebKit
- `lib/project-base.ts` — Base project class; orchestrates proxy, socket, and server setup
- `lib/server-base.ts` — HTTP/HTTPS server setup and routing
- `lib/socket-base.ts`, `lib/socket-e2e.ts`, `lib/socket-ct.ts` — WebSocket communication with the browser/driver
- `lib/open_project.ts` — Lifecycle management for open Cypress projects
- `lib/cypress.ts` — Top-level Cypress process entry
- `lib/routes.ts` — Express route definitions
- `lib/screenshots.ts` — Screenshot capture and processing
- `lib/video_capture.ts` — Video recording via ffmpeg
- `lib/session.ts` — Session management for `cy.session()`
- `lib/fixture.ts` — Fixture file loading
- `lib/exec.ts``cy.exec()` subprocess handling
- `lib/config.ts` — Server-side config resolution
- `lib/makeDataContext.ts` — Data context factory for GraphQL layer
**Gotchas / Notes**
- Do not build `.js` files manually during development; `@packages/ts` provides require-time transpilation.
- To disable the V8 snapshot for debugging, set `DISABLE_SNAPSHOT_REQUIRE=1`.
- To update test snapshots, prepend `SNAPSHOT_UPDATE=1` to any test command.
- E2E/system tests have moved to `system-tests/`; only unit and integration tests live in `test/unit` and `test/integration`.
- `better-sqlite3` requires native compilation; run `yarn workspace @packages/server rebuild-better-sqlite3` after an Electron version upgrade.
- Several dependencies (e.g., `axios`, `devtools-protocol`, `geckodriver`) are nohoisted to avoid version conflicts.
**Integration Points**
- Consumes virtually every other `@packages/*` package in the monorepo.
- `@packages/proxy` and `@packages/rewriter` handle all HTTP interception.
- `@packages/net-stubbing` provides `cy.intercept()` server-side state.
- `@packages/data-context` provides the GraphQL layer consumed by `@packages/launchpad` and `@packages/app`.
- `@packages/socket` provides the WebSocket bridge between the server and the browser driver.
+3
View File
@@ -0,0 +1,3 @@
# Server
@AGENTS.md
+45
View File
@@ -0,0 +1,45 @@
This package is a shared library providing both the server-side (Node.js) and client-side (browser) Socket.IO implementations used throughout Cypress for real-time communication between the server, driver, and browser.
**Key Commands**
```bash
# Build all targets (browser, CJS node, ESM node)
yarn workspace @packages/socket build
# Run a specific test file
yarn workspace @packages/socket test -- <path-to-spec>
# Run tests matching a glob pattern
yarn workspace @packages/socket test -- "<glob-pattern>"
# Type-check
yarn workspace @packages/socket check-ts
```
**Architecture**
- `lib/node/` — Server-side socket implementation
- `socket.ts` — Socket.IO server wrapper
- `cdp-socket.ts` — CDP (Chrome DevTools Protocol) socket implementation
- `socket-broadcaster.ts` — Broadcasts events to multiple connected sockets
- `lib/client/` — Client-side socket implementations
- `index.ts` — Browser-compatible socket client
- `cdp-browser.ts` — CDP client for browser contexts
- `lib/utils.ts` — Shared utility functions
**Gotchas / Notes**
- Socket.IO and engine.io packages are nohoisted to prevent version conflicts with other consumers in the monorepo.
- The package has three separate TypeScript configs: `tsconfig.browser.json`, `tsconfig.cjs.json`, and `tsconfig.esm.json`. Changes to shared code must be compatible with all three build targets.
- The `browser` field in `package.json` points to `browser/client/index.js` (compiled output); the `main` field points to `cjs/node/index.js`.
- `patch-package` runs on postinstall to apply patches to socket.io dependencies.
**Integration Points**
- Used by `@packages/server` for all WebSocket communication with the browser.
- Used by `@packages/proxy` for real-time signaling.
- Used by `@packages/driver` (browser side) to communicate with the server.
**Auto-Generated Files**
- `browser/`, `cjs/`, `esm/` — Generated by `tsc`; do not edit by hand.
+3
View File
@@ -0,0 +1,3 @@
# Socket
@AGENTS.md
+39
View File
@@ -0,0 +1,39 @@
This package standardizes error logging with special tags so that third-party stderr output from Node.js child processes can be intercepted and redirected to debug streams rather than polluting Cypress's own stderr output.
**Key Commands**
```bash
# Build TypeScript to dist/
yarn workspace @packages/stderr-filtering build
# Run a specific test file
yarn workspace @packages/stderr-filtering test -- <path-to-spec>
# Run tests matching a glob pattern
yarn workspace @packages/stderr-filtering test -- "<glob-pattern>"
```
**Architecture**
- `lib/logError.ts` — Primary `logError()` function that wraps messages with `START_TAG`/`END_TAG`
- `lib/FilterTaggedContent.ts` — Transform stream that filters content between start/end tags
- `lib/FilterPrefixedContent.ts` — Transform stream that filters lines matching a prefix regex
- `lib/Filter.ts` — Base filter stream class
- `lib/TagStream.ts` — Stream that emits tag-delimited content blocks
- `lib/LineDecoder.ts` — Utility for decoding streaming data line by line
- `lib/WriteToDebug.ts` — Writable stream that routes data to a `debug` logger instance
- `lib/constants.ts``START_TAG` and `END_TAG` constant values
- `lib/tagsDisabled.ts` — No-op implementations used when filtering is disabled
**Gotchas / Notes**
- `logError()` must be used for all error logging in node-executed packages so that filtering works correctly at process boundaries.
- The filtering only takes effect when a stream filter is set up at an execution boundary (e.g., `process.stderr.pipe(filter).pipe(process.stdout)`); simply calling `logError` without a downstream filter does nothing special.
**Integration Points**
- Used by `@packages/server` to filter stderr from child processes and third-party tools.
**Auto-Generated Files**
- `dist/` — Generated by `tsc`; do not edit by hand.
+3
View File
@@ -0,0 +1,3 @@
# Stderr Filtering
@AGENTS.md
+49
View File
@@ -0,0 +1,49 @@
This package is an OpenTelemetry wrapper used throughout the Cypress monorepo to instrument the app for performance insights and regression detection. It provides singleton telemetry instances for the server (Node.js), child process (IPC-based), and browser (WebSocket-based) contexts.
**Key Commands**
```bash
# Build all outputs (ESM, CJS, browser rollup bundle)
yarn workspace @packages/telemetry build
# Run a specific test file
yarn workspace @packages/telemetry test -- <path-to-spec>
# Run tests matching a glob pattern
yarn workspace @packages/telemetry test -- "<glob-pattern>"
# Type-check
yarn workspace @packages/telemetry check-ts
```
**Architecture**
- `src/node.ts` — Node.js telemetry singleton entry point
- `src/client.ts` — Browser telemetry singleton entry point
- `src/telemetry/index.ts` — Core span management, initialization, and context propagation
- `src/span-exporters/` — Exporters for different transport mechanisms:
- `cloud-span-exporter.ts` — Sends encrypted spans via HTTP to Cypress Cloud
- `ipc-span-exporter.ts` — Sends spans via IPC from child process to server
- `websocket-span-exporter.ts` — Sends spans via WebSocket from browser to server
- `console-trace-link-exporter.ts` — Debug exporter that logs a trace link
- `src/processors/on-start-span-processor.ts` — Hooks span start lifecycle
- `src/detectors/` — CI environment detectors (CircleCI, GitHub Actions) for resource attribution
**Gotchas / Notes**
- Telemetry is **disabled by default**. Enable with `CYPRESS_INTERNAL_ENABLE_TELEMETRY=true`.
- Verbose (high-volume) telemetry (e.g., from `@packages/proxy`) requires `CYPRESS_INTERNAL_ENABLE_TELEMETRY_VERBOSE=true` in addition.
- Data is forwarded to Honeycomb only for the internal Cypress Cloud project; all other projects' data is discarded.
- To develop locally with your own Honeycomb instance, override the exporter URL and supply an `x-honeycomb-team` header.
- All processes must call `telemetry.shutdown()` before exit or page refresh to ensure in-flight spans are flushed.
- Duplicate span names are not deduplicated; `getSpan()` will return only the first match.
- The browser rollup bundle ships with the binary; the ESM node build is currently unused in production.
**Integration Points**
- Initialized by `@packages/server` for the main process and coordinated across the child process and browser via IPC and WebSocket transports.
- `@packages/proxy` instruments request/response spans (gated behind the verbose flag).
**Auto-Generated Files**
- `cjs/`, `esm/`, `browser/` — Generated by `tsc` / rollup; do not edit by hand.
+3
View File
@@ -0,0 +1,3 @@
# Telemetry
@AGENTS.md
+23
View File
@@ -0,0 +1,23 @@
This package standardizes the monorepo's version of `ts-node` and provides shared base `tsconfig` options so that TypeScript is transpiled consistently at require-time during development without needing a pre-build step.
**Key Commands**
```bash
# Run unit tests (single spec: test/spec.ts — no sub-targeting needed)
yarn workspace @packages/ts test
```
**Architecture**
- `index.js` — Entry point; re-exports the configured ts-node/typescript-cached-transpile setup
- `register.js` — Registers ts-node for require-time TypeScript transpilation in a single directory
- `registerDir.js` — Registers ts-node for an entire directory tree
- `tsconfig.json` — Base TypeScript config shared across the monorepo
- `tsconfig.dom.json` — TypeScript config variant for browser/DOM contexts
- `tslint.json` — TSLint config (legacy linting) shared across packages
**Gotchas / Notes**
- In production builds, all TypeScript is pre-compiled to JavaScript, making this package's `register` export a no-op.
- Only `register.js` and `registerDir.js` are included in the published `files`; the rest is for in-monorepo development use only.
- Patches are applied via `patch-package` on postinstall.

Some files were not shown because too many files have changed in this diff Show More