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

by Nozomi Ito

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Thank you！