Autifyの弱点をCypressで補完：ノーコード × コードベースで実現するE2Eテスト戦略

参考になった

会員限定コンテンツです。無料登録すると制限なしでお読みいただけます。

無料登録してアーキテクチャを見る

レビュー投稿日の情報になります

株式会社kickflow / otouhujej

EM / QAエンジニア / 従業員規模: 51名〜100名 / エンジニア組織: 11名〜50名

最終更新日2025/12/22投稿日2025/12/23

利用プラン	利用機能	ツールの利用規模	ツールの利用開始時期	事業形態
Team Plan	Cypress Cloud	10名以下	2023年7月	B to B

利用プラン	Team Plan
利用機能	Cypress Cloud
ツールの利用規模	10名以下
ツールの利用開始時期	2023年7月
事業形態	B to B

アーキテクチャ

会員限定コンテンツ無料登録してアーキテクチャを見る

アーキテクチャの意図・工夫

カスタムコマンドの活用：cy.login()、cy.createTicket()、cy.apiRequest() など業務固有の操作を抽象化し、テストコードの重複を削減
TypeScript採用：型安全性により、テストコードの信頼性と保守性を向上
フィクスチャによるテストデータ管理：テストデータをJSONファイルで一元管理し、再利用性を確保
セレクターの定数化：テストファイル内でSELECTORS定数として一元管理し、UI変更時の修正箇所を局所化

導入の背景・解決したかった問題

導入背景

ツール導入前の課題

SaaS型ワークフローシステムの複雑な機能（管理センター、ダッシュボード、外部連携など）を手動でテストするには膨大な時間がかかっていた
機能追加のたびにテスト対象が増加し、毎朝リリースがあるため回帰テストの自動化が必須だった
メインで使用しているAutifyでは実装が難しい・不安定になるテストケースへの対応が必要だった

どのような状態を目指していたか

Autifyで実装困難なテスト（AIオプション機能など、毎回出力が異なるテスト、同一画面で似た操作を繰り返すテスト）をカバーしたい
定期的な自動テスト実行により、継続的な品質保証を実現したい
コードベースで柔軟にカスタマイズできるE2Eテスト基盤を構築したい

比較検討したサービス

Playwright
Puppeteer
WebdriverIO
TestCafe

比較した軸

デバッグのしやすさ（テスト失敗時の原因特定の容易さ）
並列実行による高速化の仕組み
CI/CD（GitHub Actions）との連携の容易さ
ドキュメントの充実度とコミュニティの活発さ
日本語環境・タイムゾーン設定への対応

選定理由

Time Travel機能によるデバッグの容易さ：テスト実行の各ステップをスナップショットで確認でき、失敗原因の特定が直感的
Cypress Cloudによる並列実行：テスト実行時間を75%削減できる見込みがあった
豊富なカスタムコマンド機能：cy.login()やcy.createTicket() など、業務固有の操作を抽象化しやすい
リアルタイムリロード：テストコード変更時に即座に再実行され、開発体験が良い
公式ドキュメントの質の高さとTypeScriptサポート

導入の成果

改善したかった課題はどれくらい解決されたか

テストカバレッジの大幅拡大：2〜3か月で103ファイル、457テストケースを構築し、主要機能を網羅的にカバー
継続的な品質検証の実現：手動では1回あたり12時間以上かかるテストを、毎日22分で自動実行
監査ログテストの体系化：39ファイルの監査ログテストにより、セキュリティ・コンプライアンス要件を継続的に検証

どのような成果が得られたか

定期自動実行の確立：平日毎朝1時にスケジュール実行し、問題を早期検知できる体制を構築
テスト実行の高速化：4並列実行により、約22分で全457テストを完了（1並列比73%短縮）
Slack通知による即時フィードバック：テスト結果を即座にチームへ共有、問題対応の迅速化
ROI試算：理論上、年間約3,000時間相当のテスト工数を自動化

導入時の苦労・悩み

ブラウザの言語設定：Ubuntu環境でテスト実行時にブラウザが英語表示になる問題があり、Chrome起動引数（--lang=ja、 --accept-lang）やLANG環境変数の設定で対応
Basic認証対応：テスト環境にBasic認証がかかっており、cy.visit()時の認証ヘッダー設定に試行錯誤
非同期処理の待機：SPAの動的コンテンツに対する適切な待機処理の設計（cy.intercept()の活用）
CI環境での安定性：GitHub Actionsでのヘッドレス実行時に、ローカルでは発生しないフレイキーテストへの対処

導入に向けた社内への説明

上長・チームへの説明

Autifyとの補完関係
- メインのAutifyでカバーできないテストケースをCypressで補完
- ノーコード（Autify）とコードベース（Cypress）の適材適所な使い分け
コードベースならではの柔軟性
- AIオプション機能など、毎回出力が異なるテストへの対応
- 「10回中8回以上成功ならOK」のような確率的なテストの実装
コスト最適化
- Cypress Cloud連携は定期実行のみに限定し、手動実行は自作並列スクリプトで対応
- Autifyと併用することで、それぞれの強みを活かしたテスト戦略
段階的導入アプローチ
- Autifyで不安定なテストから優先的にCypressへ移行

活用方法

定期実行（Cypress Cloud連携）：平日毎朝1時にスケジュール実行。並列実行・Slack通知はCypress Cloudが担当
手動トリガー実行（Cypress Cloud非連携）：テスト実装中の動作確認や nightly の定期実行以外でテストを実行するときはCypress Cloudに連携せず、自作の並列実行スクリプトとSlack通知を使用
使い分けの理由：Cypress Cloudは使用量に応じて追加課金が発生するため、定期実行以外は自作の並列実行を活用してコストを最適化
失敗テスト再実行：cypress-retry-failed.ymlで失敗したテストのみ再実行
ローカル開発：cypress:openでCypressのGUIを起動して新規テスト作成やデバッグ

よく使う機能

Cypress Cloud（定期実行用）
- テストファイルを複数ワーカーに自動分散し、実行時間を大幅短縮
- テスト結果の可視化とトレンド分析
- Slack通知との連携
自作並列実行スクリプト（手動実行用）
- Cypress Cloudを使わずに並列実行を実現
- 追加課金を抑えつつ高速なテスト実行が可能
カスタムコマンド
- cy.login()：認証処理の抽象化（Basic認証対応）
- cy.createTicket()：API経由でのテストデータ生成
- cy.apiRequest()：認証付きAPIリクエストの共通化
Time Travel（デバッグ機能）
- 各ステップのスナップショットでテスト失敗時の原因特定が容易
cy.intercept()
- ネットワークリクエストの監視・スタブ化でSPAの非同期処理に対応

ツールの良い点

Time Travel機能による直感的なデバッグ体験
Cypress Cloudによる並列実行と結果可視化
豊富なカスタムコマンド機能で業務ロジックを抽象化可能
公式ドキュメントの質の高さと活発なコミュニティ
CI/CD統合の容易さ（GitHub Actions対応が充実）

ツールの課題点

複数タブ・複数ウィンドウのテストが困難
iframeの操作に制約がある
CI環境のようなネットワーク遅延が大きい環境でのフレイキーテスト対策が必要
Cypress Cloudはプランによっては使用量に応じて追加課金が発生するため、コスト管理が必要

ツールを検討されている方へ

まずは小さく始める：重要度の高い機能（ログイン、コア機能）から自動化を開始し、成功体験を積んでから範囲を拡大することをお勧めする
カスタムコマンドを早期に設計：共通操作（ログイン、データ作成など）は早い段階でカスタムコマンド化しておくと、後々の保守が楽になる
CI/CD統合を見据えた設計：ローカル実行だけでなく、最初からCI環境での実行を想定した設計（環境変数、タイムアウト設定など）をお勧めする
Cypress Cloudの活用検討：テスト数が増えてきたら並列実行は必須。ただし使用量に応じた課金があるため、定期実行とそれ以外で使い分けるとコスト最適化できる
ローカル並列実行の併用：Cypress Cloudを使わない並列実行スクリプトを用意しておくと、開発中の検証でコストを抑えられる
フレイキーテスト対策：適切な待機処理（cy.intercept()の活用）と、リトライ戦略の設計が安定運用の鍵である