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
これから始めるDevOps! CI/CD連携を活用してリグレッション テストを自動化しよう!
Search
odasho
October 25, 2023
Technology
1
670
これから始めるDevOps! CI/CD連携を活用してリグレッション テストを自動化しよう!
2023/10/25 mablWebinarにて使用したスライドです。
odasho
October 25, 2023
Tweet
Share
More Decks by odasho
See All by odasho
まだ手動テストしてるの?生成AIとローコードで実現するE2Eテスト徹底解説!
odasho
0
75
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
880
生成AI時代のソフトウェア品質保証を考える
odasho
0
58
イマこそ、”Dev””Rel”なのでは??~VUCA時代を乗りこなすDevRelの価値と本質~
odasho
0
52
生成AIとAI ~エンジニアの期待と現実~
odasho
0
120
E2Eテストを自動化したら 開発生産性はどうなった? hacomonoの事例紹介
odasho
0
1.1k
統合型ノーコードテスト 自動化プラットフォーム 『mabl』 ご紹介ウェビナー
odasho
0
65
テスト自動化入門ワークショップ:最新のモバイルアプリテスト
odasho
0
160
未来を変える一歩: モバイルアプリテスト自動化の新時代
odasho
0
110
Other Decks in Technology
See All in Technology
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
330
[TechNight #91] Oracle Database 最新パフォーマンス分析手法
oracle4engineer
PRO
4
300
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
280
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
330
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
920
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
310
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
200
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
230
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
0
120
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
230
人と生成AIの協調意思決定/Co‑decision making by people and generative AI
moriyuya
0
220
Jitera Company Deck / JP
jitera
0
310
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Navigating Team Friction
lara
188
15k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
これから始めるDevOps! CI/CD連携を活用してリグレッション テストを自動化しよう! 2023/10/25 mabl Webinar #23
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
You can try it now! • 今すぐできる2週間の無料トライアル! mabl Uのお供にどうぞ! •
デモリクエストも大歓迎! https://www.mabl.com/ja
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 に掲載可能
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月に日本法人設立
『マーブル』と誤読されがち
DevOpsに対応したテスト自動化プラットフォーム ノーコード/ローコード UIテスト & APIテスト データ/インサイト 結果データを自動取得 単一プラットフォーム E2E、API、A11y、Perf 顧客体験を広くカバー
Email送信/PDFアサート 開発ツール連携 GitHub、Slack、Jira等 テストメンテナンス削減 テストの自動修復
ローコードテスト自動化 mablのスコープ 単体テスト API/結合テスト UI/E2Eテスト 探索的テスト
エンタープライズ対応のセキュリティ mabl Link • 暗号化されたWebソケット コネクション • テスト実行時にF/W内から アウトバウンド通信のみ •
Proxyサーバー経由も可能 SOC II Type 2 GDPR
アクティブユーザー数 48% 2% 13% 2% 2% 12% 21%
10倍 早くテスト実行 より良い品質のソフトウェアをより早く提供 ROI data based on customer case studies
compared to Selenium frameworks and other commercial tools 3倍 早くテストを構築 速く作る 効率改善 コスト削減 高速化 70% メンテナンス時間を削減 80% Seleniumより低コスト
品質指標を使用した継続的な改善 非機能的品質の検証 シフトレフト: 自動化されたテストを開発に組み込む 機能テスト自動化のカバレッジ拡大 開発後に手動でテスト 品質エンジニアリング (QE) ジャーニー QEの成熟度
ローコードで「意図」と「実装」を分ける
自動修復でメンテナンス作業を削減
GCP上で並列テストを無制限に実行 Show screenshot of a plan
テストカバレッジレポート
パフォーマンス評価
demo
既存ツールとの統合 DevOpsツールセットとの統合 CI/CDインテグレーション Mabl アプリ (デスクトップ、Web) Mabl Cloud レ ート
コラ レーションツール お使いのアプリケーション Mabl Link optional バグ追跡
CIツールとの統合に よって表示される... ...またはCLIコマンド を直接使用する。 CI/CDパイプラインへの統合
★ 必要なもの ★ • Azure Static Web Apps • ※無料アカウントでOK
• GitHub のレポジトリ ※ ChatGPT Advanced Data Analysis で コード出力したシンプルなHTMLを用意 • mabl アカウント ※トライアルアカウントでOK
mabl ワークスペースの構造・概要 環境 e.g.サンドボックス 環境 e.g. ステージング 環境 e.g. 本番
アプリケーション アプリケーション アプリケーション ワークスペース テスト プラン テスト テスト テスト テスト テスト プラン プラン プラン テスト テスト プラン プラン テスト • ワークスペース: mablの基本的な構成要素であり、mabl の主要コンポーネントがすべて格納されている • 環境: ソフトウェア開発ライフサイクルのステージ (サンド ボックス、開発、本番など ) • アプリケーション: テスト対象となるソフトウェア アプリケーションやウェブアプリケーションの URL • プラン: mablでテストを実行するための計画や設定を 備えたテストグループ • テスト: 自動化されたエンドツーエンドのテスト e.g. ブラウザテスト、 APIテスト
テスト環境設定 • 左端のナビゲーションメニューか ら「テスト環境設定」を選択 • 右に表示される「新規アプリケー ション」を選択 • New applicationから下記項目を
入力し、保存 ◦ Application name ◦ 説明 ※任意 ◦ WebアプリケーションのURL ◦ 環境名 (今回は事前設定した Sandbox)
mabl ワークスペースの構造・概要 環境 e.g.サンドボックス 環境 e.g. ステージング 環境 e.g. 本番
アプリケーション アプリケーション アプリケーション ワークスペース テスト プラン テスト テスト テスト テスト テスト プラン プラン プラン テスト テスト プラン プラン テスト • ワークスペース: mablの基本的な構成要素であり、mabl の主要コンポーネントがすべて格納されている • 環境: ソフトウェア開発ライフサイクルのステージ (サンド ボックス、開発、本番など ) • アプリケーション: テスト対象となるソフトウェア アプリケーションやウェブアプリケーションの URL • プラン: mablでテストを実行するための計画や設定を 備えたテストグループ • テスト: 自動化されたエンドツーエンドのテスト e.g. ブラウザテスト、 APIテスト
プラン作成 1. 左端のナビゲーションメニューか ら「プラン」を選択 2. 右に表示される「新規プラン」 を選択 3. 新規プランの追加から下記項目 を入力し、プランの保存
◦ プラン名 ◦ 説明 ※任意 ◦ ラベル ※任意 (GitHub Actionsの ymlファイル設定時に利用 ) ◦ 環境 (直前に設定した Sandbox) ◦ デバイスやブラウザ etc 4. テストは(現時点では)削除
mabl ワークスペースの構造・概要 環境 e.g.サンドボックス 環境 e.g. ステージング 環境 e.g. 本番
アプリケーション アプリケーション アプリケーション ワークスペース テスト プラン テスト テスト テスト テスト テスト プラン プラン プラン テスト テスト プラン プラン テスト • ワークスペース: mablの基本的な構成要素であり、mabl の主要コンポーネントがすべて格納されている • 環境: ソフトウェア開発ライフサイクルのステージ (サンド ボックス、開発、本番など ) • アプリケーション: テスト対象となるソフトウェア アプリケーションやウェブアプリケーションの URL • プラン: mablでテストを実行するための計画や設定を 備えたテストグループ • テスト: 自動化されたエンドツーエンドのテスト e.g. ブラウザテスト、 APIテスト
テスト実行方法概要 mablのテスト実行方法は大きく2種類 • クラウド実行 ◦ mablのクラウド環境上でのテスト実行 ◦ mablのフル機能を使用可能 ◦ 完成したテストの定期実行を行う等
• ローカル実行 ◦ ローカル環境でのテスト実行 ◦ mablの一部機能を使用可能 ◦ 作成したテストの確認を行う等 Source: https://help.mabl.com/docs/test-execution クラウド実行 ローカル実行 単一テスト実行スピード 速い 最速 複数テスト実行スピード 最速 速い 並列実行 無制限 不可 スケジューリング 可能 自作スクリプト レポーティング フル提供 なし ログデータ フル提供 Pass/Failのみ クロスブラウザ サポート Chromeのみ インサイト情報(auto-heal, visual, JS error etc.) フル提供 なし 月次実行回数へのカウント カウントする カウントしない
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
Step 1 連携設定 1. 左端のナビゲーションメニューか ら「ワークスペース」を選択 2. インテグレーションの一覧が 表示されるので、GitHubの 「Learn
more」を選択
Step 1 連携設定 1. mabl botを 「install」 2. インストール先リポジトリを 選択して「install」
3. ブラウザ上でmablの画面に切り 替わる
Step 1 連携設定 1. GitHub Actionsの振舞い設定や インサイトのフィルター設定を行 い「Save」 2. 「アクティブなインテグレーション」
にGitHubが表示されていること を確認
Step 2 連携設定 1. ワークスペースのAPIタブから 「APIキーの作成」をクリック 2. 「APIキーのタイプ」で「CI/CD Integration」を選択 Nameは任意の文字を入力し、保
存
Step 2 連携設定 1. 「APIキー」作成の完了を確認し、 「Key」を控えておく 2. mabl CLIにて、事前作成した 「アプリケーション」と
「環境」を選択して、表示 されたターミナルコマンドから 「--application-id」 「--environment-id」を それぞれ控えておく
Step 3 連携設定 1. GitHubの Setting から Sercrets and variables
を選択しActions から「New repository secret」 を選択 2. Nameを「MABL_API_KEY」、先 にmabl上で作成した「Key」を Secretに入力し、Add secretをク リック
Step 3 連携設定 1. workflowsフォルダ内の static.yml を右記のように 書き換え ◦ mablhq/
[email protected]
に修正 ◦ 控えた application-id, environment-id を入力 ◦ 参考サイトを真似て plan-labels: | を追加 参考サイト: https://github.com/marketplace/actions/run-mabl-tests 2. 「Commit changes…」ボタンを押下後、GitHub Actions が自動実行されるので、Complete するこ とを確認
結果確認 1. mablのナビゲーションメニューから「テスト結果」を 選択し、「デプロイメント別」タブから自動実行 された結果を展開して確認
失敗時の確認項目 • mablの設定 ◦ プランラベル設定、プラン有効化確認 (テスト追加前はプランは無効状態 ) ◦ 適切な API
キー、アプリケーションや 環境の ID を選択 • GitHubの設定 ◦ MABL_API_KEY の設定 (Repository secrets に追加) ◦ yml ファイル設定 (最新Verの適用、plan-labels: | の追加)
★ 今日のポイント! ★ • マーブルではなく「めいぶる」 • 3 StepでGitHubを連携してテストを自動化
For your information
mabl user community! mabl の User Community『mablers_jp』 • ユーザーによるユーザーのための コミュニティ
• ユーザーによる忖度のない生の声を聞く 絶好のチャンス。是非ご参加ください! https://mablersjp.connpass.com/
Join the community! 11/1 FUJIYAMA Tech Showcase #0 • 第0回のテーマは『テスト』!
Postmanさん、MagicPodさんと共同で登壇 • mablのAPIテストについて解説します!
Join the mabl Experience Japan! 11/22 mabl experience’23 Japan •
昨年より2倍のスケールでお届け! オンラインにて開催します。 • https://experience.mabl.com/ja/
Join the conference! 12/9 ソフトウェアテスト 自動化カンファレンス2023 • 本日のデモを実際にお手元の環境で構築する ハンズオンワークショップを提供します! •
CI/CDパイプライン環境構築に興味がある方は 是非ご参加ください!
Questions? odasho (Shohei Oda) Quality Advocate / Product Marketing, mabl
Japan odashoDotCom odasho0618 odasho odasho0618