ノーコードからコードベースへの移行と統合
参考になった
1
株式会社kickflow / otouhujej
EM / QAエンジニア / 従業員規模: 51名〜100名 / エンジニア組織: 11名〜50名
| 利用プラン | 利用機能 | ツールの利用規模 | ツールの利用開始時期 | 事業形態 |
|---|---|---|---|---|
OSS（無料） | テスト実行（playwright test）、UIモード、トレースビューア、シャード並列実行、スクリーンショット・ビデオ記録 | 10名以下 | 2025年10月 | B to B |
| 利用プラン | OSS（無料） |
|---|---|
| 利用機能 | テスト実行（playwright test）、UIモード、トレースビューア、シャード並列実行、スクリーンショット・ビデオ記録 |
| ツールの利用規模 | 10名以下 |
| ツールの利用開始時期 | 2025年10月 |
| 事業形態 | B to B |
アーキテクチャ
アーキテクチャの意図・工夫
- Autify・Cypressで運用していた既存のE2Eテストを段階的にPlaywrightへ統合し、単一フレームワークでの一元管理を実現
- GitHub Actionsで12シャード並列実行し、449件のテストを効率的に回す
- テスト結果はGCS上のカスタムレポートシステム（ステップスクリーンショットレポート）で管理し、ステップスクリーンショットや実行時間の推移を可視化
- Slack通知で結果を即座にチームへ共有
導入の背景・解決したかった問題
導入背景
Autifyのノーコードテストは立ち上げが速かった一方、シナリオ数が300件を超えるとUI変更時のメンテナンスコストが増大していた。 Cypressでもテストを運用していたが、2つのE2Eツールが並行稼動しておりナレッジが分散していた。 テスト実行時間が長くCI全体のボトルネックになっていたことに加え、Page Object Modelのような再利用可能な設計パターンをAutifyでは適用しにくかった。
単一のフレームワークでE2Eテストを統合管理しナレッジを集約すること、コードベースの設計パターン（POM）で保守性を高めること、並列実行・シャード分割でCI実行時間を短縮すること、「N回中M回以上成功」のようなノーコードでは難しかったテストもカバーすることを目指していた。
比較検討したサービス
- Autify（既存利用ツール）
- Cypress（既存利用ツール）
比較した軸
- テスト資産の保守性：UI変更時の修正コストが1箇所で済むか
- 並列実行・CI統合：GitHub Actionsとのネイティブ統合ができるか
- テスト範囲の拡張性：メール検証・APIテスト・外部連携テストに対応できるか
- TypeScript対応：型安全にテストを記述できるか
- コスト：OSSで追加ライセンス費用がかからないか
選定理由
- Page Object Patternが自然に適用でき、Vuetifyコンポーネント操作を共通ヘルパー化することで、UI変更時の修正を1箇所に集約できる
- GitHub Actionsとのネイティブ統合により、シャード並列実行やリトライを柔軟に制御できる
- Mailosaurとの組み合わせでメール通知テストをコードベースで実現できる
- TypeScript + Playwright Testの型安全性とエディタ補完により、テスト開発の生産性が高い
- OSSのため追加ライセンスコストが不要で、ブラウザ自動化の機能が豊富
- Autify・Cypressからの段階的移行が可能（既存テストを維持しながら移行できる）
導入の成果
- 2つのツール（Autify + Cypress）に分散していたE2Eテストを Playwright に統合し、ナレッジの一元化を達成
- Page Object Pattern導入により、UI変更時の修正がヘルパー1箇所で完結するようになった
- 12シャード並列実行でCI実行時間を大幅に短縮
- メール通知テスト（Mailosaur連携）など、外部連携に関するテスト領域をカバー
- テストシナリオ449件（Autify移行344件 + Cypress移行103件 + 新規2件）を Playwright に集約
- 63のPage Objectクラスで操作を体系化し、再利用性を確保
- カスタムフィクスチャによるステップスクリーンショット自動生成で、テスト実行結果の可視性が大幅に向上
- GCS上のカスタムレポートシステム（ステップスクリーンショットレポート）により、テスト実行時間の推移やステップごとの結果を継続的にモニタリング
導入時の苦労・悩み
- Autifyの344件をPlaywrightに移行する際、ノーコードのシナリオをコードに書き直す作業量が大きかった
- Autifyでは画面操作をそのまま記録していたため、Page Objectへの分解・設計に試行錯誤が必要だった
- Vuetifyコンポーネント（combobox、selectなど）のロケーター特定に苦労し、500行超のUIヘルパーを整備した
- テスト環境の認証情報管理方針の統一（.env管理 vs テストファイル内ハードコード）のバランス調整
- 並列実行時のテスト間依存やデータ競合の排除
導入に向けた社内への説明
上長・チームへの説明
- Autifyのメンテナンスコスト増大を定量的に示し、Page Object Patternによる保守性改善の見込みを説明
- OSSのためライセンスコスト削減になること、GitHub Actionsとの統合でCI/CDパイプラインがシンプルになることを説明
- 段階的移行が可能で、既存のAutifyテストを維持しながら移行できることでリスクを最小化
- AIによるコードベースのテスト実装により、拡張・保守工数が低くなることを説明
活用方法
- 毎日深夜スケジュール実行（JST 0:00）でリグレッションテストを自動実行
- メール通知テスト（Mailosaur）で、承認・差戻し・代理申請などのメール内容を自動検証
- 失敗テストの選択的リトライワークフローで、不安定テストの再実行を効率化
よく使う機能
- test.step() + ステップスクリーンショット：各操作ステップを自動記録し、失敗時の原因特定を高速化
- Page Object Pattern：63クラスでUI操作を共通化し、メンテナンスコストを削減
- シャード並列実行：12分割でテスト実行時間を最適化（過去の実行時間ベースで負荷分散）
- expect() の自動待機：暗黙的な待機メカニズムでフレーキーテストを削減
- UIモード（--ui）：開発中の対話的デバッグで、テスト作成の生産性を向上
- トレースビューア：失敗テストのネットワーク・DOM状態をタイムラインで再現
ツールの良い点
- コードベースのため、Page Object PatternやDRY原則など、ソフトウェア設計のベストプラクティスを適用できる
- TypeScript対応で型安全にテストが書け、エディタの補完やリファクタリング機能を活用できる
- GitHub Actionsとのネイティブ統合で、シャード並列実行・リトライ・レポートアップロードを柔軟に構成できる
- 自動待機メカニズム（expect, locator）により、明示的なsleepを最小限に抑えられる
- OSSで活発なコミュニティがあり、アップデート頻度が高い
- Mailosaurなど外部ライブラリとの統合が容易で、テスト対象領域を拡張しやすい
ツールの課題点
- Vuetifyなどのコンポーネントライブラリ固有のDOM構造に対応するため、専用のUIヘルパーの整備・保守が必要
- ノーコードツールと比べてテスト作成に時間がかかる場合がある（ただし保守コストは低い）
ツールを検討されている方へ
Playwrightはコードベースのテスト自動化ツールのため、ある程度のプログラミングスキルが前提になります。以前はチームにTypeScriptを書けるメンバーが複数いないと保守が難しかったですが、いまはAIによる自動保守機能まで実装可能なので、導入のハードルは下がっていると感じます。
ノーコードツール（Autify等）で立ち上げた後、テスト数が増えてメンテナンスコストが課題になってきたタイミングでの移行先として最適です。GitHub Actionsとの相性が非常に良く、シャード並列実行やリトライの仕組みを柔軟に組めるため、CI/CDを重視するチームに向いています。
一方で、メール検証やAPI連携テストなどAutifyでは難しかった領域もカバーでき、テスト範囲を拡張できます。OSSのため導入コストは低いですが、テスト設計・UIヘルパーの整備など初期の仕組みづくりには工夫が必要です。
今後の展望
- 残存するAutifyテストの段階的なPlaywright移行を継続し、最終的にE2Eテストの完全統合を目指す
- POM（Page Object Model）マイグレーションをさらに推進し、Cypress移行テストのPage Object化を完了させる
- Claude Code等のAIツールを活用したテスト作成・レビューの効率化をさらに進める
- カスタムレポートシステム（ステップスクリーンショットレポート）の機能強化で、テスト品質の継続的なモニタリングを深化させる
株式会社kickflow / otouhujej
EM / QAエンジニア / 従業員規模: 51名〜100名 / エンジニア組織: 11名〜50名
よく見られているレビュー
株式会社kickflow / otouhujej
EM / QAエンジニア / 従業員規模: 51名〜100名 / エンジニア組織: 11名〜50名
レビューしているツール
目次
- アーキテクチャ
- 導入の背景・解決したかった問題
- 活用方法