こんにちは！開発チームの背中をそっと、しかし力強く押す「先輩エンジニア」の私です。
毎日のようにコードを書き、いざ「デプロイだ！」と意気込んだ瞬間に、「あれ、ログイン機能が動かない…？」「決済ボタンが反応しない…？」なんて青ざめた経験、ありませんか？
ユニットテスト（単体テスト）がどれだけ緑色（成功）に染まっていても、「ユーザーが実際にブラウザを操作する一連の流れ」が壊れていては、本番リリースなんて怖くてできませんよね。
そこで今回マスターするのが、「CircleCI × Cypress」によるE2E（エンド・ツー・エンド）テストの自動化です。
これを導入すれば、あなたが寝ている間にでも、自動でブラウザが立ち上がり、ユーザーと同じ動きをしてアプリの健康状態をチェックしてくれます。「今日もテストが全緑でした」という通知をSlackで受け取りながらコーヒーをすする……そんな優雅な開発ライフ、手に入れたくありませんか？
それでは、一緒に一歩ずつ、確実に進めていきましょう！
—
1. そもそも「CircleCI」と「Cypress」って何をするもの？
まずは、今回主役となる2つのツールの役割をサクッと整理しておきましょう。
- CircleCI（サークルシー）とは？
- 「あなたの代わりに働く、超優秀なロボット執事」です。
- GitHubにコードを「プッシュ（保存）」した瞬間に、「よし、テストの時間だな！」と自動で立ち上がり、ビルドやテストを行ってくれるクラウド上の仕組み（CI/CDツール）です。
- Cypress（サイプレス）とは？
- 「画面の動きを完璧に再現してくれる、超高速なロボットテスター」です。
- 人間のかわりに本物のブラウザ（Chromeなど）を操作し、「ボタンをクリックする」「文字を入力する」「画面が切り替わるか確認する」といったE2Eテストを爆速で実行してくれます。
この2つを組み合わせることで、「GitHubにコードを上げる ➔ CircleCIが自動でCypressを起動 ➔ ブラウザテストで品質を担保 ➔ 結果をSlackでお知らせ」という、現代の最強開発フローが完成します。
—
2. 基礎セットアップ：プロジェクトの土台を作ろう
まずは、あなたの手元のプロジェクト（今回はNode.js/Webアプリを想定します）にCypressを導入し、手元で動く状態を作ります。
ステップ1: Cypressのインストール
プロジェクトのルートディレクトリ（ターミナルで作業する場所）で、以下のコマンドを叩いてください。
開発用依存関係としてCypressをインストール
npm install cypress –save-dev
インストールが終わったら、一度手元でCypressを起動してみましょう。
npx cypress open
画面が立ち上がり、対話形式でテストを作成・実行できます。今回はすでにテストコード（例: `app.cy.js` など）がホーム画面やログイン画面をテストする形であるものとして、先に進みましょう。
ステップ2: CircleCIの設定ファイルを用意する
次に、CircleCIに「どういう手順でテストしてほしいか」を教えるための設定ファイルを作ります。
プロジェクトのルートに `.circleci` というフォルダを作り、その中に `config.yml` という名前のファイルを作成してください。
your-project/
┣ .circleci/
┃ ┗ config.yml ✨ここを作ります！
┣ cypress/
┣ package.json
┗ …
—
3. HelloWorld的動作確認：極上のCircleCI設定ファイル
それでは、今回のハイライトである `config.yml` を書いていきましょう。
Cypress公式が提供している専用のDockerイメージを使うことで、面倒なブラウザのインストールなどを一切せず、一発でテスト環境が整います。
以下のコードをそのまま `.circleci/config.yml` に貼り付けてみてください。一行ずつ丁寧なコメントを入れています。
version: 2.1
Cypressを実行するための専用環境（Executor）を定義します
executors:
cypress-executor:
# Cypress公式が提供する、Nodeとブラウザがあらかじめ入った超便利イメージ
docker:
- image: cypress/included:13.6.0
working_directory: ~/project
jobs:
e2e-test:
executor: cypress-executor
steps:
# 1. GitHubからコードをCircleCI上に持ってくる
- checkout
# 2. 依存関係（node_modules）をキャッシュから復元（ビルドを速くする技！）
- restore_cache:
keys:
- v1-deps-{{ checksum “package-lock.json” }}
- v1-deps-
# 3. ライブラリのインストール
- run:
name: Install Dependencies
command: npm ci
# 4. キャッシュを保存（次回のテストを爆速にするため）
- save_cache:
paths:
- ~/.npm
- ~/.cache
key: v1-deps-{{ checksum “package-lock.json” }}
# 5. 【心臓部】CypressによるE2Eテストの実行！
# （※あらかじめアプリを起動しておく必要がある場合は、バックグラウンドで起動するコマンドをここに挟みます）
- run:
name: Run E2E Tests
command: npx cypress run
# 6. テストが失敗したときに、画面のスクリーンショットや動画を保存する（デバッグに必須！）
- store_artifacts:
path: cypress/screenshots
- store_artifacts:
path: cypress/videos
workflows:
version: 2
test-workflow:
jobs:
- e2e-test
これをGitHubにプッシュしてCircleCIのダッシュボードを覗いてみてください。
緑色のバーがスルスルと進み、Cypressがブラウザテストをクリアしていく様子が見られたら……見事、HelloWorld（基礎動作確認）の成功です！おめでとうございます！
—
4. さらに実戦的へ：Slack通知でチームの安心感を最大化する
「テストが成功した」「あるいは失敗してデプロイが止まった」という情報を、わざわざCircleCIの画面に見に行くだけなんてナンセンスです。Slackに通知を飛ばして、チーム全員で状況を共有しましょう。
CircleCIには、公式の便利な「Slackオーブ（部品）」が用意されています。これを使えば、わずか数行でSlack連携が完了します。
設定手順
1. Slack側での準備: SlackのApp Directoryから「CircleCI」アプリを追加し、通知を飛ばしたいチャンネルのWebhook URL（またはCircleCIインテグレーション）を取得します。
2. CircleCIでの環境変数設定:
- CircleCIのダッシュボードから、該当プロジェクトの Project Settings > Environment Variables を開きます。
- 新規変数として、名前に `SLACK_WEBHOOK`、値に取得したSlackのWebhook URLを登録します（コードに直接URLを書かないのがセキュリティの鉄則です！）。
3. `config.yml` のアップデート:
先ほどの `.circleci/config.yml` の冒頭と最後に、Slack連携の記述を追加します。
version: 2.1
外部の便利な部品（オーブ）を読み込みます
orbs:
slack: circleci/slack@4.12.0
executors:
cypress-executor:
docker:
- image: cypress/included:13.6.0
working_directory: ~/project
jobs:
e2e-test:
executor: cypress-executor
steps:
- checkout
- restore_cache:
keys:
- v1-deps-{{ checksum “package-lock.json” }}
- v1-deps-
- run:
name: Install Dependencies
command: npm ci
- save_cache:
paths:
- ~/.npm
- ~/.cache
key: v1-deps-{{ checksum “package-lock.json” }}
- run:
name: Run E2E Tests
command: npx cypress run
# 【追加】テストが万が一失敗したときにSlackへ通知する！
- slack/notify:
event: fail
template: basic_fail_1
custom: |
{
“blocks”: [
{
“type”: “section”,
“text”: {
“type”: “mrkdwn”,
“text”: “🚨 E2Eテストが失敗しました！ \n修正を急ぎましょう。\n<${CIRCLE_BUILD_URL}|ビルド詳細を確認する>”
}
}
]
}
workflows:
version: 2
test-workflow:
jobs:
- e2e-test
これで、もしテストがコケた瞬間にSlackへアラートが飛び、チームメンバーがすぐに気づける体制が整いました。
—
まとめ：自動化は、エンジニアの自由な時間を生み出すためにある
お疲れ様でした！ここまで設定できれば、あなたのプロジェクトの品質担保レベルは、手動テストをしていた頃とは比べ物にならないほど高くなっています。
- CircleCIが自動でテストの土台を整え、
- Cypressが人間のかわりに画面の隅々までチェックし、
- 万が一のときはSlackがすぐに教えてくれる。
この仕組みがあるだけで、「あそこのリンク、ちゃんと動くっけ……？」というリリース前の不毛な不安から完全に解放されます。
これをマスターすれば、毎日の作業やリリース作業が劇的に楽になりますよ。ぜひあなたのプロジェクトでも試してみてくださいね。それでは、快適な自動化ライフを！