Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MagicPod開発におけるテスト自動化とCI
Search
Nozomi Ito
May 31, 2023
Technology
0
760
MagicPod開発における テスト自動化とCI
イベント「MagicPod開発におけるテスト自動化とCI」の発表資料です。
https://trident-qa.connpass.com/event/282323/
Nozomi Ito
May 31, 2023
Tweet
Share
More Decks by Nozomi Ito
See All by Nozomi Ito
ノーコードに学ぶE2Eテスト自動化ベストプラクティス
nozomiito
0
900
ノーコードE2Eテストで実現する高速開発
nozomiito
0
640
MagicPodで実現するE2Eテスト自動化
nozomiito
0
3.3k
最近のMagicPodまとめ
nozomiito
0
610
テスト自動化スタートアップがエバンジェリストを募集するワケ
nozomiito
0
300
MagicPodが取り組むテスト自動化最前線
nozomiito
0
470
ロケーターを学んでテスト自動化上級者を目指そう
nozomiito
1
7.4k
テスト自動化で起業した10年とテスト自動化普及の歴史を振り返る
nozomiito
4
2.3k
テスト自動化で起業した10年とテスト自動化普及の歴史を振り返る
nozomiito
8
5.9k
Other Decks in Technology
See All in Technology
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
120
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
610
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
3
210
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
240
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
750
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
420
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
2
940
Digitization部 紹介資料
sansan33
PRO
1
4.5k
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
8
2.3k
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
500
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
180
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Practical Orchestrator
shlominoach
189
11k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Language of Interfaces
destraynor
158
25k
Why Our Code Smells
bkeepers
PRO
337
57k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
It's Worth the Effort
3n
185
28k
Designing Experiences People Love
moore
142
24k
Fireside Chat
paigeccino
37
3.5k
Transcript
MagicPod開発における テスト⾃動化とCI 2023.05.31 MagicPod CEO 伊藤望
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⽇前 main branch 次の開発
feature branches リリース 次の開発
1. MagicPodとは 2. MagicPodの開発環境&体制 3. MagicPod開発のテスト⾃動化 4. MagicPod開発のCI運⽤
全テスト⾃動化はできないので、絞って⾃動化 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構⽂チェック mypy TypeScript コンパイル ESLint Pylint 構⽂が間違っていると サーバが起動しない
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によるMagicPod画⾯のテスト(テスト結果)
3. MagicPod開発のテスト⾃動化 主要な画⾯のテスト(E2Eテスト) §画像差分チェックもMagicPodで実施 §正解画像1枚で画⾯全体の項⽬とレイアウトがチェッ クできるので、コスパが良い
3. MagicPod開発のテスト⾃動化 主要な画⾯のテスト(E2Eテスト) §画像差分チェック
3. MagicPod開発のテスト⾃動化 どのテストを⾃動化するか ‒ まとめ ⾃動化コストが 低いところ 処理が 複雑なところ 重要な
ところ 1 2 3 静的解析 AIエンジン セキュリティ ⾃動テスト エンジン 主要画⾯
3. MagicPod開発のテスト⾃動化 テスト作成は誰がやる? §新機能追加のタイミングで、エンジニアがテストも追加 §作ることで、テスト⾃動化のユーザー業務を理解 §E2Eテストケースの管理が雑という課題はある
1. MagicPodとは 2. MagicPodの開発環境&体制 3. MagicPod開発のテスト⾃動化 4. MagicPod開発のCI運⽤
4. MagicPod開発のCI運⽤ MagicPod開発のCI運⽤ §GitHubにプルリクエストを出しながら開発を進める §変更がコミットされた各タイミングでCircleCIによるビ ルドを実施 main branch プルリクエスト プルリクエスト
feature branches
4. MagicPod開発のCI運⽤ プルリクエストをマージする前 §feature branchでは、⾼速に終わる「静的解析」「ユ ニットテスト」を実施 §コードレビュー前に⼀定の品質を担保 main branch プルリクエスト
プルリクエスト feature branches
4. MagicPod開発のCI運⽤ プルリクエストをマージした後 §main branchでは、さらに「Dockerコンテナのビルド」 「結合テスト」も実施 §変更がコミットされるたび
4. MagicPod開発のCI運⽤ E2Eテスト §1⽇ 1〜2回実施
4. MagicPod開発のCI運⽤ CIの結果は誰が⾒る? §2週間スプリントごとの担当制 §メンテナンスを通じ、テスト⾃動化のユーザー業務を理解 §エラー調査⼒向上、知識平準化の効果も
まとめ §⾃動テストツールも⾃動テスト‧CIしてます §範囲を絞って⾃動化 § ⾃動化コストが低いところ § 処理が複雑なところ § 重要なところ
Thank you!