【コンテナ】CypressによるE2Eテストを試してみた

cypress-logo Software

概要

E2Eテストとは

E2Eテスト(End-to-Endテスト)は、
アプリケーション全体を実際のユーザーシナリオに沿ってテストする方法の一つです。

このタイプのテストでは、
アプリケーションが実際のユーザーの操作と同様に振る舞うかどうかを確認します。

E2Eテストは、アプリケーションのさまざまなコンポーネントと
機能が期待どおりに機能することを保証するのに役立ち、
バグの早期発見や品質向上に貢献します。

Cypressとは

Cypressは、E2Eテストを簡単に作成、実行し、
デバッグするためのオープンソースのJavaScriptテストフレームワークです。
Cypressは、Webアプリケーションのテストをブラウザ内で行い、
デベロッパーエクスペリエンスを重視して設計されています。
そのため、テストの作成が直感的で、テストの実行とデバッグも効率的に行えます。

Cypressの特徴:

  • リアルタイムでのテスト実行と自動リロード
  • デバッガビリティの向上
  • アサーションとスパイの統合
  • モックとスタブのサポート
  • CI/CDツールとの統合

E2EというとSeleniumが有名ですが、
今、Typescriptで開発をしており、
テストも同じ言語で書けるといいなと思って探したところ
Cypressが良さそうでしたので、
この記事では、Cypressを使用してE2Eテスト実行を試し、
その導入方法をお伝えしようと思います。

環境のセットアップ

今回はコンテナを使います。
cypressのイメージもあり、便利です!
cypress、typescriptの追加と初期化処理までやってます。

FROM cypress/base:20.6.1
WORKDIR /app
RUN yarn add -D cypress typescript
RUN yarn tsc --init --types cypress --lib dom,es6
RUN npx cypress verify

テスト対象のWebサイトとCypressを立ち上げます。

version: '3'
services:
  web-app:
    build:
      context: .
      dockerfile: Dockerfile
    image: 【テスト対象コンテナのホスト名】
    container_name: 【テスト対象コンテナのホスト名】
    volumes:
      - ./web-app:/app
    tty: true
    ports:
      - 3000:3000
  e2e:
    build:
      context: ./cypress
      dockerfile: ./Dockerfile
    container_name: 【テスト対象コンテナのホスト名】-e2e
    tty: true
    depends_on:
      - web-app
    volumes:
      - ./e2e/cypress:/app/cypress
      - ./e2e/cypress.config.ts:/app/cypress.config.ts
      - ./e2e/results:/results

設定

videoをTrueにするとテスト時に動画(mp4)を撮影してくれます。
baseUrlでテスト対象のWebサイトを指定。
今回はこちらもコンテナベース、今開発中のアプリです。
specPatternでどこにテストファイルを置くかを指定。
今回はローカルのフォルダをマウントしてます。

import { defineConfig } from 'cypress'

export default defineConfig({
 e2e:{
    video: true,
    baseUrl: "http://【テスト対象コンテナのホスト名】:3000",
    supportFile: false,
    specPattern: 'cypress/spec/**/*.cy.ts'
  }
})

テストの書き方

Webサイトのルートである/ = “http://【テスト対象コンテナのホスト名】:3000”
にアクセスして、h1タグを取得し、それが
Web App Titleを含むかを見ています。

describe('The Top Page', () => {
    it('successfully loads', () => {
      cy.visit('/')
      cy.get('h1')
      .should('contain.text', 'Web App Title')
    })
  })

実行結果

コンテナに入って、npx cypress runで実行すると
以下のような感じに!テスト通ってますね。
今後もう少し使い込んだら、記事に追記します。

参考になれば幸いです!

コメント

タイトルとURLをコピーしました