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
560
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
560
ノーコードE2Eテストで実現する高速開発
nozomiito
0
480
MagicPodで実現するE2Eテスト自動化
nozomiito
0
1.7k
最近のMagicPodまとめ
nozomiito
0
470
テスト自動化スタートアップがエバンジェリストを募集するワケ
nozomiito
0
210
MagicPodが取り組むテスト自動化最前線
nozomiito
0
350
ロケーターを学んでテスト自動化上級者を目指そう
nozomiito
1
4.1k
テスト自動化で起業した10年とテスト自動化普及の歴史を振り返る
nozomiito
4
2k
テスト自動化で起業した10年とテスト自動化普及の歴史を振り返る
nozomiito
8
4.9k
Other Decks in Technology
See All in Technology
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.3k
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
Azure AI ことはじめ
tsubakimoto_s
0
130
MySQLのロックの種類とその競合
yoku0825
6
1.6k
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
506
110k
The Language of Interfaces
destraynor
151
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
A Tale of Four Properties
chriscoyier
155
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Design by the Numbers
sachag
277
18k
Visualization
eitanlees
139
14k
Teambox: Starting and Learning
jrom
130
8.6k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Side Projects
sachag
451
42k
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!