在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

cypress-io/cypress

菜单

应用程序与启动器

相关源文件

本文档描述了 Cypress 中的 App 和 Launchpad 组件，它们构成了应用程序的主要用户界面。App 是用户运行和调试测试的主要测试界面，而 Launchpad 是用户首先交互的项目选择和配置界面。有关这些接口使用的 GraphQL API 的信息，请参阅 GraphQL API。

概述

Cypress 的用户体验分为两个不同的界面

  1. Launchpad：Cypress 用户的入口点，负责项目选择、配置和设置
  2. App：用户查看、运行和调试测试的主要测试运行器界面

这些界面协同工作，为 Cypress 测试提供完整用户体验。

来源

架构

App 和 Launchpad 都作为 Vue.js 应用程序实现，通过共享数据层和 GraphQL API 与 Cypress 的核心功能进行通信。

来源

实现

App 和 Launchpad 作为独立的包实现，共享依赖项和通用数据层。

包描述
@packages/app运行测试的主应用程序界面
@packages/launchpad项目选择和配置界面
@packages/frontend-shared共享 UI 组件和本地化
@packages/data-context共享数据层和操作
@packages/graphqlGraphQL API 定义和解析器

来源

Launchpad 界面

Launchpad 是 Cypress 用户的入口点，负责项目选择、配置和设置。

Launchpad 主要组件

Launchpad 的主屏幕为用户提供测试选项和项目配置功能。

来源

Launchpad 中的关键用户流程

  1. 项目选择：用户从最近的项目中选择或添加新项目。
  2. 测试类型选择：用户选择端到端测试 (E2E) 或组件测试。
  3. 项目设置：对于新添加的项目，用户配置测试选项。
  4. 组件框架选择：对于组件测试，用户选择框架和打包器。
  5. 浏览器选择：用户选择要在其中运行测试的浏览器。

来源

配置和设置

Launchpad 通过 ProjectLifecycleManager 和 ProjectConfigManager 处理项目配置。主要职责包括：

  1. 从 cypress.config.js 加载项目配置
  2. 设置测试类型（端到端测试或组件测试）
  3. 配置组件测试的测试框架
  4. 为新项目搭建必要的骨架文件
  5. 迁移旧配置

来源

App 界面

App 是主要的测试界面，用户在此选择、运行和调试测试。

App 主要组件

来源

App 中的关键用户流程

  1. Spec 选择：用户浏览并选择要运行的 spec。
  2. 测试运行：用户在选定的浏览器中运行选定的 spec。
  3. 查看测试结果：用户查看测试结果，包括通过、失败和日志。
  4. 调试：用户使用各种工具调试失败的测试。

来源

Spec 管理

App 为管理 spec 提供了一个全面的界面，包括：

  1. 根据项目的 spec 模式显示所有可用的 spec
  2. 允许用户创建新的 spec
  3. 按搜索词过滤 spec
  4. 显示 spec 的元数据（上次更新、运行时间、flakiness）

来源

数据流和通信

App 和 Launchpad 通过共享数据层和 GraphQL API 与 Cypress 后端进行通信。

DataContext

DataContext 为 App 和 Launchpad 使用的数据和操作提供了集中式 API。它包括：

  1. 核心数据结构和状态
  2. 操作状态的操作
  3. 后端服务的接口
  4. 项目配置管理

来源

GraphQL API

GraphQL API 提供了前后端通信的类型安全接口。关键部分包括：

  1. 数据类型的模式定义
  2. 用于获取数据的查询
  3. 用于修改数据的突变（Mutations）
  4. 用于实时更新的订阅（Subscriptions）

来源

项目生命周期管理

ProjectLifecycleManager 处理 Cypress 项目的生命周期，包括：

  1. 加载和解析项目配置
  2. 设置测试类型
  3. 初始化测试环境
  4. 启动浏览器进行测试

来源

浏览器集成

App 和 Launchpad 都与浏览器进行交互以执行测试

  1. Launchpad：处理浏览器选择和启动
  2. App：管理测试执行期间的浏览器交互

来源

服务器集成

这些界面连接到几个服务器组件

  1. HTTP 服务器：服务 App 并处理 API 请求
  2. Socket 服务器：提供实时通信
  3. Dev 服务器：对于组件测试，为测试提供组件

来源

组件测试特定功能

对于组件测试，Launchpad 提供了额外的配置选项：

  1. 框架选择（React、Vue、Angular 等）
  2. 打包器选择（Webpack、Vite 等）
  3. Dev 服务器配置

然后，App 使用这些配置来运行选定框架和打包器的组件测试。

来源

结论

App 和 Launchpad 组件构成了 Cypress 的主要用户界面，为配置项目、选择测试、运行和调试测试提供了全面的环境。它们通过共享数据层和 GraphQL API 协同工作，提供无缝的用户体验。