概要
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”
にアクセスして、h１タグを取得し、それが
Web App Titleを含むかを見ています。
describe('The Top Page', () => {
it('successfully loads', () => {
cy.visit('/')
cy.get('h1')
.should('contain.text', 'Web App Title')
})
})実行結果
コンテナに入って、npx cypress runで実行すると
以下のような感じに！テスト通ってますね。
今後もう少し使い込んだら、記事に追記します。
参考になれば幸いです！
