テストから始めるDevOps ～面倒なテスト工程を自動化しよう～

2024/1/25 とことんDevOps勉強会にて使用したスライドです。

Transcript

1. ～面倒なテスト工程を自動化しよう～ 2024/1/25 とことんDevOps勉強会
2. Speaker Profile odasho (Shohei Oda) Quality Advocate / Product Marketing, mabl Japan 国内SIerにてインフラやPaaS App開発まで幅広く経験。その後 コミュニティ活動をきっかけにMicrosoftに入社。Evangelistと してAudience Marketingに従事。2022年10月にmablにJoin、 TestingやQAの啓蒙活動に取り組む。現在もDevRel Meetup in Tokyoを中心に複数のコミュニティを運営/支援。 iPhone絶対並んで買うおじさん(2011 - 2023) Most DevRel Committer 2020、名城大学情報工学部非常勤講師 odashoDotCom odasho0618 odasho odasho0618
3. What's mabl? • 「めいぶる」と読みます • Stackdriver（現Google Cloud Operations）の創 業者IzzyとDanが2017年ボストンで創業 • グローバルの社員数100人+ • GV、CRV、Amplify、Vista Equity Partner、 Presidioより 7,700万ドル (90億円) を調達 • 2021年度の売上、前年対比300％+増 • Fortune Globalの35社含む300社+が採用 • 2021年8月に日本法人設立
4. マーブルと誤読されがち
5. カスタマーエクスペリエンスの重要性 一度でも嫌な体験をしたら、 好きなブランドでも離れる と回答 ポジティブな体験の方が 広告よりも影響力がある と回答 より良い体験が得られるなら お気に入りのブランドから 他のブランドに乗り換える 可能性が大いにある と回答 Source: PWC, Experience is everything: Here’s how to get it right 52% 65% 32%
6. DevOpsに対応したテスト自動化プラットフォーム ノーコード/ローコード UI / API & Mobileテスト データ/インサイト 結果データを自動取得 単一プラットフォーム E2E、API、A11y、Perf 顧客体験を広くカバー　 Email送信/PDFアサート 開発ツール連携 GitHub、Slack、Jira等 テストメンテナンス削減 テストの自動修復
7. ローコードテスト自動化 mablのスコープ 単体テスト API/結合テスト UI/E2Eテスト 探索的テスト
8. エンタープライズ対応のセキュリティ mabl Link • 暗号化されたWebソケット コネクション • テスト実行時にF/W内から アウトバウンド通信のみ • Proxyサーバー経由も可能 SOC II Type 2 GDPR
9. ローコードで「意図」と「実装」を分ける
10. 自動修復でメンテナンス作業を削減
11. GCP上で並列テストを無制限に実行 Show screenshot of a plan
12. テストカバレッジレポート
13. パフォーマンス評価
14. 10倍 早くテスト実行 より良い品質のソフトウェアをより早く提供 ROI data based on customer case studies compared to Selenium frameworks and other commercial tools 3倍 早くテストを構築 速く作る 効率改善 コスト削減 高速化 70% メンテナンス時間を削減 80% Seleniumより低コスト
15. アクティブユーザー数 48% 2% 13% 2% 2% 12% 21%
16. 品質指標を使用した継続的な改善 非機能的品質の検証 シフトレフト: 自動化されたテストを開発に組み込む 機能テスト自動化のカバレッジ拡大 開発後に手動でテスト 品質エンジニアリング (QE) ジャーニー QEの成熟度
17. demo
18. 既存ツールとの統合 DevOpsツールセットとの統合 CI/CDインテグレーション Mabl アプリ (デスクトップ、Web) Mabl Cloud レ ート コラ レーションツール お使いのアプリケーション Mabl Link optional バグ追跡
19. CIツールとの統合に よって表示される... ...またはCLIコマンド を直接使用する。 CI/CDパイプラインへの統合
20. ★ 必要なもの ★ • GitHub レポジトリ ※ ChatGPT Advanced Data Analysis で コード出力したシンプルな HTML を GitHub Pages で Host済 • mabl アカウント ※トライアルアカウントで OK
21. You can try it now! • 今すぐできる2週間の無料トライアル！ mabl Uのお供にどうぞ！ • デモリクエストも大歓迎！ https://www.mabl.com/ja
22. mabl ワークスペースの構造・概要 環境 e.g.サンドボックス 環境 e.g. ステージング 環境 e.g. 本番 アプリケーション アプリケーション アプリケーション ワークスペース テスト プラン テスト テスト テスト テスト テスト プラン プラン プラン テスト テスト プラン プラン テスト • ワークスペース: mablの基本的な構成要素であり、mabl の主要コンポーネントがすべて格納されている • 環境: ソフトウェア開発ライフサイクルのステージ (サンド ボックス、開発、本番など ) • アプリケーション: テスト対象となるソフトウェア アプリケーションやウェブアプリケーションの URL • プラン: mablでテストを実行するための計画や設定を 備えたテストグループ • テスト: 自動化されたエンドツーエンドのテスト e.g. ブラウザテスト、 APIテスト
23. テスト環境設定 • 左端のナビゲーションメニューか ら「テスト環境設定」を選択 • 右に表示される「新規アプリケー ション」を選択 • New applicationから下記項目を 入力し、保存 ◦ Application name ◦ 説明 ※任意 ◦ WebアプリケーションのURL ◦ 環境名 (今回は事前設定した Sandbox)
24. mabl ワークスペースの構造・概要 環境 e.g.サンドボックス 環境 e.g. ステージング 環境 e.g. 本番 アプリケーション アプリケーション アプリケーション ワークスペース テスト プラン テスト テスト テスト テスト テスト プラン プラン プラン テスト テスト プラン プラン テスト • ワークスペース: mablの基本的な構成要素であり、mabl の主要コンポーネントがすべて格納されている • 環境: ソフトウェア開発ライフサイクルのステージ (サンド ボックス、開発、本番など ) • アプリケーション: テスト対象となるソフトウェア アプリケーションやウェブアプリケーションの URL • プラン: mablでテストを実行するための計画や設定を 備えたテストグループ • テスト: 自動化されたエンドツーエンドのテスト e.g. ブラウザテスト、 APIテスト
25. プラン作成 1. 左端のナビゲーションメニューか ら「プラン」を選択 2. 右に表示される「新規プラン」 を選択 3. 新規プランの追加から下記項目 を入力し、プランの保存 ◦ プラン名 ◦ 説明 ※任意 ◦ ラベル ※任意 (GitHub Actionsの ymlファイル設定時に利用 ) ◦ 環境 (直前に設定した Sandbox) ◦ デバイスやブラウザ etc 4. テストは(現時点では)削除
26. mabl ワークスペースの構造・概要 環境 e.g.サンドボックス 環境 e.g. ステージング 環境 e.g. 本番 アプリケーション アプリケーション アプリケーション ワークスペース テスト プラン テスト テスト テスト テスト テスト プラン プラン プラン テスト テスト プラン プラン テスト • ワークスペース: mablの基本的な構成要素であり、mabl の主要コンポーネントがすべて格納されている • 環境: ソフトウェア開発ライフサイクルのステージ (サンド ボックス、開発、本番など ) • アプリケーション: テスト対象となるソフトウェア アプリケーションやウェブアプリケーションの URL • プラン: mablでテストを実行するための計画や設定を 備えたテストグループ • テスト: 自動化されたエンドツーエンドのテスト e.g. ブラウザテスト、 APIテスト
27. 1. mabl デスクトップアプリにロ グインする。 2. 左端のナビゲーションメ ニューから「テスト作成」を選 択する。 3. テスト種類の選択が表示され るので「ブラウザテスト」を選 択する。 4. 新規ブラウザテストの作成 フォームが表示される。 テスト作成（ログインシナリオ）
28. テスト作成（ログインシナリオ） 1. 新規ブラウザテストの作成フォームの下記項目に 入力する。 ◦ テスト名 ◦ 説明 ※任意 ◦ プランに追加 → (作成した) 既存プラン 2. 「作成」ボタンをクリックする。 3. テスト作成後、 プラン に戻り、先ほど作成したプラ ンの オン/オフ を「オン」にする。
29. テスト作成（ログインシナリオ） 1. Chromeブラウザ のウィンドウと mablトレーナー ウィンドウが表 示される。 • Chomeブラウザ： テスト対象アプリが表示された Chromeブラウザ • ｍablトレーナー： テストの作成および編集するた めのインタラクティブなツール 2. 既に Rec 状態でありブラウザ操 作が記録可能となる。 テスト作成後に「保存」して終了 する。 Chromeブラウザ mablトレーナー
30. 参考ドキュメント - テスト作成 - • ブラウザテストの作成 https://help.mabl.com/docs/defining-a-test-with-the-mabl-trainer-ja • mablトレーナー https://help.mabl.com/docs/the-mabl-trainer-ja • アサーション https://help.mabl.com/docs/assertions-ja
31. テスト実行 （アドホック ローカル実行） 1. デスクトップアプリケーションより、 作成したテスト確認画面右上のテ スト「実行ボタン」をクリックする。 2. アドホック実行の 「ローカル実行」 を選択し、「テストを1回実行」ボタ ンをクリックする。 ブラウザとプロンプト画面が表示さ れてローカルでテストが実行され る。 ※「ローカル実行」 は、ユーザーのマシンのロー カルで実行されるが、実行結果は保存されな い。作成されたテスト内容の検証やコーディン グ時の実行が最適。
32. テスト実行 （アドホック クラウド実行） 1. デスクトップアプリケーションより、 作成したテスト確認画面右上のテ スト「実行ボタン」を押下する。 2. アドホック実行の 「クラウド実行」を 選択し、「テストを1回実行」ボタン を押下 ※「クラウド実行」 は、mablのクラウド環境上で テストが実行され、クロスブラウザのテストや、 各ステップごとのエビデンス・ログの保存・確認 が可能。定期実行に最適。
33. テスト実行方法概要 mablのテスト実行方法は大きく2種類 • クラウド実行 ◦ mablのクラウド環境上でのテスト実行 ◦ mablのフル機能を使用可能 ◦ 完成したテストの定期実行を行う等 • ローカル実行 ◦ ローカル環境でのテスト実行 ◦ mablの一部機能を使用可能 ◦ 作成したテストの確認を行う等 Source: https://help.mabl.com/docs/test-execution クラウド実行 ローカル実行 単一テスト実行スピード 速い 最速 複数テスト実行スピード 最速 速い 並列実行 無制限 不可 スケジューリング 可能 自作スクリプト レポーティング フル提供 なし ログデータ フル提供 Pass/Failのみ クロスブラウザ サポート Chromeのみ インサイト情報（auto-heal, visual, JS error etc.） フル提供 なし 月次実行回数へのカウント カウントする カウントしない
34. 参考ドキュメント - テスト実行 - • テスト実行の概要 https://help.mabl.com/docs/test-execution-ja • デスクトップアプリでローカル実行を行う https://help.mabl.com/docs/local-runs-ja • 手動でのテスト実行（アドホック実行） https://help.mabl.com/docs/ad-hoc-test-runs-ja
35. https://github.com/apps/mabl-bot GitHub Integration Deployment action Run mabl tests action Actions 2.0 Deployments API Tests Test Results API DEPLOYMENT EVENT POLL FOR TEST RESULTS TRIGGER
36. Step 1 連携設定 1. 左端のナビゲーションメニューか ら「ワークスペース」を選択 2. インテグレーションの一覧が 表示されるので、GitHubの 「Learn more」を選択
37. Step 1 連携設定 1. mabl botを 「install」 2. インストール先リポジトリを 選択して「install」 3. ブラウザ上でmablの画面に切り 替わる
38. Step 1 連携設定 1. GitHub Actionsの振舞い設定や インサイトのフィルター設定を行 い「Save」 2. 「アクティブなインテグレーション」 にGitHubが表示されていること を確認
39. Step 2 連携設定 1. ワークスペースのAPIタブから 「APIキーの作成」をクリック 2. 「APIキーのタイプ」で「CI/CD Integration」を選択 Nameは任意の文字を入力し、保 存
40. Step 2 連携設定 1. 「APIキー」作成の完了を確認し、 「Key」を控えておく 2. mabl CLIにて、事前作成した 「アプリケーション」と 「環境」を選択して、表示 されたターミナルコマンドから 「--application-id」 「--environment-id」を それぞれ控えておく
41. Step 3 連携設定 1. GitHubの Setting から Sercrets and variables を選択しActions から「New repository secret」 を選択 2. Nameを「MABL_API_KEY」、先 にmabl上で作成した「Key」を Secretに入力し、Add secretをク リック
42. Step 3 連携設定 1. workflowsフォルダ内に mabl.yml を追加 右記のように書き換え ◦ mablhq/github-run-tests-action@v1.13.0 に修正 ◦ 控えた application-id, environment-id を入力 ◦ 参考サイトを真似て plan-labels: | を追加 参考サイト: https://github.com/marketplace/actions/run-mabl-tests 2. 「Commit changes…」ボタンを押下後、GitHub Actions が自動実行されるので、Complete するこ とを確認
43. 結果確認 1. mablのナビゲーションメニューから「テスト結果」を 選択し、「デプロイメント別」タブから自動実行 された結果を展開して確認
44. 失敗時の確認項目 • mablの設定 ◦ プランラベル設定、プラン有効化確認 (テスト追加前はプランは無効状態 ) ◦ 適切な API キー、アプリケーションや 環境の ID を選択 • GitHubの設定 ◦ MABL_API_KEY の設定 (Repository secrets に追加) ◦ yml ファイル設定 (最新Verの適用、plan-labels: | の追加)
45. For your information
46. About the mabl University How-to Videos (English only) How-to Lessons (Japanese only) On-Demand Training (English & Japanese) mabl Skills Certifications (English & Japanese) • 33 ビデオ (各3 - 8 分程度) • 英語字幕あり、日本語字幕なし • 26 レッスン • Step by stepで学習可能 • 4 ラーニングパス • 設定、基礎、高度、統合でそれ ぞれ30 - 90 分の学習パス • 学習目標に応じたパスを提供 • 3 つの資格 • Foundations と Advanced • NonFunctional ←NEW • LinkedIn に掲載可能
47. You can try it now! • 今すぐできる2週間の無料トライアル！ mabl Uのお供にどうぞ！ • デモリクエストも大歓迎！ https://www.mabl.com/ja
48. mabl user community! mabl の User Community『mablers_jp』 • ユーザーによるユーザーのための コミュニティ • ユーザーによる忖度のない生の声を聞く 絶好のチャンス。是非ご参加ください！ https://mablersjp.connpass.com/
49. Join our webinar! 1/29 これから始めるDevOps！ ローコードで簡単に実現するE2Eの 負荷テスト徹底解説！ • mabl の新機能！E2Eパフォーマンステスト • 負荷テストをローコード/ノーコードで実現
50. Join Developers Summit 2024! 2/15-16 Developers Summit 2024 • Bitkeyさまと共同登壇セッション 『自動テスト歴0年でもできる！テスト 工数を46時間/月削減した方法』 • 是非ブースにもお立ち寄りください！
51. ★ 今日のポイント！ ★ • マーブルではなく「めいぶる」 • ローコードで誰でも自動テストを作成可能 • 3 Stepで GitHub と mabl を簡単に連携
52. Questions? odasho (Shohei Oda) Quality Advocate / Product Marketing, mabl Japan odashoDotCom odasho0618 odasho odasho0618