イベント「MagicPod開発におけるテスト自動化とCI」の発表資料です。 https://trident-qa.connpass.com/event/282323/
MagicPod開発におけるテスト⾃動化とCI2023.05.31MagicPod CEO 伊藤望
View Slide
About me§伊藤 望 (Ito Nozomi)§株式会社MagicPod CEO§⾃動テストツール歴:約13年§Twitter:@ito_nozomi• 著書
1. MagicPodとは2. MagicPodのシステム開発環境&体制3. MagicPod開発のテスト⾃動化4. MagicPod開発のCI運⽤Agenda
1. MagicPodとは2. MagicPodのシステム開発環境&体制3. MagicPod開発のテスト⾃動化4. MagicPod開発のCI運⽤
MagicPod§Web & モバイルアプリのE2Eテスト⾃動化SasS§ノーコードで簡単にテスト作成§柔軟性とメンテナンス性が強み(magicpod.com)1. MagicPodとは
エキスパートが作ったテストツール著者 翻訳者 コミッター1. MagicPodとは
ユーザーさんのブログ記事‧発表MagicPod実⾏後の本番デプロイを⾃動化するための⾃作GitHub ActionsみてねのE2E⾃動テスト導⼊戦略 【インターンレポート】⾃動テストを実装したら衝撃を受けた学⽣の話1. MagicPodとは実⾏⾃動E2Eテストを活⽤したデプロイフロー改善MagicPodで⾃動化率を爆上げしたハナシMagicPodのUIテストをGitHub Actionsで⾃動化してみた
1. MagicPodとは2. MagicPodの開発環境&体制3. MagicPod開発のテスト⾃動化4. MagicPod開発のCI運⽤
技術スタック2. MagicPodの開発環境&体制⾃動テストエンジンNode.js Selenium AppiumインフラAWS Dockerサーバ‧AIエンジンPython Django React TypeScript MySQL
多様なテスト実⾏環境2. MagicPodの開発環境&体制Webサーバクラウドブラウザ クラウド端末WorkerローカルPC外部クラウド
開発体制2. MagicPodの開発環境&体制新規開発1(サーバ寄り)新規開発2(⾃動テスト‧AI寄り)品質改善(ユーザートラブル)インフラ デザイナー
開発体制2. MagicPodの開発環境&体制§QA:0⼈• ただしテスト⾃動化のエキスパートは多数• 本書いている⼈とか、Selenium/Appiumコントリビュータとか§リモート + ときどき出社§読み書き(Slack、GitHub等)と朝会は英語
開発フロー2. MagicPodの開発環境&体制§アジャイル的開発§2週間ごとのスプリント & リリース§ビルド、デプロイは⾃動化
テストフロー2. MagicPodの開発環境&体制§新規開発部分は各⾃⼿動テスト§リグレッションテストは⾃動テスト§リリース前の3⽇間は社内ドッグフーディング3⽇前mainbranch次の開発featurebranchesリリース次の開発
全テスト⾃動化はできないので、絞って⾃動化3. MagicPod開発のテスト⾃動化⼿動テストとリグレッションバグの削減が⽬的
3. MagicPod開発のテスト⾃動化どのテストを⾃動化するか⾃動化コストが低いところ処理が複雑なところ重要なところ1 2 3
3. MagicPod開発のテスト⾃動化どのテストを⾃動化するか⾃動化コストが低いところ処理が複雑なところ重要なところ1 2 3静的解析 AIエンジンセキュリティ⾃動テストエンジン主要画⾯
1.⾃動化コストが低いところ3. MagicPod開発のテスト⾃動化§ツールを設定するだけでチェックができるもの§スクリプトのメンテナンスが(ほぼ)不要なものやっていないもの§ Botでサイトリンクをたどり404エラー検出(モンキーテスト)§ アプリクラッシュ検知(Firebase Crashlytics)MagicPodでやっているもの§ ソースコード静的解析§ 型チェック
ソースコード静的解析‧型チェック3. MagicPod開発のテスト⾃動化Linter 型チェック その他動的型⾔語のPythonもmypyで型チェック型チェックがあるので、書式統⼀以上のメリットは少ないかもnginx構⽂チェックmypyTypeScriptコンパイルESLintPylint構⽂が間違っているとサーバが起動しない
2.処理が複雑なところ3. MagicPod開発のテスト⾃動化§複雑すぎて⼈⼒では品質を担保できないロジック§テストコードを書きながら開発を進めることが不可⽋MagicPodでやっているもの§ AIエンジンのユニットテスト§ AIエンジンの結合テスト(Integration Test)
3. MagicPod開発のテスト⾃動化AIエンジンのユニットテスト - UI解析AI§UI画像とツリーを解析し、操作できる要素をリストアップするAI§特殊な画⾯のパターンを多数テスト
3. MagicPod開発のテスト⾃動化AIエンジンのユニットテスト - ⾃動修復AI§テスト対象画⾯のUI変更でテストが失敗しそうになったときに、スクリプトを⾃動修正するAI§どんな失敗をどう修正するかのパターンを多数テスト
3. MagicPod開発のテスト⾃動化AIエンジンの結合テスト - ⾃動修復AI§複数のテストで使いまわされているUI要素の修復など§DBを使ったテスト§ レコード数を少なくすれば、DBアクセスしても⼗分⾼速MySQLテストコード(pytest)①データ投⼊②テスト実⾏
3. MagicPod開発のテスト⾃動化3.重要なところ§不具合があるとビジネスインパクトが⼤きいところMagicPodでやっているもの§ セキュリティテスト(結合テスト)§ ⾃動テストエンジンのテスト(E2Eテスト)§ 主要な画⾯のテスト(E2Eテスト)
3. MagicPod開発のテスト⾃動化セキュリティテスト(結合テスト)§ふだん⽬に⾒えないので軽視しがちなので注意§問題が起きると最悪サービス終了くらいのインパクト§テスト内容は割愛§ 最近VAddyを導⼊しようかと思っている。
3. MagicPod開発のテスト⾃動化⾃動テストエンジンのテスト(E2Eテスト)⾃動テストツールがもっとも避けるべきことテスト対象にバグが無いのにテスト失敗すること
3. MagicPod開発のテスト⾃動化⾃動テストエンジンのテスト(E2Eテスト)偽のテスト失敗が続くと…テスト結果をチェックする優先度が下がるテストのエラーが放置されるようになる⾃動化プロジェクト失敗😓😫💥
ユーザーのテストがMagicPodのバージョンアップで落ちないことはとても重要3. MagicPod開発のテスト⾃動化⾃動テストエンジンのテスト(E2Eテスト)対策MagicPod社内で⼤量のMagicPodテストを流してチェック
3. MagicPod開発のテスト⾃動化⾃動テストエンジンのテスト(E2Eテスト)各コマンド 各ブラウザ‧OS 各環境× × Magic Podクラウドローカル端末
3. MagicPod開発のテスト⾃動化⾃動テストエンジンのテスト(E2Eテスト)各コマンドのテスト(モバイルアプリテスト)
3. MagicPod開発のテスト⾃動化⾃動テストエンジンのテスト(E2Eテスト)各コマンドのテスト(ブラウザテスト)
3. MagicPod開発のテスト⾃動化⾃動テストエンジンのテスト(E2Eテスト)ひたすら⾊々なブラウザ‧OS‧環境で実⾏モバイルアプリテスト(On CircleCI)ブラウザテスト (On CircleCI)ブラウザテスト (On AppVeyor)
3. MagicPod開発のテスト⾃動化⾃動テストエンジンのテスト(E2Eテスト)テスト結果(iOSアプリテスト)
3. MagicPod開発のテスト⾃動化⾃動テストエンジンのテスト(E2Eテスト)テスト結果(ブラウザテスト)
3. MagicPod開発のテスト⾃動化⾃動テストエンジンのテスト(E2Eテスト)§MagicPod内スケジューラからのテスト実⾏§Bitriseからのモバイルアプリテスト実⾏§下位バージョンクライアントの互換性テスト
3. MagicPod開発のテスト⾃動化主要な画⾯のテスト(E2Eテスト)§ユーザー登録、テスト作成&編集、有料プラン申込、などなど§MagicPodでMagicPodの画⾯テストを⾃動化§ ドッグフーディングにもなる
3. MagicPod開発のテスト⾃動化主要な画⾯のテスト(E2Eテスト)MagicPodによるMagicPod画⾯のテスト
3. MagicPod開発のテスト⾃動化主要な画⾯のテスト(E2Eテスト)MagicPodによるMagicPod画⾯のテスト(テスト結果)
3. MagicPod開発のテスト⾃動化主要な画⾯のテスト(E2Eテスト)§画像差分チェックもMagicPodで実施§正解画像1枚で画⾯全体の項⽬とレイアウトがチェックできるので、コスパが良い
3. MagicPod開発のテスト⾃動化主要な画⾯のテスト(E2Eテスト)§画像差分チェック
3. MagicPod開発のテスト⾃動化どのテストを⾃動化するか ‒ まとめ⾃動化コストが低いところ処理が複雑なところ重要なところ1 2 3静的解析 AIエンジンセキュリティ⾃動テストエンジン主要画⾯
3. MagicPod開発のテスト⾃動化テスト作成は誰がやる?§新機能追加のタイミングで、エンジニアがテストも追加§作ることで、テスト⾃動化のユーザー業務を理解§E2Eテストケースの管理が雑という課題はある
4. MagicPod開発のCI運⽤MagicPod開発のCI運⽤§GitHubにプルリクエストを出しながら開発を進める§変更がコミットされた各タイミングでCircleCIによるビルドを実施mainbranchプルリクエストプルリクエストfeaturebranches
4. MagicPod開発のCI運⽤プルリクエストをマージする前§feature branchでは、⾼速に終わる「静的解析」「ユニットテスト」を実施§コードレビュー前に⼀定の品質を担保mainbranchプルリクエストプルリクエストfeaturebranches
4. MagicPod開発のCI運⽤プルリクエストをマージした後§main branchでは、さらに「Dockerコンテナのビルド」「結合テスト」も実施§変更がコミットされるたび
4. MagicPod開発のCI運⽤E2Eテスト§1⽇ 1〜2回実施
4. MagicPod開発のCI運⽤CIの結果は誰が⾒る?§2週間スプリントごとの担当制§メンテナンスを通じ、テスト⾃動化のユーザー業務を理解§エラー調査⼒向上、知識平準化の効果も
まとめ§⾃動テストツールも⾃動テスト‧CIしてます§範囲を絞って⾃動化§ ⾃動化コストが低いところ§ 処理が複雑なところ§ 重要なところ
Thank you!