基于Cypress的Seerr端到端测试实战：从登录到媒体请求全流程覆盖

1. 项目概述：为什么我们需要Seerr与Cypress的组合？

如果你正在构建或维护一个现代化的Web应用，尤其是像Seerr这样的媒体请求与管理平台，那么“测试”这个词对你来说一定不陌生。但测试的种类繁多，从单元测试到集成测试，再到我们今天要深入探讨的端到端测试，每一种都有其独特的价值和挑战。我见过太多项目，前端功能看起来光鲜亮丽，但一旦涉及到用户从登录、搜索、提交请求到后台审批的完整流程，就bug频出，用户体验大打折扣。这正是端到端测试要解决的核心问题：模拟真实用户的操作，验证整个应用链路是否畅通无阻。

Seerr作为一个典型的单页应用，其前端与后端API、第三方服务（如媒体信息刮削器、通知服务）有着复杂的交互。仅仅保证每个按钮能点击、每个API能返回200状态码是远远不够的。用户关心的是：我搜索一部电影，能否正确显示海报和详情？我提交一个请求，管理员能否在后台看到并处理？整个流程是否顺畅无阻？这就是端到端测试的用武之地。

而在端到端测试的工具选型上，Cypress近年来异军突起，成为了前端开发者和测试工程师的新宠。与传统的Selenium等工具相比，Cypress的架构设计让它天生适合现代Web应用。它运行在浏览器内部，可以直接访问和控制网络请求、本地存储，并且提供了近乎实时的测试反馈和极其友好的调试体验。将Cypress应用于Seerr的测试，不仅能覆盖复杂的用户交互场景，还能极大地提升测试编写的效率和可维护性。这篇指南，就是我结合多年在类似项目上的实战经验，为你梳理的一份从零开始，为Seerr构建可靠Cypress端到端测试套件的完整教程。

2. 测试策略与Cypress项目初始化

2.1 为Seerr设计端到端测试策略

在动手写第一行测试代码之前，我们必须先想清楚“测什么”和“怎么测”。盲目地编写测试只会增加维护成本。对于Seerr，我们可以从用户旅程和核心业务价值出发，梳理出几个关键的测试场景：

1. 用户认证流程：这是所有功能的基石。需要测试用户注册、登录、令牌刷新、登出以及错误的凭证处理。
2. 媒体发现与搜索：测试搜索框的输入、异步搜索建议的展示、搜索结果列表的渲染以及点击条目进入详情页。
3. 媒体请求流程：这是Seerr的核心功能。测试用户提交请求（电影/剧集）、请求状态的变更（待批准、已批准、已可用）、以及通知的触发。
4. 管理后台操作：测试管理员登录、审批或拒绝用户请求、手动触发媒体抓取任务等。
5. 用户设置与偏好：测试修改个人信息、通知偏好设置等。

我们的策略应该是“由外而内，由主到次”。优先覆盖上述核心用户流程，确保主干功能畅通。每个测试用例应尽可能独立，不依赖前一个测试用例产生的数据（如某个特定用户或请求），这可以通过测试前置的“数据准备”和测试后的“数据清理”来实现。Cypress的beforeEach和afterEach钩子函数在这里会起到关键作用。

2.2 初始化Cypress测试项目

假设你的Seerr项目已经是一个Node.js项目（通常基于React, Vue, Angular或类似框架）。我们将在项目根目录下集成Cypress。

步骤一：安装Cypress打开终端，进入你的Seerr项目目录，执行以下命令。我强烈推荐使用npm或yarn将其安装为开发依赖，这样能保证团队每个成员和CI环境都使用相同版本。

# 使用 npm npm install cypress --save-dev # 或使用 yarn yarn add cypress --dev

安装完成后，你的package.json文件中会新增一个devDependencies条目。

步骤二：打开Cypress并生成基础结构首次安装后，运行以下命令来打开Cypress Test Runner（一个图形化界面）：

npx cypress open

第一次运行此命令时，Cypress会为你完成一系列初始化工作：

1. 在项目根目录创建/cypress文件夹。
2. 在/cypress下生成一系列子文件夹和示例文件。
3. 启动Cypress Test Runner GUI。

这个GUI界面非常有用，特别是对于初学者和调试阶段。你可以在这里选择浏览器（Chrome, Firefox, Edge, Electron）、查看测试列表、运行单个或全部测试，并实时观察测试执行过程。

步骤三：理解生成的项目结构关闭GUI，我们来看看Cypress生成的核心目录结构：

your-seerr-project/ ├── cypress/ │ ├── fixtures/ # 测试夹具，存放静态测试数据（如JSON格式的模拟响应） │ ├── e2e/ # （Cypress 10+版本）存放所有端到端测试规范文件（.spec.js 或 .spec.ts） │ ├── support/ # 支持文件 │ │ ├── commands.js # 自定义Cypress命令 │ │ └── e2e.js # 测试运行前的全局配置和导入 │ └── downloads/ # 测试运行时下载的文件（默认不存在，首次下载后生成） │ └── screenshots/ # 测试失败时自动捕获的截图 │ └── videos/ # 测试运行的录像（需配置开启） ├── cypress.config.js # Cypress主配置文件（Cypress 10+版本） └── package.json

注意：在Cypress 10版本之前，测试文件存放在cypress/integration/目录下，配置文件是cypress.json。从10版本开始，官方推荐使用新的结构。本教程基于较新的版本。如果你的项目是旧版本，迁移到新结构能获得更好的体验。

步骤四：基础配置接下来，我们需要配置Cypress，让它知道我们的Seerr应用在哪里运行。编辑根目录下的cypress.config.js文件：

const { defineConfig } = require('cypress') module.exports = defineConfig({ e2e: { // 设置测试运行的基础URL。当测试中使用 cy.visit('/') 时，实际访问的是 http://localhost:3000 baseUrl: 'http://localhost:3000', // 测试规范文件的模式，默认会匹配 cypress/e2e/ 下所有 .cy.js, .cy.ts, .cy.jsx, .cy.tsx 文件 specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}', // 是否支持实验性的“组件测试”功能，对于Seerr的端到端测试，我们先关闭 experimentalRunAllSpecs: true, // 每个测试失败时自动截图 screenshotOnRunFailure: true, // 录制测试视频（可能会影响性能，可根据需要开启） video: false, // 设置视口大小，模拟常见桌面浏览器 viewportWidth: 1920, viewportHeight: 1080, // 全局超时设置（毫秒） defaultCommandTimeout: 10000, // 命令超时 responseTimeout: 30000, // 响应超时 // 测试运行前的设置，可以在这里引入全局插件或设置环境变量 setupNodeEvents(on, config) { // 在这里可以注册任务或修改config return config }, }, })

这个基础配置意味着，你的Seerr开发服务器需要运行在http://localhost:3000。在运行Cypress测试前，请确保你的应用已经启动。

3. 编写你的第一个Seerr端到端测试用例

3.1 测试场景：用户登录流程

让我们从一个最常见也最重要的场景开始：用户登录。这个测试将验证：

1. 用户能访问登录页面。
2. 用户能输入邮箱和密码。
3. 点击登录按钮后，能成功跳转到首页（或仪表盘）。
4. 登录后，页面会显示用户相关的元素（如头像、用户名）。

在cypress/e2e目录下，创建一个新文件：authentication/login.cy.js。

// cypress/e2e/authentication/login.cy.js describe('Seerr 用户认证流程', () => { // 在每个测试用例之前运行，用于访问登录页 beforeEach(() => { // 访问基础URL配置的根路径，即 http://localhost:3000 // 假设我们的登录页路由是 '/login' cy.visit('/login') // 确保页面加载完成，通过检查登录表单是否存在 cy.get('form').should('be.visible') }) it('应该成功使用有效凭据登录', () => { // 1. 在测试中，我们不应该使用真实用户数据。 // 通常，你有几种策略： // a) 在测试前，通过API或数据库脚本创建一个测试用户。 // b) 使用一个固定的、已知的测试账户（确保测试环境与生产隔离）。 // 这里我们假设有一个测试用户：test@example.com / password123 const email = 'test@example.com' const password = 'password123' // 2. 使用 cy.get() 通过选择器定位元素。 // 最佳实践：为测试元素添加>// cypress/support/commands.js // *********************************************** // 自定义命令示例 // *********************************************** // // 更多示例请参考： // https://on.cypress.io/custom-commands // *********************************************** // 登录命令 Cypress.Commands.add('login', (email, password) => { cy.session([email, password], () => { // 这段代码只会在会话首次创建时执行 cy.visit('/login') cy.get('[data-testid="email-input"]').type(email) cy.get('[data-testid="password-input"]').type(password) cy.get('[data-testid="login-submit-btn"]').click() // 等待跳转到首页，确保登录成功 cy.url().should('eq', Cypress.config().baseUrl + '/') cy.get('[data-testid="user-avatar"]').should('be.visible') }, { // 会话缓存选项 cacheAcrossSpecs: true, // 跨测试文件缓存会话 }) }) // 注销命令 Cypress.Commands.add('logout', () => { cy.get('[data-testid="user-menu"]').click() cy.get('[data-testid="logout-button"]').click() cy.url().should('include', '/login') }) // 通用数据清理命令（示例：通过API删除测试数据） Cypress.Commands.add('cleanupTestRequests', () => { // 假设你的Seerr有一个管理API端点用于清理测试数据 // 注意：这需要你的后端支持，并且仅在测试环境启用 const apiToken = Cypress.env('ADMIN_API_TOKEN') if (apiToken) { cy.request({ method: 'DELETE', url: `${Cypress.config().baseUrl}/api/v1/test/cleanup`, headers: { 'Authorization': `Bearer ${apiToken}` }, failOnStatusCode: false // 即使404也不失败，避免因无此端点而阻塞测试 }) } })

关键点说明：

• cy.session()(Cypress 8.2.0+)： 这是一个革命性的命令。它可以将登录状态（Cookies, localStorage等）缓存起来。在同一个测试运行中，后续调用cy.login()会直接复用缓存，跳过实际的登录流程，极大提升测试速度。cacheAcrossSpecs: true意味着这个缓存甚至可以在不同的测试文件之间共享。
• 环境变量： 注意Cypress.env('ADMIN_API_TOKEN')。敏感信息（如API密钥、测试账号密码）绝不应该硬编码在测试文件中。我们应该使用Cypress的环境变量。可以在cypress.config.js中配置，或通过命令行传入。
• cy.request()： Cypress不仅可以操作浏览器，还可以直接发送HTTP请求。这在做测试数据准备和清理时非常有用，比通过UI操作快得多。

现在，你可以在任何测试文件中使用cy.login('test@example.com', 'password123')来快速登录了。

4. 模拟真实用户交互：测试Seerr核心功能

4.1 测试媒体搜索与详情查看

登录之后，用户最常做的操作就是搜索媒体。这个测试涉及输入、异步请求、列表渲染和导航。

创建文件cypress/e2e/media/search.cy.js：

// cypress/e2e/media/search.cy.js describe('Seerr 媒体搜索功能', () => { // 在所有测试前登录一次即可，利用 cy.session 缓存 before(() => { cy.login('test@example.com', 'password123') }) beforeEach(() => { // 每个测试从首页开始 cy.visit('/') // 确保搜索框可见 cy.get('[data-testid="global-search-input"]').should('be.visible') }) it('应该能根据输入关键词显示搜索建议', () => { const searchQuery = 'Inception' // 1. 输入搜索词 cy.get('[data-testid="global-search-input"]').type(searchQuery) // 2. 断言搜索建议下拉框出现 cy.get('[data-testid="search-suggestions-list"]').should('be.visible') // 3. 断言建议列表中包含相关条目（例如包含“盗梦空间”） // Cypress 会自动等待元素出现，这里我们检查列表项数量大于0 cy.get('[data-testid="search-suggestion-item"]').should('have.length.gt', 0) // 更精确的断言：至少有一个建议项包含搜索词 cy.get('[data-testid="search-suggestion-item"]').first().should('contain.text', searchQuery) }) it('应该能执行完整搜索并跳转到结果页', () => { const searchQuery = 'The Matrix' cy.get('[data-testid="global-search-input"]').type(`${searchQuery}{enter}`) // 模拟按下回车 // 断言URL跳转到搜索页 cy.url().should('include', '/search') cy.url().should('include', `query=${encodeURIComponent(searchQuery)}`) // 断言结果页面有结果列表 cy.get('[data-testid="media-results-grid"]').should('be.visible') cy.get('[data-testid="media-result-card"]').should('have.length.gt', 0) // 断言第一个结果卡片包含搜索词（可能是在标题中） cy.get('[data-testid="media-result-card"]').first().within(() => { // .within() 将作用域限定在这个卡片内，方便查找子元素 cy.get('[data-testid="media-title"]').should('contain.text', 'Matrix') }) }) it('应该能点击搜索结果进入媒体详情页', () => { // 先执行搜索 cy.get('[data-testid="global-search-input"]').type('Avengers{enter}') cy.url().should('include', '/search') // 点击第一个结果卡片 cy.get('[data-testid="media-result-card"]').first().click() // 断言导航到了详情页 // 假设详情页URL模式是 /movie/:id 或 /tv/:id cy.url().should('match', /\/movie\/\d+|\/tv\/\d+/) // 断言详情页关键元素存在 cy.get('[data-testid="media-detail-poster"]').should('be.visible') cy.get('[data-testid="media-detail-title"]').should('be.visible') cy.get('[data-testid="media-detail-overview"]').should('be.visible') // 断言“请求”按钮存在（这是Seerr的核心功能入口） cy.get('[data-testid="request-media-button"]').should('be.visible') }) })

处理异步加载与网络请求：现代应用大量使用异步请求。Cypress提供了强大的工具来控制和断言网络请求。

it('应该在搜索时显示加载状态并处理空结果', () => { // 使用 cy.intercept() 来监听和控制网络请求 // 场景：模拟一个慢速搜索请求，测试加载状态UI cy.intercept('GET', '**/api/v1/search*', { delay: 1000, // 延迟1秒响应，让加载状态有机会显示 fixture: 'search/empty_results.json' // 使用夹具文件返回空结果 }).as('searchRequest') // 给这个拦截请求起个别名 cy.get('[data-testid="global-search-input"]').type('NonexistentMovieTitle{enter}') // 断言加载指示器出现 cy.get('[data-testid="search-loading-indicator"]').should('be.visible') // 等待我们拦截的请求完成 cy.wait('@searchRequest') // 断言加载指示器消失 cy.get('[data-testid="search-loading-indicator"]').should('not.exist') // 断言显示“无结果”的UI cy.get('[data-testid="empty-results-message"]').should('be.visible').and('contain.text', '未找到') })

这里，cy.intercept()是关键。它可以：

1. 监听特定请求，用于cy.wait('@alias')等待请求发生。
2. 存根请求，返回自定义的响应（如本例中的fixture），用于测试边界情况（如空结果、错误响应）。
3. 修改真实请求的响应。

fixtures/search/empty_results.json文件内容示例：

{ "page": 1, "results": [], "total_pages": 0, "total_results": 0 }

4.2 测试媒体请求与状态管理

这是Seerr最核心的业务流程。测试用户提交请求，并验证请求状态的变化。这个测试会更复杂，因为它可能涉及多个页面和状态更新。

创建文件cypress/e2e/requests/submit-request.cy.js：

// cypress/e2e/requests/submit-request.cy.js describe('Seerr 媒体请求流程', () => { let testMediaId let testMediaTitle before(() => { cy.login('test@example.com', 'password123') // 测试前，通过API或固定数据获取一个已知的、可请求的媒体ID // 这里我们假设有一个已知的测试电影ID（例如TMDB ID: 123） testMediaId = 123 testMediaTitle = '测试电影' }) beforeEach(() => { // 每个测试前，清理可能遗留的测试请求，确保环境干净 cy.cleanupTestRequests() cy.visit(`/movie/${testMediaId}`) // 直接导航到详情页 }) it('应该能成功提交一个电影请求', () => { // 1. 拦截创建请求的API调用，以便我们验证它被正确触发 cy.intercept('POST', '**/api/v1/request').as('createRequest') // 2. 点击“请求”按钮 cy.get('[data-testid="request-media-button"]').click() // 3. 可能会弹出一个模态框（Modal）让我们确认或选择选项 cy.get('[data-testid="request-modal"]').should('be.visible') // 假设需要选择一个质量配置文件 cy.get('[data-testid="quality-profile-select"]').select('超高清') // 点击模态框内的提交按钮 cy.get('[data-testid="confirm-request-button"]').click() // 4. 等待创建请求的API调用完成，并断言其请求体 cy.wait('@createRequest').its('request.body').should('deep.include', { mediaId: testMediaId, mediaType: 'movie', qualityProfileId: 3 // 假设“超高清”对应的ID是3 }) // 5. 断言UI反馈：成功提示、按钮状态变化等 cy.get('[data-testid="success-alert"]').should('be.visible').and('contain.text', '请求已提交') cy.get('[data-testid="request-media-button"]') .should('be.disabled') .and('contain.text', '已请求') // 6. 可选：导航到“我的请求”页面，验证请求出现在列表中 cy.visit('/requests') cy.get('[data-testid="my-requests-list"]').within(() => { cy.contains('[data-testid="request-item-title"]', testMediaTitle).should('be.visible') cy.contains('[data-testid="request-status-badge"]', '待批准').should('be.visible') }) }) it('应该防止重复提交请求', () => { // 先提交一次请求 cy.get('[data-testid="request-media-button"]').click() cy.get('[data-testid="confirm-request-button"]').click() // 等待请求完成，UI状态变为“已请求” cy.get('[data-testid="request-media-button"]').should('contain.text', '已请求') // 再次尝试点击“请求”按钮（现在应该是禁用或状态已变） cy.get('[data-testid="request-media-button"]').click({ force: true }) // force: true 即使元素被禁用也强制点击 // 断言没有新的网络请求发出（或者有错误提示） // 我们可以监听网络请求，并断言其调用次数 let requestCount = 0 cy.intercept('POST', '**/api/v1/request', (req) => { requestCount++ req.reply({ statusCode: 409, body: { error: '请求已存在' } }) // 模拟冲突响应 }).as('duplicateRequest') // 因为按钮可能已禁用，点击可能无效。我们更应断言按钮状态和可能的提示。 // 断言按钮是禁用状态 cy.get('[data-testid="request-media-button"]').should('be.disabled') // 或者，如果点击后出现了提示 // cy.get('[data-testid="error-alert"]').should('contain.text', '已请求过') }) it('应该能取消一个待批准的请求', () => { // 先创建一个请求 cy.createTestRequest(testMediaId, 'movie') // 假设我们有一个自定义命令来通过API创建请求 cy.reload() // 刷新页面，使UI状态更新 // 点击“取消请求”按钮（可能需要在详情页或请求列表页） cy.get('[data-testid="cancel-request-button"]').click() cy.get('[data-testid="confirm-cancel-modal"]').should('be.visible') cy.get('[data-testid="confirm-cancel-button"]').click() // 拦截删除请求的API cy.intercept('DELETE', `**/api/v1/request/**`).as('deleteRequest') cy.wait('@deleteRequest').its('response.statusCode').should('eq', 200) // 断言UI更新 cy.get('[data-testid="request-media-button"]').should('not.be.disabled').and('contain.text', '请求') cy.get('[data-testid="success-alert"]').should('contain.text', '请求已取消') }) })

这个测试套件的关键进阶技巧：

• 测试数据管理：before钩子中获取testMediaId。更健壮的做法是，在测试运行前，通过一个脚本或API调用，在测试数据库中预置一批“测试专用”的媒体数据，并记录它们的ID。确保这些数据不会影响生产环境。
• API交互与UI同步： 我们大量使用cy.intercept()和cy.wait('@alias')。这不仅能确保测试在正确的时机进行断言，还能验证前端是否发送了正确的数据给后端。
• 自定义命令扩展： 像cy.createTestRequest()这样的命令可以封装通过API创建后台数据的逻辑，让测试准备更高效。
• 状态断言： 除了元素可见性，我们还要断言元素的状态（.should('be.disabled')）、文本内容、CSS类等，以全面验证UI行为。

5. 高级技巧、调试与持续集成

5.1 使用Fixtures和Environment Variables管理测试数据

硬编码的测试数据是脆弱的。我们应该将数据外部化。

1. 使用Fixtures存储静态响应数据：在cypress/fixtures/下创建JSON文件，例如testUser.json：

{ "email": "test@example.com", "password": "password123", "name": "测试用户" }

在测试中加载：

before(() => { cy.fixture('testUser').as('userData') // 加载并起别名 }) it('使用fixture数据登录', function() { // 使用 function() 以访问 this const { email, password } = this.userData cy.login(email, password) })

2. 使用环境变量管理敏感和动态配置：在cypress.config.js中配置，或通过命令行传入。

// cypress.config.js module.exports = defineConfig({ e2e: { // ... 其他配置 }, env: { apiUrl: 'http://localhost:3000/api', adminApiToken: process.env.CYPRESS_ADMIN_API_TOKEN, // 从系统环境变量读取 testUserEmail: 'test@example.com', testUserPassword: 'password123' }, })

在测试中使用：Cypress.env('adminApiToken')或cy.wrap(Cypress.env('adminApiToken'))。

5.2 Cypress的调试艺术

当测试失败时，高效的调试至关重要。

1. Cypress Test Runner GUI： 这是最强大的调试工具。运行npx cypress open，你可以：

   • 时间旅行： 在命令日志中点击任意命令，应用的状态会回退到该命令执行前的那一刻。
   • 实时查看： 右侧实时显示被测应用。
   • 控制台输出： 查看每个命令的详细输出、XHR请求、Console日志等。

2. cy.pause()和cy.debug()：

   • 在测试代码中插入cy.pause()，测试运行到此处会暂停，你可以逐步执行后续命令。
   • 插入cy.debug()，会在此处进入浏览器开发者工具的调试模式，你可以查看当前的this上下文（即上一个命令产生的结果）。

3. 截图和视频： 配置screenshotOnRunFailure: true和video: true。测试失败时，会自动截图。视频记录了整个测试过程，对于在CI中诊断偶发性失败尤其有用。

4. 选择性运行： 使用.only和.skip。

   it.only('只运行这个测试', () => { ... }) // 只运行这个it describe.skip('跳过整个描述块', () => { ... }) // 跳过这个describe

5.3 集成到CI/CD流水线

自动化测试的价值在持续集成中才能最大化。这里以GitHub Actions为例，展示如何集成。

在项目根目录创建.github/workflows/cypress-tests.yml：

name: Cypress E2E Tests on: [push, pull_request] # 在推送代码或创建PR时触发 jobs: cypress-run: runs-on: ubuntu-latest # 如果需要启动后端服务，可以使用 services 或先启动服务 services: # 假设Seerr使用PostgreSQL和Redis postgres: image: postgres:14 env: POSTGRES_PASSWORD: postgres POSTGRES_DB: seerr_test options: >- --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5 redis: image: redis:7-alpine options: >- --health-cmd "redis-cli ping" --health-interval 10s --health-timeout 5s --health-retries 5 steps: - name: Checkout code uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '18' cache: 'npm' - name: Install dependencies run: npm ci # 使用 ci 命令确保依赖锁一致 - name: Build the application (if needed) run: npm run build env: NODE_ENV: test DATABASE_URL: postgresql://postgres:postgres@localhost:5432/seerr_test REDIS_URL: redis://localhost:6379 - name: Start Seerr application run: | npm run start:test & # 假设你有一个启动测试环境的脚本 npx wait-on http://localhost:3000 --timeout 60000 # 等待应用启动 env: NODE_ENV: test PORT: 3000 - name: Run Cypress tests uses: cypress-io/github-action@v5 with: # 启动命令已在上面完成，这里只运行测试 start: npm run start:test wait-on: 'http://localhost:3000' wait-on-timeout: 120 # 在CI中通常以无头模式运行 browser: chrome headless: true # 记录测试结果到Cypress Dashboard（需要设置CYPRESS_RECORD_KEY） record: false # 首次可设为false，后续配置好再开启 env: CYPRESS_BASE_URL: http://localhost:3000 CYPRESS_ADMIN_API_TOKEN: ${{ secrets.CYPRESS_ADMIN_API_TOKEN }} # 可选：上传测试失败时的截图和视频作为工件 - name: Upload Cypress artifacts if: failure() uses: actions/upload-artifact@v3 with: name: cypress-screenshots-and-videos path: | cypress/screenshots cypress/videos

CI配置要点：

• 环境隔离： 使用独立的测试数据库（如seerr_test），确保测试不会污染开发或生产数据。
• 服务依赖： 使用services启动数据库、缓存等依赖服务。
• 等待应用就绪： 使用wait-on确保应用完全启动后再运行测试。
• 安全信息： 敏感变量如CYPRESS_ADMIN_API_TOKEN存储在GitHub仓库的Secrets中。
• 并行化： 对于大型测试套件，可以使用cypress split或parallel特性在多个机器上并行运行测试，大幅缩短反馈时间。

5.4 常见问题与排查技巧实录

在实际为Seerr这类应用编写Cypress测试时，我踩过不少坑，这里总结一份速查表：

为Seerr这样的应用构建端到端测试套件，初期投入看似不小，但它带来的回报是长期的：它为你构建了一张安全网，让你在重构前端组件、升级依赖或添加新功能时充满信心，因为任何破坏核心用户流程的改动都会被立即捕获。从最重要的用户旅程开始，逐步覆盖，善用Cypress提供的强大工具（自定义命令、拦截、会话），并坚持良好的测试实践（独立、稳定、快速），你的测试代码将成为项目中最有价值的资产之一。