用户界面

相关源文件

• cli/__snapshots__/spawn_spec.js
• npm/eslint-plugin-dev/package.json
• npm/mount-utils/create-rollup-entry.mjs
• npm/mount-utils/package.json
• npm/react/cypress/component/basic/rerender/effects.cy.jsx
• npm/react/package.json
• npm/vite-dev-server/package.json
• npm/vue/package.json
• npm/webpack-batteries-included-preprocessor/README.md
• npm/webpack-batteries-included-preprocessor/index.js
• npm/webpack-batteries-included-preprocessor/package.json
• npm/webpack-batteries-included-preprocessor/test/e2e/features.spec.js
• npm/webpack-dev-server/package.json
• npm/webpack-preprocessor/package.json
• packages/app/package.json
• packages/data-context/package.json
• packages/frontend-shared/package.json
• packages/graphql/package.json
• packages/launchpad/package.json
• packages/reporter/webpack.config.ts
• packages/runner/src/iframe/iframe.scss
• packages/runner/webpack.config.ts
• packages/server/lib/plugins/child/cross_origin.js
• packages/web-config/package.json
• packages/web-config/webpack.config.base.ts
• scripts/sync-exported-npm-with-cli.js
• tooling/v8-snapshot/package.json

本文档提供了 Cypress 用户界面组件、其架构以及它们如何协同工作的概述。它解释了驱动 Cypress 测试体验的主要 UI 包、技术栈和构建过程。

有关为 UI 提供支持的 GraphQL API 的信息，请参阅 GraphQL API。有关测试显示和报告方式的详细信息，请参阅 Runner & Reporter。

架构概述

Cypress UI 构建围绕多个核心包，以提供一致的用户体验。

来源

• packages/app/package.json24-46
• packages/launchpad/package.json23-45
• packages/frontend-shared/package.json21-29
• packages/data-context/package.json18-64
• npm/react/package.json18-32
• npm/vue/package.json17-33
• npm/mount-utils/package.json1-47

技术栈

Cypress UI 使用现代 Web 技术构建

组件	技术栈
前端框架	Vue.js 3
状态管理	Pinia
路由	Vue Router
数据获取	GraphQL (urql client)
构建工具	Vite, Webpack
CSS	Tailwind CSS
图标	@cypress-design/icon-registry
设计系统	@cypress-design/vue-* components

来源

• packages/app/package.json24-96
• packages/launchpad/package.json24-81
• packages/frontend-shared/package.json31-110
• packages/web-config/webpack.config.base.ts1-106
• tooling/v8-snapshot/package.json17-29

主要用户界面组件

App (主应用程序)

App (packages/app) 是用户选择项目后与之交互的主要 Cypress 应用程序界面。它提供

• 用于执行测试的测试运行程序
• 测试配置界面
• 全面的测试结果视图
• 组件测试集成

来源

• packages/app/package.json1-108

Launchpad (项目选择)

Launchpad (packages/launchpad) 是用户打开 Cypress 时看到的第一个 UI 组件。它提供

• 项目选择界面
• 测试类型设置（E2E 或组件）
• 项目创建和配置
• 框架检测和设置

来源

• packages/launchpad/package.json1-93

Frontend-Shared

Frontend Shared 包 (packages/frontend-shared) 包含 App 和 Launchpad 界面之间共享的可重用 UI 组件、实用程序和样式

• UI 组件（按钮、输入框、模态框）
• 样式工具
• 图标和设计令牌
• 用于 GraphQL 和测试的通用实用程序

来源

• packages/frontend-shared/package.json21-29
• packages/frontend-shared/package.json31-110

Runner 和 Reporter

Runner 和 Reporter 组件协同工作以显示测试及其结果

• Runner (packages/runner): 在 iframe 中显示被测应用程序
• Reporter (packages/reporter): 显示测试结果、命令和日志

Runner 的主要职责是管理 AUT（被测应用程序）iframe

来源

• packages/runner/webpack.config.ts1-104
• packages/runner/src/iframe/iframe.scss1-97
• packages/reporter/webpack.config.ts1-39

组件测试 UI

Cypress 为使用各种框架构建的组件提供了专门的 UI 适配器

组件测试流程演示了组件如何在测试运行程序中安装和显示

来源

• npm/react/package.json1-108
• npm/vue/package.json1-92
• npm/mount-utils/package.json1-47
• npm/webpack-dev-server/package.json1-71
• npm/vite-dev-server/package.json1-64
• npm/webpack-preprocessor/package.json1-79
• npm/webpack-batteries-included-preprocessor/package.json1-86
• npm/webpack-batteries-included-preprocessor/index.js1-222
• npm/react/cypress/component/basic/rerender/effects.cy.jsx1-74

UI 构建过程

Cypress 使用复杂的构建系统来打包和优化 UI 包

packages/web-config/webpack.config.base.ts 中的 webpack 配置为构建 UI 组件提供了共享设置，包括

• 用于现代 JavaScript 特性的 Babel 配置
• Sass/CSS 处理及模块支持
• 资产处理和优化
• 源代码映射生成。
• 浏览器兼容性 Polyfills

来源

• packages/web-config/webpack.config.base.ts1-346
• packages/runner/webpack.config.ts1-104
• packages/reporter/webpack.config.ts1-39

组件包分发

Cypress 组件测试库通过两种方式打包和分发

1. 发布到 npm，如 @cypress/react、@cypress/vue 等
2. 包含在 Cypress 二进制文件中，以便通过 cypress/react 直接导入

sync-exported-npm-with-cli.js 脚本确保发布到 npm 的代码也直接在 Cypress 二进制文件中可用

来源

• scripts/sync-exported-npm-with-cli.js1-86
• npm/mount-utils/create-rollup-entry.mjs1-88

跨域处理

Cypress 还提供了跨域测试的特殊处理，在运行器中配置了专门的配置项

跨域功能使用 webpack batteries included preprocessor 来处理各种文件格式和编译需求

来源

• packages/runner/webpack.config.ts25-80
• packages/server/lib/plugins/child/cross_origin.js1-68
• npm/webpack-batteries-included-preprocessor/index.js1-222