M

MLOG

日本語

強力なエンドツーエンドテストフレームワークであるCypressの包括的なガイド。インストール、テストの作成、デバッグ、CI/CD統合、およびベストプラクティスについて説明します。

Cypress: Webアプリケーションのための究極のエンドツーエンドテストガイド

今日の急速に進化するWeb開発の状況において、Webアプリケーションの品質と信頼性を確保することは最も重要です。エンドツーエンド（E2E）テストは、アプリケーションのすべてのコンポーネントがユーザーの視点からシームレスに連携して動作することを確認する上で重要な役割を果たします。Cypressは、開発者にとって使いやすいエクスペリエンス、強力な機能、および優れたパフォーマンスを提供する、主要なE2Eテストフレームワークとして登場しました。この包括的なガイドでは、Cypressを使い始め、Webアプリケーションを効果的にテストするために知っておくべきことをすべて説明します。

Cypressとは？

Cypressは、現代のWeb向けに構築された次世代のフロントエンドテストツールです。ブラウザでテストを実行する従来のテストフレームワークとは異なり、Cypressはブラウザ内で直接動作し、アプリケーションの動作に対する比類のない制御と可視性を提供します。高速で信頼性が高く、使いやすいように設計されており、世界中の開発者やQAエンジニアの間で人気のある選択肢となっています。CypressはJavaScriptで記述されており、ブラウザ内で実行されるため、非常にパフォーマンスが高く、アプリケーションの内部への比類のないアクセスを提供します。

Cypressを使用する主な利点

インストールとセットアップ

Cypressの開始は簡単です。インストール方法は次のとおりです。

  1. 前提条件: システムにNode.jsとnpm（Node Package Manager）がインストールされていることを確認します。これらは、公式のNode.js Webサイトからダウンロードできます。
  2. Cypressのインストール: ターミナルまたはコマンドプロンプトを開き、プロジェクトディレクトリに移動して、次のコマンドを実行します。
    3. npm install cypress --save-dev
  3. Cypressを開く: インストールが完了したら、次を実行してCypress Test Runnerを開くことができます。
    4. npx cypress open

    このコマンドはCypress Test Runnerを起動し、テストの実行とデバッグのためのグラフィカルインターフェイスを提供します。

最初のCypressテストの作成

Webサイトのホームページが正しく読み込まれることを確認するための簡単なテストを作成しましょう。プロジェクトの`cypress/e2e`ディレクトリに`example.cy.js`という名前の新しいファイルを作成します。


// cypress/e2e/example.cy.js

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

このテストを分解してみましょう。

このテストをCypress Test Runnerで実行して、動作を確認してください。ブラウザがCypress Kitchen Sink Webサイトに移動し、「type」リンクをクリックして、URLを確認する必要があります。

Cypressコマンド

Cypressは、アプリケーションと対話するための幅広いコマンドを提供します。最も一般的に使用されるコマンドを次に示します。

これらは、Cypressで使用できる多くのコマンドのほんの一部です。コマンドとそのオプションの完全なリストについては、Cypressドキュメントを参照してください。

Cypressのアサーション

アサーションは、アプリケーションの期待される動作を検証するために使用されます。Cypressは、要素の状態、URL、タイトルなどを確認するために使用できる豊富な組み込みアサーションセットを提供します。アサーションは、`.should()`メソッドを使用してCypressコマンドの後にチェーンされます。

一般的なアサーションの例を次に示します。

特定のニーズに合わせてカスタムアサーションを作成することもできます。

Cypressテストを作成するためのベストプラクティス

ベストプラクティスに従うと、より保守性、信頼性、効率性の高いCypressテストを作成できます。いくつかの推奨事項を次に示します。

高度なCypressテクニック

スタブとモック

Cypressを使用すると、ネットワークリクエストとレスポンスをスタブできるため、さまざまなシナリオをシミュレートし、アプリケーションのエラー処理をテストできます。これは、外部APIまたはサービスに依存する機能をテストする場合に特に役立ちます。

ネットワークリクエストをスタブするには、`cy.intercept()`コマンドを使用できます。たとえば、次のコードは、`/api/users`へのGETリクエストをスタブし、モックレスポンスを返します。


cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

次に、`cy.wait('@getUsers')`を使用してインターセプトされたリクエストを待機し、アプリケーションがモックレスポンスを正しく処理することを確認できます。

ローカルストレージとCookieの操作

Cypressは、ローカルストレージとCookieを操作するためのコマンドを提供します。これらのコマンドを使用して、テストでローカルストレージとCookieを設定、取得、およびクリアできます。

ローカルストレージアイテムを設定するには、`cy.window()`コマンドを使用してwindowオブジェクトにアクセスし、`localStorage.setItem()`メソッドを使用します。例えば：


cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

ローカルストレージアイテムを取得するには、`cy.window()`コマンドを使用して、`localStorage.getItem()`メソッドを使用します。例えば：


cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

Cookieを設定するには、`cy.setCookie()`コマンドを使用できます。例えば：


cy.setCookie('myCookie', 'myCookieValue')

Cookieを取得するには、`cy.getCookie()`コマンドを使用できます。例えば：


cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

ファイルアップロードの処理

Cypressは、テストでのファイルアップロードを簡素化する`cypress-file-upload`というプラグインを提供します。プラグインをインストールするには、次のコマンドを実行します。

npm install -D cypress-file-upload

次に、次の行を`cypress/support/commands.js`ファイルに追加します。


import 'cypress-file-upload';

次に、`cy.uploadFile()`コマンドを使用してファイルをアップロードできます。例えば：


cy.get('input[type="file"]').attachFile('example.txt')

IFrameの操作

IFrameのテストは難しい場合がありますが、CypressはIFrameを操作する方法を提供します。`cy.frameLoaded()`コマンドを使用してIFrameのロードを待機し、`cy.iframe()`コマンドを使用してIFrameのdocumentオブジェクトを取得できます。


cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

Cypressと継続的インテグレーション/継続的デプロイメント（CI/CD）

アプリケーションの品質を確保するには、CypressをCI/CDパイプラインに統合することが不可欠です。CI/CD環境でCypressテストをヘッドレスモードで実行できます。方法は次のとおりです。

  1. Cypressのインストール: Cypressがプロジェクトの依存関係としてインストールされていることを確認します。
  2. CI/CDの構成: 各ビルド後にCypressテストを実行するようにCI/CDパイプラインを構成します。
  3. Cypressをヘッドレスで実行する: `cypress run`コマンドを使用して、Cypressテストをヘッドレスモードで実行します。

CI/CD構成の例（GitHub Actionsを使用）：


name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

この構成は、コードが`main`ブランチにプッシュされるか、`main`ブランチに対してプルリクエストが作成されるたびにCypressテストを実行します。`cypress-io/github-action`アクションは、GitHub ActionsでのCypressテストの実行プロセスを簡素化します。

Cypressテストのデバッグ

Cypressは、テストの問題を特定して修正するのに役立つ優れたデバッグツールを提供します。Cypressテストをデバッグするためのヒントを次に示します。

Cypressと他のテストフレームワーク

Cypressは強力なエンドツーエンドテストフレームワークですが、他の一般的なオプションと比較してどのように機能するかを理解することが重要です。簡単な概要を次に示します。

フレームワークの選択は、プロジェクトの特定のニーズと要件によって異なります。Cypressは、高速で信頼性が高く、開発者にとって使いやすいエンドツーエンドテストを必要とする最新のWebアプリケーションに最適です。

Cypressの実際の使用例

Cypressを使用してさまざまな種類のWebアプリケーションをテストする方法の実際の例をいくつか見てみましょう。

Eコマースアプリケーションのテスト

Cypressを使用して、Eコマースアプリケーションのさまざまなユーザフローをテストできます。例：

ユーザーが正常に製品をカートに追加できることを確認するCypressテストの例を次に示します。


it('カートに製品を追加する', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

ソーシャルメディアアプリケーションのテスト

Cypressを使用して、ソーシャルメディアアプリケーションでのユーザーインタラクションをテストできます。例：

ユーザーが新しい投稿を正常に作成できることを確認するCypressテストの例を次に示します。


it('新しい投稿を作成する', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hello, world!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hello, world!')
})

銀行アプリケーションのテスト

銀行アプリケーションの場合、Cypressを使用して、次のような重要な機能をテストできます。

送金を確認するテストは、次のようになります（セキュリティのために適切なスタブを使用）。


it('送金を正常に行う', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

結論

Cypressは、Webアプリケーションの品質と信頼性を確保するのに役立つ、強力で用途の広いエンドツーエンドテストフレームワークです。開発者にとって使いやすいAPI、強力な機能、および優れたパフォーマンスにより、世界中の開発者やQAエンジニアの間で人気のある選択肢となっています。このガイドで概説されているベストプラクティスに従うことで、開発プロセスの早い段階でバグをキャッチし、高品質のソフトウェアをユーザーに提供するのに役立つ効果的なCypressテストを作成できます。

Webアプリケーションが進化し続けるにつれて、エンドツーエンドテストの重要性はますます高まります。Cypressを採用し、開発ワークフローに統合することで、より堅牢で信頼性が高く、ユーザーフレンドリーなWebエクスペリエンスを構築できます。