Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Nozomi Ito

May 31, 2023
Tweet

More Decks by Nozomi Ito

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. Thank you!

    View full-size slide