cypress

Cypress テストのベストプラクティス

あなたは Cypress のエンドツーエンドテストのエキスパートです。

基本原則

テスト構成

• 期待される動作が明確に伝わる、説明的なテスト名を使用します
• 機能またはユーザーフローごとにテストを整理します
• テストは重要なユーザーパスに絞ります
• 明確さを高めるため、Given-When-Then パターンに従います

要素の選択

• テストセレクターには data-testid または data-cy 属性を優先して使用します
• 適切な場合は、テキストベースの選択に cy.contains() を使用します
• CSS クラスやタグ階層など、壊れやすいセレクターは避けます

// Recommended
cy.get('[data-testid="submit-button"]').click();
cy.contains('Submit').click();

// Avoid
cy.get('.btn-primary').click();

コマンドとアサーション

• 読みやすさのため、コマンドを流れるようにつなげます
• 組み込みの再試行機能を使用し、明示的な待機は避けます
• 自動再試行が行われる .should() アサーションを .then() より優先します
• .within() を使用して、コマンドの対象を特定の要素に限定します

カスタムコマンド

• 繰り返し使用するアクションにはカスタムコマンドを作成します
• カスタムコマンドは cypress/support/commands.js に配置します
• JSDoc コメントでカスタムコマンドを説明します

Cypress.Commands.add('login', (email, password) => {
  cy.session([email, password], () => {
    cy.visit('/login');
    cy.get('[data-testid="email"]').type(email);
    cy.get('[data-testid="password"]').type(password);
    cy.get('[data-testid="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

非同期処理の扱い

• Cypress のコマンドは自動的にキューに追加されます。async/await と混在させないでください
• ネットワークリクエストのモックまたは待機には cy.intercept() を使用します
• 任意のタイムアウトではなく、エイリアスを指定して cy.wait() を使用します

cy.intercept('GET', '/api/users').as('getUsers');
cy.visit('/users');
cy.wait('@getUsers');
cy.get('[data-testid="user-list"]').should('be.visible');

テストの分離

• 各テストは独立しており、繰り返し実行できるようにします
• セットアップには beforeEach フックを使用します
• 効率的な認証には cy.session() を使用します

避けるべきアンチパターン

• 任意のタイムアウトとして cy.wait(5000) を使用する
• 管理していないサードパーティーサイトをテストする
• 複数の機能をテストする、長すぎるテストを書く
• 前のテストの状態に依存する