【Day 5】Web環境構築 - CypressでE2Eテスト実行

はじめに

---

2023年アドベントカレンダー5日目です。

前回の続きで「開発者はWebの開発を進めることができる」を進めていきます。

Cypress

Cypressとは

Cypressとは、ウェブアプリケーションのエンドツーエンドテストに特化したJavaScriptベースのテストツールです。

事前準備

パッケージ

起動に必要なパッケージをインストールしていきます。

apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2 libxtst6 xauth xvfb

chrome

chromeでの動作を想定したいので、chromeをインストールします。

sudo apt update && sudo apt -y upgrade && sudo apt -y autoremove
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt -y install ./google-chrome-stable_current_amd64.deb

フォント

日本語が文字化けしてしまうために、フォントをインストールします。

sudo apt install fonts-noto

ここまでで事前準備は終了です。

install

TypeScriptで開発していきたいので、こちらの手順を追っていきます。

e2e/web/

npm init -y
npm install --save-dev cypress typescript

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

cypressの起動、E2Eテスト実行のスクリプトを設定します

package.json

  "scripts": {
-   "test": "echo \"Error: no test specified\" && exit 1"
+   "cypress:open": "cypress open",
+   "test:e2e": "cypress run --e2e chrome"
  }

Setting

npm run cypress:open

• このような画面が自動で開きますので、E2E Testingを選択
  

• Configファイルの生成するかどうか聞かれるので、そのままContinue
  

• テストするブラウザを選ばされるので、先ほどインストールしたChromeを選択し、Start E2E Testing in Chrome
  

• このような画面がでたらOKなので、一度終了します。
  

configにアプリのbaseUrlを設定します

cypress.config.ts

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
+   baseUrl: 'http://localhost:3000',
  },
})

これでCypressでのE2Eテストの準備が整いました。
次はWeb開発時の、Bffのモックサーバーをセットアップしていきます。