Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

odasho
December 09, 2023

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

2023/12/9 ソフトウェアテスト自動化カンファレンス2023のワークショップにて使用したスライドです。

odasho

December 09, 2023
Tweet

More Decks by odasho

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. パフォーマンス評価

    View full-size slide

  15. Let's begin your hands-on!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Microsoft Azure

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 参考ドキュメント - テスト作成 -
    ● ブラウザテストの作成
    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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. 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 するこ
    とを確認

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. For your
    information

    View full-size slide

  52. 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 に掲載可能

    View full-size slide

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

    View full-size slide

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

    View full-size slide