Cypress で不安定なテストを処理する: ベスト プラクティスと戦略

導入

不安定なテストは自動テストにおける一般的な課題です。これらは、コードの変更とは関係のない理由で合格することもあれば失敗することもあり、一貫性がなく信頼性の低いテスト結果が得られるテストです。この投稿では、Cypress で不安定なテストが発生する原因を調査し、それらを効果的に処理するためのベスト プラクティスと戦略について説明します。

不安定なテストとは何ですか?

不安定なテストは非決定的な動作を示すテストであり、同じ条件下で実行しても常に同じ結果が得られるわけではありません。この不一致により、テスト スイートの信頼性が損なわれ、自動テストの信頼性が損なわれる可能性があります。

不安定なテストの一般的な原因

1. タイミングの問題: 非同期操作または動的コンテンツの読み込みに依存するテストは、指定された時間内に予期される条件が満たされない場合、失敗する可能性があります。
2. 環境依存: ネットワーク速度、サーバーの応答時間、環境構成などの外部要因の影響を受けるテストは不安定になる可能性があります。
3. リソース競合: 共有リソースに依存するテストや、アプリケーションの状態に影響を与えるアクションを実行するテストは、競合状態を引き起こす可能性があります。
4. 外部サービスへの依存関係: サードパーティの API またはサービスに依存するテストは、外部サービスのダウンタイムやレート制限により失敗する可能性があります。
5. 不適切なテスト分離: アプリケーションの状態を適切にリセットまたは分離しないテストは、残ったデータや以前のテストの副作用により失敗する可能性があります。

Cypress で不安定なテストを処理するためのベスト プラクティス

• ネットワーク リクエストに cy.intercept() を使用します: ネットワーク リクエストをスタブにして応答を制御し、外部サービスへの依存を軽減します。

cy.intercept('GET', '/api/data', { fixture: 'data.json' }).as('getData');
cy.visit('/');
cy.wait('@getData');

• cy.wait() を賢く活用する: cy.wait() を使用して、任意の期間ではなく特定の条件やイベントを待機します。

cy.get('.spinner').should('not.exist'); // Ensure spinner is gone
cy.get('.data-list').should('be.visible'); // Ensure data list is visible

• カスタム コマンドの実装: カスタム コマンドを作成して一般的なアクションをカプセル化し、それらが一貫して実行されるようにします。

Cypress.Commands.add('login', (username, password) => {
    cy.get('input[name="username"]').type(username);
    cy.get('input[name="password"]').type(password);
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
});

• cy.retry() プラグインを使用します: Cypress の再試行プラグインをインストールして、失敗したアサーションを自動的に再試行します。

// Install the plugin first: npm install -D cypress-plugin-retries
require('cypress-plugin-retries');

// Enable retries in your test
Cypress.env('RETRIES', 2);

// Example test with retries
it('should display data after retry', () => {
    cy.visit('/data-page');
    cy.get('.data-item').should('have.length', 10); // Retry if fails
});

• テストの分離: 各テストの前後にアプリケーションの状態を適切にリセットすることで、各テストが分離して実行されるようにします。

beforeEach(() => {
    cy.exec('npm run reset-db'); // Reset the database
    cy.visit('/');
});

• セレクターの最適化: ターゲット要素に堅牢で安定したセレクターを使用し、セレクター関連の不安定性の可能性を減らします。

// Use data attributes for selectors
cy.get('[data-cy="submit-button"]').click();

不安定なテストのデバッグ

1. ローカルでテストを実行する: cypress open を使用して不安定なテストをローカルで実行し、その動作を観察し、潜在的な問題を特定します。
2. デバッグ ツールの使用: cy.debug() やブラウザ DevTools などの Cypress の組み込みデバッグ ツールを利用して、アプリケーションの状態を検査します。
3. ログとスクリーンショットの分析: Cypress のログ、スクリーンショット、およびビデオを確認して、不安定の原因を特定します。

例: Cypress での不安定なテストの処理

describe('Flaky Test Example', () => {
    beforeEach(() => {
        cy.visit('/');
    });

    it('should load data reliably', () => {
        // Use intercept to stub network request
        cy.intercept('GET', '/api/data', { fixture: 'data.json' }).as('getData');
        cy.get('button[data-cy="load-data"]').click();
        cy.wait('@getData');

        // Use robust selector and assertion
        cy.get('[data-cy="data-list"]').should('have.length', 5);
    });

    it('should handle spinner correctly', () => {
        // Ensure spinner is not visible before asserting data
        cy.get('.spinner').should('not.exist');
        cy.get('[data-cy="data-list"]').should('be.visible');
    });
});

結論

信頼性が高く堅牢なテスト スイートを維持するには、不安定なテストを処理することが重要です。不安定性の一般的な原因を理解し、ベスト プラクティスを実装することで、Cypress プロジェクトで不安定なテストの発生を大幅に減らすことができます。テストが決定的で、分離され、安定していることを保証するために、Cypress の強力な機能とツールを忘れずに活用してください。

テストをお楽しみください!

以上がCypress で不安定なテストを処理する: ベスト プラクティスと戦略の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。