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. ユーザーのリクエストからトピックを特定します。

   • はじめに → examples/get-started/
   • コアコンセプト → examples/core-concepts/
   • コンポーネントテスト → examples/component-testing/
   • エンドツーエンドテスト → examples/end-to-end-testing/
   • 継続的インテグレーション → examples/continuous-integration/
   • ガイド → examples/guides/
   • リファレンス → examples/references/
   • API リファレンス → api/

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます。

   はじめに - examples/get-started/:

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

   コアコンセプト - 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

   コンポーネントテスト - 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

   エンドツーエンドテスト - 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

   継続的インテグレーション - 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 リファレンスドキュメントを参照してください。 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
   • ... その他 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. 固定の待機を避ける：cy.wait() を使う代わりに、Cypress に組み込まれたリトライ機能を活用します
3. テストを分離する：各テストは独立して実行でき、ほかのテストに依存しないようにします
4. カスタムコマンドを使用する：再利用可能なテストロジックには、カスタムコマンドを作成します
5. アサーションのパターンに従う：エラーメッセージを分かりやすくするため、Cypress に組み込まれたアサーションを使用します
6. 適切に設定する：プロジェクトに合わせて cypress.config.js を正しく設定します
7. フィクスチャを使用する：値をハードコーディングする代わりに、テストデータにはフィクスチャを使用します
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 テスト、コンポーネントテスト、テスト自動化、ブラウザテスト、テストフレームワーク、アサーション、コマンド、フィクスチャ、CI/CD、継続的インテグレーション、テストランナー、端から端までのテスト、E2E テスト、コンポーネントテスト、テスト自動化、ブラウザテスト、テストフレームワーク、アサーション、コマンド、固定データ、継続的インテグレーション、テストランナー