Ecom サイプレスのテスト

Cypress を使用した E2E テスト では、Cypress を使用して エンドツーエンド (E2E) テスト を実行する方法を説明します。 、特に Web アプリケーション向けの JavaScript の自動テスト用の最も人気のあるツールの 1 つです。すべての概念と手順を詳しく説明します。

---

E2E テストとは何ですか?

エンドツーエンド テスト (E2E) は、アプリケーションの完全な動作を最初から最後まで検証し、インターフェイスとのユーザー操作をシミュレートする自動テストです。これらのテストは、アプリケーションのすべての部分が実際の環境で期待どおりに正しく連携して動作することを検証するため、重要です。

サイプレス: それは何ですか?またどのように機能しますか?

Cypress は、Web アプリケーションの自動テストのためのツールです。使いやすく、強力かつ高速になるように設計されています。これにより、ボタンのクリック、フォームの入力、テキストの検証など、ユーザーが行うのと同じ方法でアプリケーションのユーザー インターフェイスと対話するテストを作成できます。

Cypress のいくつかの重要な機能:

• リアルタイム テスト: ブラウザ自体でテストを実行し、テストの実行をライブで確認できます。
• セットアップが簡単: 開始するために複雑なセットアップは必要ありません。
• 高速実行: Cypress はブラウザーで実行されるため、他の E2E テスト ツールと比較してテストの実行が高速です。
• CI/CD 統合: テスト自動化のために CI/CD パイプラインと簡単に統合します。

---

モジュール 34 ウォークスルー

1. Cypress ツールの概念化

Cypress は、主に E2E テスト用の Web アプリケーション用の自動テスト ツールです。ブラウザーでアプリケーション コードと直接対話するように設計されているため、テストがより効率的になります。

2.マシンへの Cypress のインストール

Cypress の使用を開始するには、プロジェクトに Cypress をインストールする必要があります。インストールコマンドは次のとおりです:

npm install cypress --save-dev

これにより、Cypress が開発依存関係としてプロジェクトにインストールされます。

3.サイプレスを開始します

Cypress をインストールした後、ターミナルで次のコマンドを使用して開くことができます:

npm install cypress --save-dev

これにより、Cypress Test Runner が開き、ブラウザで実行されているテストを確認できます。また、プロジェクト内に cypress フォルダーが作成され、そこにすべてのテストと構成が保存されます。

4.記述関数を使用してテストをグループ化する

Cypress (および Jest) では、describe を使用して、同じスイートまたはモジュールの一部である複数のテストをグループ化します。これは、より構造化された方法でテストを整理するのに役立ちます。

npx cypress open

上記の例では:

• describe は、ログイン関連のテストをグループ化するために使用されます。
• it は、グループ内の特定のテストを定義します。その中に続くのは、検証 (テスト ステップ) を実行するコードです。

5. it 関数の使用

it 関数は、個々のテスト ケースを定義するために使用されます。各テスト ケースは独立しており、アプリケーションの特定の機能または動作を表す必要があります。

6. cy.get 関数による要素の取得

cy.get 関数は、テストで操作するページ要素を選択するために使用されます。

例:

describe('Teste de Login', () => {
  it('Deve realizar o login com sucesso', () => {
    cy.visit('https://exemplo.com/login');
    cy.get('input[name="username"]').type('usuario');
    cy.get('input[name="password"]').type('senha123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

ここで、cy.get は、name="username" の入力と type="submit" の送信ボタンを検索し、type と をクリックします。

7. VScode とオートコンプリートの概要

VSCode を使用してテストを編集し、Cypress オートコンプリートを活用することができます。これにより、入力時にメソッドやコマンドが提案されるため、テストを正しく作成することが簡単になります。

8.階層関係の使用

Cypress では、より複雑な CSS セレクターを使用して、ページ階層に基づいて要素を選択できます。たとえば、特定のクラスを持つ div 内のボタンを選択できます:

cy.get('input[name="username"]').type('usuario');
cy.get('button[type="submit"]').click();

9.フィルタリング テストの構築

フィルタリング テストの例としては、フィルタを適用したときに項目のリストが正しく更新されるかどうかを確認することが挙げられます。 Cypress を使用すると、フィルターを操作して結果を確認することで、このタイプのテストを簡単に実行できます。

cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica

10. beforeEach 関数の使用

beforeEach 関数は、各テストの前にアプリケーションの状態を構成するのに役立ちます。これは、テストを実行する前にアプリケーションが初期状態であることを確認する必要がある場合に特に重要です。

npm install cypress --save-dev

11. Cypress の戻り値の型を知る

Cypress は Promises を使用して非同期時間を管理しますが、これらの Promise は自動的に処理されるため、テストが簡単になります。 Cypress が内部でこれを処理するため、多くの場合、await または .then() を使用する必要はありません。

12.コードを整理して行数を減らす

テストを整理して再利用可能な状態に保つことが不可欠です。ヘルパー関数を作成し、コード スニペットを再利用できます。

例:

npx cypress open

13. Cypress の追加機能を知る

• スクリーンショットの取得: サイプレスはテスト中に自動的にスクリーンショットを取得できます。これは、テストが失敗したときに何が起こったかを視覚化するのに役立ちます。

describe('Teste de Login', () => {
  it('Deve realizar o login com sucesso', () => {
    cy.visit('https://exemplo.com/login');
    cy.get('input[name="username"]').type('usuario');
    cy.get('input[name="password"]').type('senha123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

• レポートの生成: Cypress を使用すると、テスト実行レポートを生成でき、結果の分析が容易になります。

• Cypress Run: ヘッドレス モード (グラフィカル インターフェイスなし) でテストを実行するには、次のコマンドを使用します。
  

cy.get('input[name="username"]').type('usuario');
cy.get('button[type="submit"]').click();

• HTTP リクエスト モッキング: 実際に呼び出しを行わなくても、Cypress を使用してサーバー応答をシミュレートできます。これは、特定のデータを使用してシナリオをテストする場合に役立ちます。

cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica

14. Service Worker (MSW) インストールのモック

Mock Service Worker は、テストで HTTP リクエストをインターセプトできるツールです。 Cypress と併用してリクエストをシミュレートし、レスポンスを制御できます。

cy.get('.filter').select('Option 1');
cy.get('.item-list').should('have.length', 5);

その後、リクエストをインターセプトするようにネットワーク ハンドラーを構成できます。

---

結論

モジュール 34 では、Cypress を使用してアプリケーションで E2E テストを実行し、実際の使用状況で正しく動作することを確認する方法を学びました。 Cypress の設定、テストの作成、ページ要素の操作、beforeEach、cy.get、スクリーンショット、レポートなどの機能の使用方法を学びました。これらのテストは、アプリケーションが正しく動作し、新しいバグが導入されていないことを確認するために非常に重要です。

以上がEcom サイプレスのテストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。