Playwrightとmablのパワフルな統合： 効率的なテスト自動化を実現する新機能を学ぶ！

2025年5月14日に開催された mabl のウェビナー「Playwrightとmablのパワフルな統合： 効率的なテスト自動化を実現する新機能を学ぶ！」で使用したスライドです。
https://mabl-japan.connpass.com/event/352038/

Transcript

1. Playwrightとmablのパワフルな統合： 効率的なテスト自動化を実現する新機能を学ぶ！ mabl ソリューションエンジニア 舟木 将彦
2. スピーカー 舟木 将彦 • Dejima社にて自然言語対話エンジンの開発を 担当後、SAP、MSを経て、CircleCI、mablにてお客 様の開発プロセスの自動化を推進。 • mabl大学 東京校にてmabl活用ビデオを公開 https://university.mabl.com/page/ja-tokyo-classes ソリューションエンジニア, mabl
3. 本日の内容 • 会社紹介 - mabl(めいぶる)とは • mablとPlaywrightの関係性 • mablでテストを作成する • 作成したテストをPlaywright形式でエクスポートする • Playwrightテストをmablにインポートする • Playwrightテストからmablを活用する • まとめ
4. 会社紹介 - mabl (めいぶる)とは • 2017年ボストンで創業 • 2021年8月に日本法人設立 • グローバルの従業員数は 約110名 • Fortune Globalの35社含む400社弱が採用 • GV、CRV、Amplify、Vista Equity Partner、 Presidioより 7,700万ドル (120億円) を調達 2023 Best AI-based Solution for Engineering 2022 Best AI-based Solution for Engineering 2020 Best AI-based Solution for Engineering 2019 Best AI Tool for Developer https://aibreakthroughawards.com/ 2024 Best AI-based Solution for Engineering
5. 求める品質に対するギャップの拡大 開発 (Dev) ウォーター フォール 手動 アジャイル 品質保証 (QA) 旧来のテスト自動化 オープンソースの テスト自動化 DevOps 最新の テスト自動化 品質に 対する ギャップ 生成 AI 時間 速度 「2028年までに、エンタープライズソフトウェア エンジニアの 75% が AI コードアシスタントを使用し、 開発速度を劇的に加速させるでしょう」 - ガートナー 「コードアシストを使用する開発者は、タスクを 55% 速く完 了しています。」 - GitHub
6. API テスト 利用技術 ウェブアプリ テスト 外部のアプリや サービスと連携した 最新のウェブアプリをテ スト 利用技術 モバイルアプリ テスト 利用技術 mabl: 最新の品質プラットフォーム ネイティブ、および WebViewモバイル アプリをテスト Postmanから インポートされた APIテストを実行 AI アプリ テスト AI アプリの 動的な振る舞いを テスト 利用技術
7. 1. mablとPlaywrightの関係性
9. ❤
10. Playwright & mabl - いいとこ取りすると Playwright でテストを書いたら、 mablと連携して実行できます！ (mabl独自機能の利用、 テスト結果をmablと共有) mablにPlaywrightテストをインポー トすることも、mablからPlaywright コードをエクスポートすることもできま す！ ローコードの容易さ テストのバージョニング AIを活用したロバストなテスト スケーラブルな実行環境などなど 一緒に使えます！ インポート/エクスポートで きます E2Eテストを欲しい 形で
11. 2. mablでテストを作成する
12. Wikipedia で Playwright を検索するテスト 2. mablでテストを作成する
13. 3. 作成したテストをPlaywright形式でエ クスポートする
14. 作成したテスト「Wikipedia - キーワード検索」 3. 作成したテストを Playwright形式でエクスポートする
15. Playwright テストファイルにエクスポート 3. 作成したテストを Playwright形式でエクスポートする • ▶ CLI コマンド： mabl tests export --format playwright {test-id} --environment-id {environment-id} --file tests/XXX.mabl.spec.ts • environment-idを指定しないと、次の警告が表示される • ちなみに、環境 (environment-id) の一覧は mabl environments list
16. Playwright テストファイルに賢くエクスポート 3. 作成したテストを Playwright形式でエクスポートする
17. エクスポートされないもの 3. 作成したテストを Playwright形式でエクスポートする • 選択ステップ • ドラッグ&ドロップステップ • JavaScriptスニペット • APIリクエスト • Cookieの使用 • ファイルのアップロード • ダウンロードのアサーション • アクセシビリティテストの概要 • MFA authenticatorステップ • メールのテスト • PDFテスト
18. 4. Playwrightテストを mablにインポートする
19. サンプル(example.spec.ts)をインポート 4. Playwrightテストをmablにインポートする
20. Playwright テストファイルをインポート 4. Playwrightテストをmablにインポートする • ▶ CLI コマンド： mabl tests import playwright --path {path-to-playwright-tests} --workspace-id {workspace-id} --project {project-name} • 実行結果
21. インポート結果１ 4. Playwrightテストをmablにインポートする
22. インポート結果２ 4. Playwrightテストをmablにインポートする
23. mabl にインポートするメリット 4. Playwrightテストをmablにインポートする • テストの修正が容易になる(Playwrightを知らなくてもよい) • テストの実行が高速になる ◦ Playwrightベース: 基本的に直列実行。 　テストシャーディング(分割)しても並列実行するのは 　自分で管理 ◦ mablにインポート後: mablクラウド上で並列実行可能 • テストが賢くなる(画面の変化に対してロバストになる) ◦ ロケーターの自己修復機能が使える
24. 5. Playwrightテストから mablを活用する
25. Playwrightユーザーが抱える課題 5. Playwrightテストからmablを活用する • ✅ テストコードの柔軟性は高いが、可視化・連携は別問題 • ✅ バグ修正や新機能にすばやく対応したいが、管理が煩雑 • ✅ 技術者と非技術者の間で結果共有が難しい
26. Playwrightテストの機能を拡張 PDF の テスト メールの テスト データベース のテスト 生成AI アサーション クラウド クレデンシャ ル MFA ワークフロー テスト結果を一元管理することで チーム内で品質を見える化する mabl Tools for Playwright 5. Playwrightテストからmablを活用する npm install @mablhq/playwright-tools -D npm install @mablhq/playwright-reporter -D
27. mablがご提案したいこと 5. Playwrightテストからmablを活用する • 📊 一元管理：全てのテストと結果を１つのポータルで把握 • 🤖 ローコード：非エンジニアも使える操作感 • 🔁 Playwright連携：コードによる自由度も維持
28. サンプル 5. Playwrightテストからmablを活用する • https://github.com/mablhq/mabl-playwright-integrations
29. 受信したメールをアサートする 5. Playwrightテストからmablを活用する Webアプリケーション側 mablが払い出したメールアドレス (emailAddress)に対して、 指定したサブジェクト(subject)、 本文(body)でメール送信 テストコード側 mablが払い出したメールアドレスに メールが着信したら、 メールアドレス、サブジェクト、本文、 発信元メールアドレスをチェック
30. Playwrightレポーターでテスト結果を共有 • Playwrightプロジェクトに対して「レポーター」として レポート先に mabl (@mablhq/playwright-reporter) を 指定するだけ • 個々のテストファイルの中で、ログ出力処理等を mabl用に追加する必要はない • テストの実体はmabl側にはないので、テスト結果を追加する 先の アプリケーション x 環境 を指定することが可能 (テスト結果をフィルタリングするため)
31. プロジェクトへの定義 (playwright.config.ts) 1. mablとPlaywrightの関係性 レポーターの定義
32. 6. まとめ
33. 開発とテストとのスピード感のギャップを埋めよう 開発 (Dev) ウォーター フォール 手動 アジャイル 品質保証 (QA) 旧来のテスト自動化 オープンソースの テスト自動化 DevOps 最新の テスト自動化 品質に 対する ギャップ 生成 AI 時間 速度 「2028年までに、エンタープライズソフトウェア エンジニアの 75% が AI コードアシスタントを使用し、 開発速度を劇的に加速させるでしょう」 - ガートナー 「コードアシストを使用する開発者は、タスクを 55% 速く完 了しています。」 - GitHub
34. よくある質問 • 🤔 mabl と Playwright は二者択一ですか？ →両立できます！ • 🤔 導入は大変ですか？ →トライアル環境＋サポートあり • 🤔 社内展開のコツは？ →レポートや自動通知の活用がカギ
35. トライアルで体感する まとめ URL: https://mabl.com/ja/
36. 新規開校した mabl大学 東京校で学ぶ まとめ URL: https://university.mabl.com/page/ja-tokyo-classes
37. 6月のmablウェビナーは https://mabl-japan.connpass.com/event/354971/
38. アンケートにお答えください！ 本日はご参加いただき ありがとうございます！ mablご紹介ウェビナーのアンケート 回答にご協力お願いします。
39. Thank You!