PlaywrightでOutSystemsアプリのブラウザテストを自動化してみよう！

2024年12月5日に開催されましたイベント「【OSUG*OJEC合同開催】OutSystems Users Meetup in Osaka」で発表した際の資料を共有します！

イベントページ：https://usergroups.outsystems.com/e/mvvz8t/

OutSystems開発におけるアジリティ向上のためにはブラウザテストの自動化が必須です。私はPlaywrightでブラウザテストを自動化していて、初心者向けに概要を紹介しました。

Transcript

1. © 2024 NTT DATA Group Corporation PlaywrightでOutSystemsアプリの ブラウザテストを自動化してみよう！ 島倉 優人 2024年12月05日(木)
2. © 2024 NTT DATA Group Corporation 2 島 倉 優 人 Yuto Shimakura ◼ OutSystems MVP (2024-) ◼ OutSystems User Group(OSUG) Tokyo Organizer (2023-) ◼ イベントの企画や情報発信 ◼ 株式会社NTTデータグループ 技術革新統括本部 Apps&Data技術部 • OutSystemsを中心としたローコードオファリング • ソフトウェアアーキテクチャ • ソフトウェアプロセス ◼ その他 • トップエスイー
3. © 2024 NTT DATA Group Corporation 3 品質は、QCD全体を考慮して 各PJごとに考える必要がある 品質とは？ 開発案件は、品質だけでなく QCD全体を考慮する 必要がある 一般的に、 お金と時間をかければ 品質は向上する ただ一般的に、上限はあるよね 一方で 開発したソフトウェアが 要求を満たせているか Q C D
4. © 2024 NTT DATA Group Corporation 4 質問① • 何らかのテストを自動化していますか??? • BDD / Testing Frameworkを使っている • ブラウザテストを自動化している • 特に取り組んでいない • その他(懇親会で教えてください！)
5. © 2024 NTT DATA Group Corporation 5 質問② • Playwrightって知っていますか??? • 使っている • 名前だけは知っている • 今日初めて聞いた
6. © 2024 NTT DATA Group Corporation 6 本日のゴール(伝えたいこと) • ブラウザテスト自動化 • 概念 • メリット / デメリット • 手段の1つとしてPlaywrightがある
7. © 2024 NTT DATA Group Corporation 7 Playwrightとは？ • Microsoftが開発 • ブラウザテストを自動化できるOSS • ブラウザテスト自動化ツールに必要な機能は備わっている気がする ※個人見解 • Edge / Chrome / FireFox / Safari など主要ブラウザに対応 • ヘッドレス実行もできる • 画面キャプチャも取得できる • 詳細は「Playwright」 or 「プレイライト」で検索 • https://playwright.dev/
8. © 2024 NTT DATA Group Corporation 8 デモ中に扱うアプリ • 足し算アプリ
9. © 2024 NTT DATA Group Corporation 9 Playwright導入の簡単な流れ 1. インストールする (本日は割愛) 2. 使い方を学ぶ (本日は割愛) 3. 操作をレコーディングしながら、スクリプトを作成する (このあとデモ) 4. スクリプトを実行し、ブラウザテストを自動実行する (このあとデモ)
10. © 2024 NTT DATA Group Corporation 10 デモ① 1. インストールする (本日は割愛) 2. 使い方を学ぶ (本日は割愛) 3. 操作をレコーディングしながら、スクリプトを作成する (このあとデモ) 4. スクリプトを実行し、ブラウザテストを自動実行する (このあとデモ) ブラウザ上でアプリを操作する。 スクリプトの雛形が生成される。
11. © 2024 NTT DATA Group Corporation 11 デモ② 1. インストールする (本日は割愛) 2. 使い方を学ぶ (本日は割愛) 3. 操作をレコーディングしながら、スクリプトを作成する (このあとデモ) 4. スクリプトを実行し、ブラウザテストを自動実行する (このあとデモ) 値を自動入力 自動で画面遷移 画面キャプチャも 自動取得
12. © 2024 NTT DATA Group Corporation 12 足し算アプリデモにおける、品質の作り込み/確認のプロセス 品質の作り込み • 要件定義 • デモを実施するにあたって、利用用途や業務フローが 誰でも理解できるシンプルなアプリがほしい(課題)。 • 業務要件として、足し算アプリを作成することに より、課題を解決する。 • (一般論として。足し算アプリではやっていない。 性能やセキュリティなど非機能要求を定義する。) • 設計 / 製造 • 足し算アプリのシステム構造や動作の詳細を明確にする。 • 実際のアプリケーションを作成する。 品質の確認 • 各種テスト工程 • 足し算アプリとして正常に動作しているかを確認する。 • デモが実施できるか確認する。
13. © 2024 NTT DATA Group Corporation 13 足し算アプリデモにおける、品質の作り込み/確認のプロセス 品質の作り込み • 要件定義 • デモを実施するにあたって、利用用途や業務フローが 誰でも理解できるシンプルなアプリがほしい(課題)。 • 業務要件として、足し算アプリを作成することに より、課題を解決する。 • (一般論として。足し算アプリではやっていない。 性能やセキュリティなど非機能要求を定義する。) • 設計 / 製造 • 足し算アプリのシステム構造や動作の詳細を明確にする。 • 実際のアプリケーションを作成する。 品質の確認 • 各種テスト工程 • 足し算アプリとして正常に動作しているかを確認する。 • デモが実施できるか確認する。 テストって1回だけやる 前提で大丈夫だっけ？
14. © 2024 NTT DATA Group Corporation 14 経験上複数回テストすることがあるので、テスト自動化は検討の価値あり！ • もう一回テストする必要に迫られるケース • 「その変更をしたことによって、新たに別のバグ発生しないよね？デグレの心配ない？」 ※ 自問自答、責任者に問われる、などケースは様々 • 「その変更」の例 • アプリ / Forge起因 • 業務要件の変更(例：足し算機能の他に、引き算機能も追加) • バグ修正(例：足し算アプリが想定外の動作をした) • Forgeバージョンアップ • OutSystems Platform起因 • O11におけるバージョンアップ • 脆弱性/バグ対応(例：RPM-3055,3056(2022年12月頃、CVSS Score:10)) • O11からODCへのマイグレーション • 回答案 1. 「全項目を再テストして、確認しました！」 2. 「重要な項目だけ再テストしました！」 3. 「あまりテストしてないけど、これまでデグレ起きてないし大丈夫だと思います！」 • 各PJごとにQCDは違うので、各PJごとに判断 • QCDが達成できたのなら、それが正解！ • アジャイル開発の場合、より頻度は高まる 変更が発生したときに、再テストを自動実行できると、 リリースまでに要する時間や工数を短縮/削減できる！
15. © 2024 NTT DATA Group Corporation 15 O11→ODCマイグレーションに使えるか？ • 次のことを試してみた • O11足し算アプリをODCへ移行 • O11足し算アプリで作成したPlaywrightスクリプトで、URLのみ変更して実行 • そのまま実行できた！ • 今後くるであろうODCマイグレーションの際に、現新比較テストの効率化になる！ • Playwrightのスクリプト • URLだけ変更 • Before : O11版アプリのURL • After : ODC版アプリのURL 自動実行(O11) 自動実行(ODC) 画面キャプチャ(O11) 画面キャプチャ(ODC) 画面キャプチャを比較 ↓ メニューの移行に失敗している！
16. © 2024 NTT DATA Group Corporation 16 留意事項 1. テスト自動化は、手動でテストを実施する場合と比較して、準備工数が発生する 2. 全てのブラウザテストを自動化できるわけではない ※ テストのタスクには、テストデータの準備、テスト結果確認、 テスト証跡取得、など他にもあるが、割愛 テストのタスク 自動テスト 手動テスト 【自動/手動テスト共通】 テスト項目の作成、など - 自動/手動共通 【自動テストonly】 自動テストの準備 ✕ ツール選定、ツールインストール、 ツール習熟、スクリプトの作成、など必要 ◦ 【自動/手動テスト共通】 テストの実施 ◦ 自動で実行できる ✕ 工数比較
17. © 2024 NTT DATA Group Corporation 17 費用対効果の考え方 • 何回もテストをする場合に有効、1回しかやらないなら費用対効果が期待できない テスト実行関連の 累積工数 テスト実行回数 1回目 2回目 3回目 4回目 手動テスト 手動テスト 1回の工数 テスト自動化の 準備工数 自動テスト 1回の工数 自動テスト テスト自動化は準備が必要なので、 繰り返しやらないなら手動で実施 したほうが工数かからない。 どこかのタイミングで、「工数的に テスト自動化しておいて良かった！」 と思える未来がくる！ この例だと、4回以上実施する場合は 費用対効果が期待できる、となる。
18. © 2024 NTT DATA Group Corporation 18 【一部再掲】本日のゴール(伝えたいこと) • ブラウザテスト自動化 • 概念 • メリット / デメリット • 手段の1つとしてPlaywrightがある OutSystemsの魅力の1つは、「ソフトウェアライフサイクルのアジリティ向上」。 変化の激しい時代だし、ブラウザテストを自動化するか検討してみよう！ より変更に強くなろう！
19. 記載されている会社名、商品名、サービス名等は、各社の商標または登録商標です。