cypress

适用场景

在用户希望执行以下操作时，使用此技能：

• 设置 Cypress 以进行端到端测试
• 编写 Cypress 测试用例
• 配置 Cypress 以进行组件测试
• 将 Cypress 集成到 CI/CD 流水线中
• 使用 Cypress 命令和断言
• 调试 Cypress 测试
• 优化 Cypress 测试性能
• 从其他测试框架迁移到 Cypress
• 在不同框架（React、Vue、Angular、Svelte）中使用 Cypress
• 为不同环境配置 Cypress

如何使用此技能

此技能的组织结构与 Cypress 官方文档结构一致（https://docs.cypress.io/app/get-started/why-cypress、https://docs.cypress.io/api/table-of-contents）。使用 Cypress 时：

1. 根据用户的请求确定主题：

   • Getting Started/快速开始 → examples/get-started/
   • Core Concepts/核心概念 → examples/core-concepts/
   • Component Testing/组件测试 → examples/component-testing/
   • End-to-End Testing/E2E 测试 → examples/end-to-end-testing/
   • Continuous Integration/持续集成 → examples/continuous-integration/
   • Guides/指南 → examples/guides/
   • References/参考 → examples/references/
   • API Reference/API 参考 → api/

2. 从 examples/ 目录加载相应的示例文件：

   Getting Started（快速开始） - examples/get-started/：

   • examples/get-started/install-cypress.md
   • examples/get-started/open-the-app.md
   • examples/get-started/why-cypress.md

   Core Concepts（核心概念） - examples/core-concepts/：

   • examples/core-concepts/best-practices.md
   • examples/core-concepts/interacting-with-elements.md
   • examples/core-concepts/introduction-to-cypress.md
   • examples/core-concepts/open-mode.md
   • examples/core-concepts/retry-ability.md
   • examples/core-concepts/test-isolation.md
   • examples/core-concepts/testing-types.md
   • examples/core-concepts/variables-and-aliases.md
   • examples/core-concepts/writing-and-organizing-tests.md

   Component Testing（组件测试） - examples/component-testing/：

   • examples/component-testing/angular/api.md
   • examples/component-testing/angular/examples.md
   • examples/component-testing/angular/overview.md
   • examples/component-testing/component-framework-configuration.md
   • examples/component-testing/custom-frameworks.md
   • examples/component-testing/get-started.md
   • examples/component-testing/react/api.md
   • examples/component-testing/react/examples.md
   • examples/component-testing/react/overview.md
   • examples/component-testing/styling-components.md
   • examples/component-testing/svelte/api.md
   • examples/component-testing/svelte/examples.md
   • examples/component-testing/svelte/overview.md
   • examples/component-testing/vue/api.md
   • examples/component-testing/vue/examples.md
   • examples/component-testing/vue/overview.md

   End-to-End Testing（E2E 测试） - examples/end-to-end-testing/：

   • examples/end-to-end-testing/testing-your-app.md
   • examples/end-to-end-testing/writing-your-first-end-to-end-test.md

   Continuous Integration（持续集成） - examples/continuous-integration/：

   • examples/continuous-integration/aws-codebuild.md
   • examples/continuous-integration/bitbucket-pipelines.md
   • examples/continuous-integration/circleci.md
   • examples/continuous-integration/github-actions.md
   • examples/continuous-integration/gitlab-ci.md
   • examples/continuous-integration/overview.md 指南 (指南) - examples/guides/:
   • examples/guides/accessibility-testing.md
   • examples/guides/authentication-testing/amazon-cognito-authentication.md
   • examples/guides/authentication-testing/auth0-authentication.md
   • examples/guides/authentication-testing/azure-active-directory-authentication.md
   • examples/guides/authentication-testing/google-authentication.md
   • examples/guides/authentication-testing/okta-authentication.md
   • examples/guides/authentication-testing/social-authentication.md
   • examples/guides/conditional-testing.md
   • examples/guides/cross-browser-testing.md
   • examples/guides/cross-origin-testing.md
   • examples/guides/cypress-studio.md
   • examples/guides/debugging.md
   • examples/guides/migration/protractor-to-cypress.md
   • examples/guides/migration/selenium-to-cypress.md
   • examples/guides/network-requests.md
   • examples/guides/screenshots-and-videos.md
   • examples/guides/stubs-spies-and-clocks.md
   • examples/guides/test-retries.md

   参考 (参考) - examples/references/:

   • examples/references/advanced-installation.md
   • examples/references/assertions.md
   • examples/references/bundled-libraries.md
   • examples/references/changelog.md
   • examples/references/client-certificates.md
   • examples/references/command-line.md
   • examples/references/configuration.md
   • examples/references/content-security-policy.md
   • examples/references/environment-variables.md
   • examples/references/error-messages.md
   • examples/references/experiments.md
   • examples/references/launching-browsers.md
   • examples/references/migration-guide.md
   • examples/references/module-api.md
   • examples/references/proxy-configuration.md
   • examples/references/recipes.md
   • examples/references/roadmap.md
   • examples/references/trade-offs.md
   • examples/references/troubleshooting.md

   其他章节：

   • examples/faq.md
   • examples/plugins/plugins-guide.md
   • examples/plugins/plugins-list.md
   • examples/tooling/IDE-integration.md
   • examples/tooling/code-coverage.md
   • examples/tooling/reporters.md
   • examples/tooling/typescript-support.md
   • examples/tooling/visual-testing.md

3. 在需要时参考 api/ 目录中的 API 文档： 命令 API - api/commands/：

   • api/commands/and.md
   • api/commands/as.md
   • api/commands/blur.md
   • api/commands/check.md
   • api/commands/children.md
   • api/commands/clear.md
   • api/commands/clearallcookies.md
   • api/commands/clearalllocalstorage.md
   • api/commands/clearallsessionstorage.md
   • api/commands/clearcookie.md
   • api/commands/clearcookies.md
   • api/commands/clearlocalstorage.md
   • api/commands/click.md
   • api/commands/clock.md
   • api/commands/closest.md
   • api/commands/contains.md
   • api/commands/dblclick.md
   • api/commands/debug.md
   • api/commands/document.md
   • api/commands/each.md
   • api/commands/end.md
   • api/commands/eq.md
   • api/commands/exec.md
   • api/commands/filter.md
   • api/commands/find.md
   • api/commands/first.md
   • api/commands/fixture.md
   • api/commands/focus.md
   • api/commands/focused.md
   • api/commands/get.md
   • api/commands/getallcookies.md
   • api/commands/getalllocalstorage.md
   • api/commands/getallsessionstorage.md
   • api/commands/getcookie.md
   • api/commands/getcookies.md
   • api/commands/go.md
   • api/commands/hash.md
   • api/commands/hover.md
   • api/commands/intercept.md
   • api/commands/invoke.md
   • api/commands/its.md
   • api/commands/last.md
   • api/commands/location.md
   • api/commands/log.md
   • api/commands/mount.md
   • api/commands/next.md
   • api/commands/nextall.md
   • api/commands/nextuntil.md
   • api/commands/not.md
   • api/commands/origin.md
   • ……以及另外 43 个命令文件

   Cypress API - api/cypress-api/：

   • api/cypress-api/arch.md
   • api/cypress-api/browser.md
   • api/cypress-api/catalog-of-events.md
   • api/cypress-api/config.md
   • api/cypress-api/cookies.md
   • api/cypress-api/currentretry.md
   • api/cypress-api/currenttest.md
   • api/cypress-api/custom-commands.md
   • api/cypress-api/custom-queries.md
   • api/cypress-api/cypress-log.md
   • api/cypress-api/dom.md
   • api/cypress-api/element-selector-api.md
   • api/cypress-api/ensure.md
   • api/cypress-api/env.md
   • api/cypress-api/isbrowser.md
   • api/cypress-api/iscy.md
   • api/cypress-api/keyboard-api.md
   • api/cypress-api/platform.md
   • api/cypress-api/require.md
   • api/cypress-api/screenshot-api.md
   • api/cypress-api/session.md
   • api/cypress-api/spec.md
   • api/cypress-api/stop.md
   • api/cypress-api/testing-type.md
   • api/cypress-api/version.md

   Node Events API - api/node-events/：

   • api/node-events/after-run-api.md
   • api/node-events/after-screenshot-api.md
   • api/node-events/after-spec-api.md
   • api/node-events/before-run-api.md
   • api/node-events/before-spec-api.md
   • api/node-events/browser-launch-api.md
   • api/node-events/configuration-api.md
   • api/node-events/overview.md
   • api/node-events/preprocessors-api.md

   Utilities API - api/utilities/：

   • api/utilities/$.md
   • api/utilities/_.md
   • api/utilities/blob.md
   • api/utilities/buffer.md
   • api/utilities/minimatch.md
   • api/utilities/promise.md
   • api/utilities/sinon.md

   目录 - api/table-of-contents/：

4. 遵循该示例文件中的具体说明，以了解语法、结构和最佳实践

   重要说明：

   • 所有示例均遵循 Cypress 最佳实践
   • 适用时，示例会同时提供 JavaScript 和 TypeScript 版本
   • 每个示例文件都包含参数、返回值、常见错误、最佳实践和使用场景
   • 请务必查看示例文件，了解最佳实践和常见模式

5. 必要时参考官方文档：

   • 入门指南：https://docs.cypress.io/app/get-started/why-cypress
   • API 参考：https://docs.cypress.io/api/table-of-contents

最佳实践

1. 使用 data-cy 属性：使用 data-cy 属性作为稳定且便于测试的选择器
2. 避免硬编码等待：利用 Cypress 内置的重试能力，而不是使用 cy.wait()
3. 保持测试相互独立：每项测试都应独立运行，不依赖其他测试
4. 使用自定义命令：为可复用的测试逻辑创建自定义命令
5. 遵循断言模式：使用 Cypress 内置断言，以获得更好的错误消息
6. 正确配置：为项目正确设置 cypress.config.js
7. 使用 fixtures：使用 fixtures 存放测试数据，而不是硬编码值
8. 组件测试：使用组件测试，对独立组件进行测试
9. 集成 CI/CD：为 CI/CD 环境正确配置 Cypress
10. 有效调试：使用 Cypress 的调试工具和命令

资源

• 官方文档：https://docs.cypress.io/
• 入门指南：https://docs.cypress.io/app/get-started/why-cypress
• API 参考：https://docs.cypress.io/api/table-of-contents
• GitHub 仓库：https://github.com/cypress-io/cypress

关键词

Cypress、端到端测试、E2E 测试、组件测试、测试自动化、浏览器测试、测试框架、断言、命令、fixtures、CI/CD、持续集成、测试运行器、端到端测试、E2E 测试、组件测试、测试自动化、浏览器测试、测试框架、断言、命令、固定数据、持续集成、测试运行器