MagicPod開発における テスト自動化とCI

イベント「MagicPod開発におけるテスト自動化とCI」の発表資料です。
https://trident-qa.connpass.com/event/282323/

Transcript

1. MagicPod開発における
   テスト⾃動化とCI
   2023.05.31
   MagicPod CEO 伊藤望
   

   View Slide

2. About me
   §伊藤 望 (Ito Nozomi)
   §株式会社MagicPod CEO
   §⾃動テストツール歴：約13年
   §Twitter：@ito_nozomi
   • 著書
   

   View Slide

3. 1. MagicPodとは
   2. MagicPodのシステム開発環境&体制
   3. MagicPod開発のテスト⾃動化
   4. MagicPod開発のCI運⽤
   Agenda
   

   View Slide

4. 1. MagicPodとは
   2. MagicPodのシステム開発環境&体制
   3. MagicPod開発のテスト⾃動化
   4. MagicPod開発のCI運⽤
   

   View Slide

5. MagicPod
   §Web & モバイルアプリのE2Eテスト⾃動化SasS
   §ノーコードで簡単にテスト作成
   §柔軟性とメンテナンス性が強み
   (magicpod.com)
   １. MagicPodとは
   

   View Slide

6. エキスパートが作ったテストツール
   著者 翻訳者 コミッター
   １. MagicPodとは
   

   View Slide

7. ユーザーさんのブログ記事‧発表
   MagicPod実⾏後の本番デプロイを
   ⾃動化するための⾃作GitHub Actions
   みてねのE2E⾃動テスト導⼊戦略 【インターンレポート】⾃動テストを
   実装したら衝撃を受けた学⽣の話
   １. MagicPodとは
   実⾏⾃動E2Eテストを活⽤した
   デプロイフロー改善
   MagicPodで⾃動化率を
   爆上げしたハナシ
   MagicPodのUIテストを
   GitHub Actionsで⾃動化してみた
   

   View Slide

8. 1. MagicPodとは
   2. MagicPodの開発環境&体制
   3. MagicPod開発のテスト⾃動化
   4. MagicPod開発のCI運⽤
   

   View Slide

9. 技術スタック
   2. MagicPodの開発環境&体制
   ⾃動テストエンジン
   Node.js Selenium Appium
   インフラ
   AWS Docker
   サーバ‧AIエンジン
   Python Django React TypeScript MySQL
   

   View Slide

10. 多様なテスト実⾏環境
    2. MagicPodの開発環境&体制
    Webサーバ
    クラウドブラウザ クラウド端末
    Worker
    ローカルPC
    外部クラウド
    

    View Slide

11. 開発体制
    2. MagicPodの開発環境&体制
    新規開発1
    (サーバ寄り)
    新規開発2
    (⾃動テスト‧AI寄り)
    品質改善
    (ユーザートラブル)
    インフラ デザイナー
    

    View Slide

12. 開発体制
    2. MagicPodの開発環境&体制
    §QA:0⼈
    • ただしテスト⾃動化のエキスパートは多数
    • 本書いている⼈とか、Selenium/Appiumコントリビュータとか
    §リモート + ときどき出社
    §読み書き(Slack、GitHub等)と朝会は英語
    

    View Slide

13. 開発フロー
    2. MagicPodの開発環境&体制
    §アジャイル的開発
    §2週間ごとのスプリント & リリース
    §ビルド、デプロイは⾃動化
    

    View Slide

14. テストフロー
    2. MagicPodの開発環境&体制
    §新規開発部分は各⾃⼿動テスト
    §リグレッションテストは⾃動テスト
    §リリース前の3⽇間は社内ドッグフーディング
    ３⽇前
    main
    branch
    次の開発
    feature
    branches
    リリース
    次の開発
    

    View Slide

15. 1. MagicPodとは
    2. MagicPodの開発環境&体制
    3. MagicPod開発のテスト⾃動化
    4. MagicPod開発のCI運⽤
    

    View Slide

16. 全テスト⾃動化はできないので、絞って⾃動化
    3. MagicPod開発のテスト⾃動化
    ⼿動テストとリグレッションバグの削減が⽬的
    

    View Slide

17. 3. MagicPod開発のテスト⾃動化
    どのテストを⾃動化するか
    ⾃動化コストが
    低いところ
    処理が
    複雑なところ
    重要な
    ところ
    1 2 3
    

    View Slide

18. 3. MagicPod開発のテスト⾃動化
    どのテストを⾃動化するか
    ⾃動化コストが
    低いところ
    処理が
    複雑なところ
    重要な
    ところ
    1 2 3
    静的解析 AIエンジン
    セキュリティ
    ⾃動テスト
    エンジン
    主要画⾯
    

    View Slide

19. 1.⾃動化コストが低いところ
    3. MagicPod開発のテスト⾃動化
    §ツールを設定するだけでチェックができるもの
    §スクリプトのメンテナンスが(ほぼ)不要なもの
    やっていないもの
    § Botでサイトリンクをたどり404エラー検出(モンキーテスト)
    § アプリクラッシュ検知(Firebase Crashlytics)
    MagicPodでやっているもの
    § ソースコード静的解析
    § 型チェック
    

    View Slide

20. ソースコード静的解析‧型チェック
    3. MagicPod開発のテスト⾃動化
    Linter 型チェック その他
    動的型⾔語のPythonも
    mypyで型チェック
    型チェックがあるので、
    書式統⼀以上のメリットは
    少ないかも
    nginx構⽂チェック
    mypy
    TypeScript
    コンパイル
    ESLint
    Pylint
    構⽂が間違っていると
    サーバが起動しない
    

    View Slide

21. 2.処理が複雑なところ
    3. MagicPod開発のテスト⾃動化
    §複雑すぎて⼈⼒では品質を担保できないロジック
    §テストコードを書きながら開発を進めることが不可⽋
    MagicPodでやっているもの
    § AIエンジンのユニットテスト
    § AIエンジンの結合テスト(Integration Test)
    

    View Slide

22. 3. MagicPod開発のテスト⾃動化
    AIエンジンのユニットテスト - UI解析AI
    §UI画像とツリーを解析し、操作できる要素をリスト
    アップするAI
    §特殊な画⾯のパターンを多数テスト
    

    View Slide

23. 3. MagicPod開発のテスト⾃動化
    AIエンジンのユニットテスト - ⾃動修復AI
    §テスト対象画⾯のUI変更でテストが失敗しそうになった
    ときに、スクリプトを⾃動修正するAI
    §どんな失敗をどう修正するかのパターンを多数テスト
    

    View Slide

24. 3. MagicPod開発のテスト⾃動化
    AIエンジンの結合テスト - ⾃動修復AI
    §複数のテストで使いまわされているUI要素の修復など
    §DBを使ったテスト
    § レコード数を少なくすれば、DBアクセスしても⼗分⾼速
    MySQL
    テストコード
    (pytest)
    ①データ投⼊
    ②テスト実⾏
    

    View Slide

25. 3. MagicPod開発のテスト⾃動化
    3.重要なところ
    §不具合があるとビジネスインパクトが⼤きいところ
    MagicPodでやっているもの
    § セキュリティテスト(結合テスト)
    § ⾃動テストエンジンのテスト(E2Eテスト)
    § 主要な画⾯のテスト(E2Eテスト)
    

    View Slide

26. 3. MagicPod開発のテスト⾃動化
    セキュリティテスト(結合テスト)
    §ふだん⽬に⾒えないので軽視しがちなので注意
    §問題が起きると最悪サービス終了くらいのインパクト
    §テスト内容は割愛
    § 最近VAddyを導⼊しようかと思っている。
    

    View Slide

27. 3. MagicPod開発のテスト⾃動化
    ⾃動テストエンジンのテスト(E2Eテスト)
    ⾃動テストツールがもっとも避けるべきこと
    テスト対象にバグが無いのにテスト失敗すること
    

    View Slide

28. 3. MagicPod開発のテスト⾃動化
    ⾃動テストエンジンのテスト(E2Eテスト)
    偽のテスト失敗が続くと…
    テスト結果をチェックする
    優先度が下がる
    テストのエラーが
    放置されるようになる
    ⾃動化プロジェクト
    失敗
    😓
    😫
    💥
    

    View Slide

29. ユーザーのテストがMagicPodの
    バージョンアップで落ちないことはとても重要
    3. MagicPod開発のテスト⾃動化
    ⾃動テストエンジンのテスト(E2Eテスト)
    対策
    MagicPod社内で⼤量の
    MagicPodテストを流してチェック
    

    View Slide

30. 3. MagicPod開発のテスト⾃動化
    ⾃動テストエンジンのテスト(E2Eテスト)
    各コマンド 各ブラウザ‧OS 各環境
    × × Magic Podクラウド
    ローカル端末
    

    View Slide

31. 3. MagicPod開発のテスト⾃動化
    ⾃動テストエンジンのテスト(E2Eテスト)
    各コマンドのテスト(モバイルアプリテスト)
    

    View Slide

32. 3. MagicPod開発のテスト⾃動化
    ⾃動テストエンジンのテスト(E2Eテスト)
    各コマンドのテスト(ブラウザテスト)
    

    View Slide

33. 3. MagicPod開発のテスト⾃動化
    ⾃動テストエンジンのテスト(E2Eテスト)
    ひたすら⾊々なブラウザ‧OS‧環境で実⾏
    モバイルアプリテスト
    (On CircleCI)
    ブラウザテスト (On CircleCI)
    ブラウザテスト (On AppVeyor)
    

    View Slide

34. 3. MagicPod開発のテスト⾃動化
    ⾃動テストエンジンのテスト(E2Eテスト)
    テスト結果(iOSアプリテスト)
    

    View Slide

35. 3. MagicPod開発のテスト⾃動化
    ⾃動テストエンジンのテスト(E2Eテスト)
    テスト結果(ブラウザテスト)
    

    View Slide

36. 3. MagicPod開発のテスト⾃動化
    ⾃動テストエンジンのテスト(E2Eテスト)
    §MagicPod内スケジューラからのテスト実⾏
    §Bitriseからのモバイルアプリテスト実⾏
    §下位バージョンクライアントの互換性テスト
    

    View Slide

37. 3. MagicPod開発のテスト⾃動化
    主要な画⾯のテスト(E2Eテスト)
    §ユーザー登録、テスト作成&編集、有料プラン申込、
    などなど
    §MagicPodでMagicPodの画⾯テストを⾃動化
    § ドッグフーディングにもなる
    

    View Slide

38. 3. MagicPod開発のテスト⾃動化
    主要な画⾯のテスト(E2Eテスト)
    MagicPodによるMagicPod画⾯のテスト
    

    View Slide

39. 3. MagicPod開発のテスト⾃動化
    主要な画⾯のテスト(E2Eテスト)
    MagicPodによるMagicPod画⾯のテスト
    

    View Slide

40. 3. MagicPod開発のテスト⾃動化
    主要な画⾯のテスト(E2Eテスト)
    MagicPodによるMagicPod画⾯のテスト(テスト結果)
    

    View Slide

41. 3. MagicPod開発のテスト⾃動化
    主要な画⾯のテスト(E2Eテスト)
    §画像差分チェックもMagicPodで実施
    §正解画像1枚で画⾯全体の項⽬とレイアウトがチェッ
    クできるので、コスパが良い
    

    View Slide

42. 3. MagicPod開発のテスト⾃動化
    主要な画⾯のテスト(E2Eテスト)
    §画像差分チェック
    

    View Slide

43. 3. MagicPod開発のテスト⾃動化
    どのテストを⾃動化するか ‒ まとめ
    ⾃動化コストが
    低いところ
    処理が
    複雑なところ
    重要な
    ところ
    1 2 3
    静的解析 AIエンジン
    セキュリティ
    ⾃動テスト
    エンジン
    主要画⾯
    

    View Slide

44. 3. MagicPod開発のテスト⾃動化
    テスト作成は誰がやる？
    §新機能追加のタイミングで、エンジニアがテストも追加
    §作ることで、テスト⾃動化のユーザー業務を理解
    §E2Eテストケースの管理が雑という課題はある
    

    View Slide

45. 1. MagicPodとは
    2. MagicPodの開発環境&体制
    3. MagicPod開発のテスト⾃動化
    4. MagicPod開発のCI運⽤
    

    View Slide

46. 4. MagicPod開発のCI運⽤
    MagicPod開発のCI運⽤
    §GitHubにプルリクエストを出しながら開発を進める
    §変更がコミットされた各タイミングでCircleCIによるビ
    ルドを実施
    main
    branch
    プルリクエスト
    プルリクエスト
    feature
    branches
    

    View Slide

47. 4. MagicPod開発のCI運⽤
    プルリクエストをマージする前
    §feature branchでは、⾼速に終わる「静的解析」「ユ
    ニットテスト」を実施
    §コードレビュー前に⼀定の品質を担保
    main
    branch
    プルリクエスト
    プルリクエスト
    feature
    branches
    

    View Slide

48. 4. MagicPod開発のCI運⽤
    プルリクエストをマージした後
    §main branchでは、さらに「Dockerコンテナのビルド」
    「結合テスト」も実施
    §変更がコミットされるたび
    

    View Slide

49. 4. MagicPod開発のCI運⽤
    E2Eテスト
    §1⽇ 1〜2回実施
    

    View Slide

50. 4. MagicPod開発のCI運⽤
    CIの結果は誰が⾒る？
    §2週間スプリントごとの担当制
    §メンテナンスを通じ、テスト⾃動化のユーザー業務を理解
    §エラー調査⼒向上、知識平準化の効果も
    

    View Slide

51. まとめ
    §⾃動テストツールも⾃動テスト‧CIしてます
    §範囲を絞って⾃動化
    § ⾃動化コストが低いところ
    § 処理が複雑なところ
    § 重要なところ
    

    View Slide

52. Thank you！
    

    View Slide