テストもAI活用の時代!? GitHub Copilot と mabl による テスト自動化の新潮流

2023/8/28 mabl Webinarにて使用したスライドです。

Transcript

1. テストもAI活用の時代!?
   GitHub Copilot と mabl による
   テスト自動化の新潮流
   2023/8/28 mabl Webinar #21
   

   View 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を中心に複数のコミュニティを運
   営/支援。
   Most DevRel Committer 2020、名城大学情報工学部講師
   

   View Slide

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

   View Slide

4. DevOpsで顕在化するQA対応の諸問題
   スピード： 従来のテストアプローチで
   は、急速な開発に対応できない
   メンテナンス： テストのメンテナンスに
   膨大な時間がかかる
   サイロ化：テストが開発部門やQA部門で
   サイロ化され、可視性や信頼性が下がる
   ユーザー重視： 時間と技術の制約が顧客
   体験向上への注力を阻む
   

   View Slide

5. カスタマーエクスペリエンスはなぜ重要？
   一度でも嫌な体験をしたら、
   好きなブランドでも離れる
   と回答
   ポジティブな体験の方が
   広告よりも影響力がある
   と回答
   より良い体験が得られるなら
   お気に入りのブランドから
   他のブランドに乗り換える
   可能性が大いにある
   と回答
   Source: PWC, Experience is everything: Here’s how to get it right
   52%
   65%
   32%
   

   View Slide

6. すでに使用しているツールに
   自動テストをシームレスに組み込む
   スピード感と拡張性があり、
   必要な場面で信頼性の高い
   品質フィードバックを提供
   高速開発チームのためのローコードテスト自動化
   UI、API、モバイル、アクセシ リティ、
   パフォーマンスに関する包括的な
   エンドツーエンドのテストカバレッジ
   

   View Slide

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

   View Slide

8. mablのスコープ
   単体テスト
   API/結合テスト
   UI/E2Eテスト
   探索的テスト
   

   View Slide

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

   View Slide

10. アクティブユーザー数
    48%
    2%
    13%
    2%
    2%
    12%
    21%
    

    View Slide

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

    View Slide

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

    View Slide

13. GitHub Integration demo
    

    View Slide

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

    View Slide

15. CI/CDパイプラインへの統合
    CIツールとの統合
    またはCLIコマンドによる直接実行
    

    View Slide

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

    View Slide

17. ★ 必要なもの ★
    ● GitHub Actions 設定済のレポジトリ
    ※今回は GitHub Pages も設定済
    ※ ChatGPT Code interpreter で
    コード出力したシンプルなWebサイト
    ● mabl アカウント
    ※トライアルアカウントでOK
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. テスト作成
    1. 左端のナビゲーションメニューか
    ら「テスト作成」を選択
    2. テスト種類の選択が表示されるの
    で、「ブラウザテスト」を
    選択
    3. 新規ブラウザテストの作成フォー
    ムが表示される
    

    View Slide

24. テスト作成
    1. 新規ブラウザテストの作成フォームの下記項目を入
    力
    ○ プラン名
    ○ 説明 ※任意
    ○ テストラベル ※任意
    ○ プランに追加 → 設定した既存プラン
    2. 「作成」ボタンを押下後、ブラウザと
    mabl
    トレーナーが立ち上がったことを確認し、
    テストのレコーディングを開始
    

    View Slide

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

    View Slide

26. https://github.com/apps/mabl-bot
    GitHub Integration
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. 連携設定と自動実行
    1. workflowsフォルダ内の static.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 するこ
    とを確認
    

    View Slide

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

    View Slide

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

    View Slide

36. For your
    information
    

    View Slide

37. mabl user community!
    mabl の User Community『mablers_jp』
    ● ユーザーによるユーザーのための
    コミュニティ
    ● ユーザーによる忖度のない生の声を聞く
    絶好のチャンスです。是非ご参加ください！
    https://mablersjp.connpass.com/
    

    View Slide

38. You can try it now!
    ● 今すぐできる2週間の無料トライアル！
    mabl Uのお供にどうぞ！
    ● デモリクエストも大歓迎！
    https://www.mabl.com/ja
    

    View Slide

39. 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 Slide

40. About the mabl Skills Certification
    出題数60問の選択式テストを通じて、mablのナビゲー
    ション、設定、テスト作成、出力、自動テスト戦略につい
    て解答し、examをパスしましょう！
    Why get certified?
    ● LinkedInで認定資格合格後を登録可能
    ● 認定資格試験の取得を通じてmablプラットフォー
    ムの一定への知見をアピールできます
    ● mablers_jpのようなコミュニティを通じて、得たス
    キルを活かしたOutputをしましょう！
    ● 2023年3月～日本語での提供を開始しました
    

    View Slide

41. Join our workshop!
    9/26 mabl online workshopを開催！
    ● お手元の環境で、mablのローコード/ノー
    コードテストを体験してみましょう！
    ● E2Eテストを中心にエキスパートが解説！
    

    View Slide