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
690
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
790
ノーコードE2Eテストで実現する高速開発
nozomiito
0
600
MagicPodで実現するE2Eテスト自動化
nozomiito
0
2.8k
最近のMagicPodまとめ
nozomiito
0
560
テスト自動化スタートアップがエバンジェリストを募集するワケ
nozomiito
0
250
MagicPodが取り組むテスト自動化最前線
nozomiito
0
440
ロケーターを学んでテスト自動化上級者を目指そう
nozomiito
1
6.1k
テスト自動化で起業した10年とテスト自動化普及の歴史を振り返る
nozomiito
4
2.2k
テスト自動化で起業した10年とテスト自動化普及の歴史を振り返る
nozomiito
8
5.2k
Other Decks in Technology
See All in Technology
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
200
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
190
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
140
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.5k
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
3k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
1.1k
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
MIMEと文字コードの闇
hirachan
2
1.4k
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
110
IAMのマニアックな話2025
nrinetcom
PRO
6
1.4k
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
230
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
183
22k
Statistics for Hackers
jakevdp
797
220k
Adopting Sorbet at Scale
ufuk
75
9.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Documentation Writing (for coders)
carmenintech
68
4.6k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
KATA
mclloyd
29
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Typedesign – Prime Four
hannesfritz
41
2.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!