Cypress

When to use this skill

Use this skill whenever the user wants to:

• Set up Cypress for end-to-end testing
• Write Cypress test cases
• Configure Cypress for component testing
• Integrate Cypress with CI/CD pipelines
• Use Cypress commands and assertions
• Debug Cypress tests
• Optimize Cypress test performance
• Migrate from other testing frameworks to Cypress
• Use Cypress with different frameworks (React, Vue, Angular, Svelte)
• Configure Cypress for different environments

How to use this skill

This skill is organized to match the Cypress official documentation structure (https://docs.cypress.io/app/get-started/why-cypress, https://docs.cypress.io/api/table-of-contents). When working with Cypress:

1. Identify the topic from the user's request:

   • 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. Load the appropriate example file from the examples/ directory:

   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

   Guides (指南) - 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

   References (参考) - 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

   Other Sections:

   • 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. Reference API documentation in the api/ directory when needed:

   Commands 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
   • ... and 43 more command files

   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

   Table of Contents - api/table-of-contents/:

4. Follow the specific instructions in that example file for syntax, structure, and best practices

   Important Notes:

   • All examples follow Cypress best practices
   • Examples include both JavaScript and TypeScript versions where applicable
   • Each example file includes parameters, returns, common errors, best practices, and scenarios
   • Always check the example file for best practices and common patterns

5. Reference the official documentation when needed:

   • Getting Started: https://docs.cypress.io/app/get-started/why-cypress
   • API Reference: https://docs.cypress.io/api/table-of-contents

Best Practices

1. Use data-cy attributes: Use data-cy attributes for stable, test-friendly selectors
2. Avoid hard-coded waits: Leverage Cypress's built-in retry-ability instead of cy.wait()
3. Keep tests isolated: Each test should be independent and not rely on other tests
4. Use custom commands: Create custom commands for reusable test logic
5. Follow assertion patterns: Use Cypress's built-in assertions for better error messages
6. Configure properly: Set up cypress.config.js correctly for your project
7. Use fixtures: Use fixtures for test data instead of hard-coding values
8. Component testing: Use component testing for isolated component testing
9. CI/CD integration: Configure Cypress properly for CI/CD environments
10. Debug effectively: Use Cypress's debugging tools and commands

Resources

• Official Documentation: https://docs.cypress.io/
• Getting Started: https://docs.cypress.io/app/get-started/why-cypress
• API Reference: https://docs.cypress.io/api/table-of-contents
• GitHub Repository: https://github.com/cypress-io/cypress

Keywords

Cypress, end-to-end testing, E2E testing, component testing, test automation, browser testing, test framework, assertions, commands, fixtures, CI/CD, continuous integration, test runner, 端到端测试, E2E测试, 组件测试, 测试自动化, 浏览器测试, 测试框架, 断言, 命令, 固定数据, 持续集成, 测试运行器

能力边界

✅ 适用场景

• 当你需要使用此技能对应的技术栈时
• 当项目需要遵循最佳实践时
• 当需要快速上手或深入理解核心概念时

⚠️ 需要注意

• 复杂业务逻辑需要结合具体场景调整
• 性能优化需要根据实际数据量评估

❌ 不适用场景

• 不相关的技术栈或框架
• 需要完全自定义的特殊场景

常见陷阱 (Gotchas)

1. 版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
2. 配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
3. 环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
4. 依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
5. 性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题

使用流程

Step 1: 环境准备

确保开发环境已安装必要的依赖和工具。

Step 2: 配置初始化

根据项目需求进行基础配置。

Step 3: 核心功能使用

按照示例代码实现核心功能。

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

完成开发后进行部署和监控。