エンジニアの皆さん、こんにちは。現場で戦う皆さんに一つ聞きたいことがあります。「E2EテストがCIで落ちた時、ログを眺めて頭を抱える時間」をどれだけ過ごしてきましたか？
ローカルでは動くのに、CI上ではなぜか失敗する。再現性の低いエラーのデバッグほど、開発者の寿命を削るものはありません。
今日は、Bitbucket Pipelinesを使いこなし、「テスト失敗時にスクリーンショットを自動で掴み、証拠として残す」という、CI/CD運用の「生存戦略」を授けます。これを実装すれば、あなたのチームのデバッグ効率は劇的に向上します。
—
1. なぜ「アーティファクト」が重要なのか？
Bitbucket Pipelinesの`artifacts`機能は、CIの実行終了後に、指定したファイルをBitbucketの管理画面上に永続的に保存する機能です。
E2Eテスト（CypressやPlaywrightなど）は、UIの変化や通信のタイミングに依存するため、実行環境の差異で「気まぐれに落ちる」ことがあります。その時、「何が画面に映っていたか」というスクリーンショットが残っていれば、原因特定は一瞬です。
2. 基本セットアップ：成功への第一歩
まずは、プロジェクトのルートディレクトリに `bitbucket-pipelines.yml` を作成します。これがパイプラインの心臓部です。
image: node:18 # プロジェクトに合わせて調整してください
pipelines:
default:
- step:
name: E2E Tests
caches:
- node
script:
- npm install
# テスト実行コマンド
- npm run test:e2e
artifacts:
# ここが魔法の場所。失敗・成功に関わらず保存されます
- cypress/screenshots/
- cypress/videos/
ポイント:
`artifacts`のパスは、テスト実行時に出力されるディレクトリと必ず一致させてください。
—
3. 【重要】失敗時のみ保存する「賢い設定」
すべてのテスト結果を保存するとストレージを圧迫します。現場で最も重宝するのは「失敗した時だけスクリーンショットが欲しい」という設定です。
`bitbucket-pipelines.yml` を少しだけ高度に書き換えます。
script:
# テストを実行し、終了コードを保持する
- npm run test:e2e || export TEST_FAILED=true
# 失敗フラグが立っていたら、何か特別な処理を挟むことも可能
- if [ “$TEST_FAILED” = “true” ]; then echo “テストが失敗しました。アーティファクトを確認してください”; exit 1; fi
Cypressの場合、デフォルトで `cypress/screenshots` に失敗時の画像が生成されます。Playwrightであれば `–reporter line,html` と併せてスクリーンショット撮影オプションを有効にするだけで、指定したディレクトリに証拠が残ります。
—
4. 精度を高める：Hello World的動作確認
いきなり巨大なテストスイートで試すのは危険です。まずは以下の手順で「証拠が残る」ことを確認しましょう。
1. 強制的にテストを落とす:
テストコードの中に、あえて `expect(true).to.equal(false)` のようなコードを1行追加します。
2. プッシュして実行:
Bitbucketにプッシュし、Pipelinesが走り出すのを待ちます。
3. Artifactsタブを確認:
パイプラインの実行画面を開き、右側にある「Artifacts」タブをクリックしてください。そこに失敗時に生成された画像がリストアップされていれば、あなたのデバッグ基盤は完成です！
—
5. 現場のシニアからのアドバイス
この仕組みを導入する際、以下の3点を意識すると「プロのCI/CD」になります。
- .gitignoreを忘れない: ローカルで生成されたスクリーンショットをGitにコミットしないよう、`.gitignore` に `cypress/screenshots/` を追加しましょう。
- キャッシュとの共存: `caches` を適切に設定して、`npm install` の時間を削ってください。デバッグの試行回数が多い時、このキャッシュが効いてきます。
- 通知と連携: 失敗したアーティファクトをSlack通知に含めることはできませんが、Pipelinesの実行結果リンクをSlackに流す設定をしておくと、チーム全員が即座に「証拠」にアクセスできます。
最後に
「自動化」とは、単に手作業を減らすことではありません。「失敗した時の恐怖を減らし、挑戦する回数を増やすこと」です。
テストが落ちた時、ログの海で溺れるのではなく、スクリーンショットを見て「ああ、これか！」と笑える余裕を持つ。そんな開発体験を、今日からBitbucket Pipelinesで手に入れてください。
何か詰まったら、いつでも聞いてくださいね。あなたのコードが今日もスムーズにデプロイされることを祈っています！