ChatGPT × Azure × GitHub × mablで実現するリグレッションテスト自動化ワークショップ！

Slide 1

Slide 1 text

で実現するリグレッションテスト自動化ワークショップ！ 2023/12/9 Software Testing Automation Conference 2023

Slide 2

Slide 2 text

Speaker Proﬁle 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、名城大学情報工学部講師 Yuki Shimizu 国内Sier→Datadog→Workato→mabl! Sierで開発・運用を経験後、DevOpsモニタリング製品 Datadog（日本人社員2号）とアプリやサービスを統合的に自動化連携するiPaaS製品Workatoでプリセールスを経験し、 2023年4月からmablのモダンなテストオートメーション＆テスト結果分析に惹かれプリセールとしてJoin！ Solutions Engineer, mabl Japan

Slide 3

Slide 3 text

★ 必要なもの ★ ● Azure Static Web Apps ● ※無料アカウントでOK ● GitHub のレポジトリ ※ ChatGPT Advanced Data Analysis (GPT-4)がコード出力したシンプルなHTMLを配布します。 ● mabl アカウント ※トライアルアカウントでOK

Slide 4

Slide 4 text

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月に日本法人設立

Slide 5

Slide 5 text

DevOpsに対応したテスト自動化プラットフォームノーコード/ローコード UIテスト & APIテストデータ/インサイト結果データを自動取得単一プラットフォーム E2E、API、A11y、Perf 顧客体験を広くカバー　 Email送信/PDFアサート開発ツール連携 GitHub、Slack、Jira等テストメンテナンス削減テストの自動修復

Slide 6

Slide 6 text

ローコードテスト自動化 mablのスコープ単体テスト API/結合テスト UI/E2Eテスト探索的テスト

Slide 7

Slide 7 text

エンタープライズ対応のセキュリティ mabl Link ● 暗号化されたWebソケットコネクション ● テスト実行時にF/W内からアウトバウンド通信のみ ● Proxyサーバー経由も可能 SOC II Type 2 GDPR

Slide 8

Slide 8 text

10倍早くテスト実行より良い品質のソフトウェアをより早く提供 ROI data based on customer case studies compared to Selenium frameworks and other commercial tools 3倍早くテストを構築速く作る効率改善コスト削減高速化 70% メンテナンス時間を削減 80% Seleniumより低コスト

Slide 9

Slide 9 text

品質指標を使用した継続的な改善非機能的品質の検証シフトレフト: 自動化されたテストを開発に組み込む機能テスト自動化のカバレッジ拡大開発後に手動でテスト品質エンジニアリング (QE) ジャーニー QEの成熟度

Slide 10

Slide 10 text

ローコードで「意図」と「実装」を分ける

Slide 11

Slide 11 text

自動修復でメンテナンス作業を削減

Slide 12

Slide 12 text

GCP上で並列テストを無制限に実行 Show screenshot of a plan

Slide 13

Slide 13 text

テストカバレッジレポート

Slide 14

Slide 14 text

パフォーマンス評価

Slide 15

Slide 15 text

Let's begin your hands-on!

Slide 16

Slide 16 text

既存ツールとの統合 DevOpsツールセットとの統合 CI/CDインテグレーション Mabl アプリ (デスクトップ、Web) Mabl Cloud レートコラレーションツールお使いのアプリケーション Mabl Link optional バグ追跡

Slide 17

Slide 17 text

CIツールとの統合によって表示される... ...またはCLIコマンドを直接使用する。 CI/CDパイプラインへの統合

Slide 18

Slide 18 text

Slide 19

Slide 19 text

GitHub

Slide 20

Slide 20 text

GitHub レポジトリ作成 1. GitHubにログイン 2. 「Repositories」から「New」をクリックし、新しいレポジトリを作成を開始する。 3. 任意のレポジトリ名を入力 (画像はmabldemo008 と入力)、任意で「Add a README ﬁle」のチェックボックスにチェックを入れる。 4. 「Create repository」をクリックし、レポジトリ作成を完了する。

Slide 21

Slide 21 text

GitHub 上に HTML コードをアップロード 1. 「Add file」から「Upload file」をクリックし、「choose your files」から配布した index.html を選択しアップロードする。 2. 今回は pull request せずに、 main ブランチに直接 Commitする。 3. レポジトリ上で「README.md」と「index.html」の存在を確認する。

Slide 22

Slide 22 text

Microsoft Azure

Slide 23

Slide 23 text

Azure Static Web Apps の設定 1. Microsoft Azure にログイン 2. Azure ポータルから「静的Webアプリ」を選択 (一覧に表示されていない場合は検索する )。 3. 「作成」をクリックし、設定画面を表示する。 4. リソースグループ (リソースの入れ物) を「新規作成」し、任意の名前を入力する。 5. 静的Webアプリの詳細にて、任意の「名前」を入力する。

Slide 24

Slide 24 text

Azure Static Web Apps の設定 1. ホスティングプランにて、プランの種類は「 Free」が選択されていることを確認する。 2. Azure Functions とステージングの詳細にて、 Azure Functions とステージングの環境のリージョンは「East Asia」を選択する。 3. デプロイの詳細にて、ソースは「 GitHub」を選択、「GitHubアカウントでサインイン」をクリックする。

Slide 25

Slide 25 text

Azure Static Web Apps の設定 1. 別ウインドウが立ち上がり、 Authorize Azure Static Web Apps 連携画面の表示を確認する。 2. 「Authorize Azure-App-Service-Static-Web-Apps」をクリックし、連携を完了する。 3. Azureへ画面が戻ったことを確認し、作成した GitHubの環境に合わせて入力する。組織: GitHub アカウント名レポジトリ: GitHub 作成済新規レポジトリ名分岐: main

Slide 26

Slide 26 text

Azure Static Web Apps の設定 1. 続けてビルドの詳細を作成したGitHubの環境に合わせて入力する。ビルドのプリセット: HTML アプリの場所: / APIの場所: 空欄出力先: / 2. 入力が完了したら、「確認および作成」をクリックして、設定内容に誤りがないことを確認した上で、「作成」をクリックする。 3. デプロイが完了するまで待つ。

Slide 27

Slide 27 text

Azure Static Web Apps の設定 1. デプロイが完了したら、「リソースに移動」をクリックする。 2. (少し時間を置いてから)「ブラウザーでアプリを表示」 or 「URL」をクリックすることで、デプロイした Webアプリを閲覧できる。 3. GitHub に戻り、.github/workﬂows フォルダの追加を確認する。 ※ GitHub Actions の設定が完了しているので、余裕があれば、「Setting」→「secrets and variables」→「Actions」から Repository secrets に Azure Static Web Apps のAPI登録を確認する。

Slide 28

Slide 28 text

mabl

Slide 29

Slide 29 text

mabl ワークスペースの構造・概要環境 e.g.サンドボックス環境 e.g. ステージング環境 e.g. 本番アプリケーションアプリケーションアプリケーションワークスペーステストプランテストテストテストテストテストプランプランプランテストテストプランプランテスト ● ワークスペース: mablの基本的な構成要素であり、mabl の主要コンポーネントがすべて格納されている ● 環境: ソフトウェア開発ライフサイクルのステージ (サンドボックス、開発、本番など ) ● アプリケーション: テスト対象となるソフトウェアアプリケーションやウェブアプリケーションの URL ● プラン: mablでテストを実行するための計画や設定を備えたテストグループ ● テスト: 自動化されたエンドツーエンドのテスト e.g. ブラウザテスト、 APIテスト

Slide 30

Slide 30 text

テスト環境設定 ● 左端のナビゲーションメニューから「テスト環境設定」を選択 ● 右に表示される「新規アプリケーション」を選択 ● New applicationから下記項目を入力し、保存 ○ Application name ○ 説明 ※任意 ○ WebアプリケーションのURL ○ 環境名 (今回は事前設定した Sandbox)

Slide 31

Slide 31 text

Slide 32

Slide 32 text

プラン作成 1. 左端のナビゲーションメニューから「プラン」を選択 2. 右に表示される「新規プラン」を選択 3. 新規プランの追加から下記項目を入力し、プランの保存 ○ プラン名 ○ 説明 ※任意 ○ ラベル ※任意 (GitHub Actionsの ymlファイル設定時に利用 ) ○ 環境 (直前に設定した Sandbox) ○ デバイスやブラウザ etc 4. テストは(現時点では)削除

Slide 33

Slide 33 text

Slide 34

Slide 34 text

1. mabl デスクトップアプリにログインする。 2. 左端のナビゲーションメニューから「テスト作成」を選択する。 3. テスト種類の選択が表示されるので「ブラウザテスト」を選択する。 4. 新規ブラウザテストの作成フォームが表示される。テスト作成（ログインシナリオ）

Slide 35

Slide 35 text

テスト作成（ログインシナリオ） 1. 新規ブラウザテストの作成フォームの下記項目に入力する。 ○ テスト名 ○ 説明 ※任意 ○ プランに追加 → (作成した) 既存プラン 2. 「作成」ボタンをクリックする。 3. テスト作成後、プランに戻り、先ほど作成したプランのオン/オフを「オン」にする。

Slide 36

Slide 36 text

テスト作成（ログインシナリオ） 1. Chromeブラウザのウィンドウと mablトレーナーウィンドウが表示される。 ● Chomeブラウザ：テスト対象アプリが表示された Chromeブラウザ ● ｍablトレーナー：テストの作成および編集するためのインタラクティブなツール 2. 既に Rec 状態でありブラウザ操作が記録可能となる。テスト作成後に「保存」して終了する。 Chromeブラウザ mablトレーナー

Slide 37

Slide 37 text

参考ドキュメント - テスト作成 - ● ブラウザテストの作成 https://help.mabl.com/docs/deﬁning-a-test-with-the-mabl-trainer-ja ● mablトレーナー https://help.mabl.com/docs/the-mabl-trainer-ja ● アサーション https://help.mabl.com/docs/assertions-ja

Slide 38

Slide 38 text

テスト実行（アドホックローカル実行） 1. デスクトップアプリケーションより、作成したテスト確認画面右上のテスト「実行ボタン」をクリックする。 2. アドホック実行の「ローカル実行」を選択し、「テストを1回実行」ボタンをクリックする。ブラウザとプロンプト画面が表示されてローカルでテストが実行される。 ※「ローカル実行」は、ユーザーのマシンのローカルで実行されるが、実行結果は保存されない。作成されたテスト内容の検証やコーディング時の実行が最適。

Slide 39

Slide 39 text

テスト実行（アドホッククラウド実行） 1. デスクトップアプリケーションより、作成したテスト確認画面右上のテスト「実行ボタン」を押下する。 2. アドホック実行の「クラウド実行」を選択し、「テストを1回実行」ボタンを押下 ※「クラウド実行」は、mablのクラウド環境上でテストが実行され、クロスブラウザのテストや、各ステップごとのエビデンス・ログの保存・確認が可能。定期実行に最適。

Slide 40

Slide 40 text

テスト実行方法概要 mablのテスト実行方法は大きく2種類 ● クラウド実行 ○ mablのクラウド環境上でのテスト実行 ○ mablのフル機能を使用可能 ○ 完成したテストの定期実行を行う等 ● ローカル実行 ○ ローカル環境でのテスト実行 ○ mablの一部機能を使用可能 ○ 作成したテストの確認を行う等 Source: https://help.mabl.com/docs/test-execution クラウド実行ローカル実行単一テスト実行スピード速い最速複数テスト実行スピード最速速い並列実行無制限不可スケジューリング可能自作スクリプトレポーティングフル提供なしログデータフル提供 Pass/Failのみクロスブラウザサポート Chromeのみインサイト情報（auto-heal, visual, JS error etc.）フル提供なし月次実行回数へのカウントカウントするカウントしない

Slide 41

Slide 41 text

参考ドキュメント - テスト実行 - ● テスト実行の概要 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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Step 1 連携設定 1. 左端のナビゲーションメニューから「ワークスペース」を選択 2. インテグレーションの一覧が表示されるので、GitHubの「Learn more」を選択

Slide 44

Slide 44 text

Step 1 連携設定 1. mabl botを「install」 2. インストール先リポジトリを選択して「install」 3. ブラウザ上でmablの画面に切り替わる

Slide 45

Slide 45 text

Step 1 連携設定 1. GitHub Actionsの振舞い設定やインサイトのフィルター設定を行い「Save」 2. 「アクティブなインテグレーション」にGitHubが表示されていることを確認

Slide 46

Slide 46 text

Step 2 連携設定 1. ワークスペースのAPIタブから「APIキーの作成」をクリック 2. 「APIキーのタイプ」で「CI/CD Integration」を選択 Nameは任意の文字を入力し、保存

Slide 47

Slide 47 text

Step 2 連携設定 1. 「APIキー」作成の完了を確認し、「Key」を控えておく 2. mabl CLIにて、事前作成した「アプリケーション」と「環境」を選択して、表示されたターミナルコマンドから「--application-id」「--environment-id」をそれぞれ控えておく

Slide 48

Slide 48 text

Step 3 連携設定 1. GitHubの Setting から Sercrets and variables を選択しActions から「New repository secret」を選択 2. Nameを「MABL_API_KEY」、先にmabl上で作成した「Key」を Secretに入力し、Add secretをクリック

Slide 49

Slide 49 text

Step 3 連携設定 1. workﬂowsフォルダ内の 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 することを確認

Slide 50

Slide 50 text

結果確認 1. mablのナビゲーションメニューから「テスト結果」を選択し、「デプロイメント別」タブから自動実行された結果を展開して確認

Slide 51

Slide 51 text

失敗時の確認項目 ● mablの設定 ○ プランラベル設定、プラン有効化確認 (テスト追加前はプランは無効状態 ) ○ 適切な API キー、アプリケーションや環境の ID を選択 ● GitHubの設定 ○ MABL_API_KEY の設定 (Repository secrets に追加) ○ yml ファイル設定 (最新Verの適用、plan-labels: | の追加)

Slide 52

Slide 52 text

★ 今日のポイント！ ★ ● マーブルではなく「めいぶる」 ● ローコードで誰でも自動テストを作成可能 ● 3 Stepで GitHub と mabl を簡単に連携

Slide 53

Slide 53 text

For your information

Slide 54

Slide 54 text

About the mabl University How-to Videos (English only) How-to Lessons (Japanese only) On-Demand Training (English & Japanese) mabl Skills Certiﬁcations (English & Japanese) ● 33 ビデオ (各3 - 8 分程度) ● 英語字幕あり、日本語字幕なし ● 26 レッスン ● Step by stepで学習可能 ● 4 ラーニングパス ● 設定、基礎、高度、統合でそれぞれ30 - 90 分の学習パス ● 学習目標に応じたパスを提供 ● 3 つの資格 ● Foundations と Advanced ● NonFunctional ←NEW ● LinkedIn に掲載可能

Slide 55

Slide 55 text

Join mablers_jp Community! 12/21 集えmablers! オフラインMeetUp vol.1 ● mablers_jp 初のオフラインで開催するコミュニティイベント！ ● mablの最新Update情報だけでなく、実際の mabl運用についての事例セッションも！

Slide 56

Slide 56 text

Questions? odasho (Shohei Oda) Quality Advocate / Product Marketing, mabl Japan odashoDotCom odasho0618 odasho odasho0618 Yuki Shimizu Solutions Engineer, mabl Japan