見出し画像

PlaywrightとLookerStuidoでテスト結果のダッシュボードを作成してみた 後編

SHIFT Group 技術ブログ

はじめに

こんにちは！SHIFTの平岡です。
今回は「PlaywrightとLookerStuidoでテスト結果のダッシュボードを作成してみた」をテーマに、前後編でご紹介していきたいと思います。

前編では、Playwrightを使用してテスト結果をスプレッドシートに書き込む方法について説明しました。後編では、スプレッドシートの設計からLooker Studioでのグラフや表の可視化までをテーマにします。テストデータを効果的に可視化するためのポイントを解説します。

スプレッドシートの設計

テストデータをLooker Studioで効果的に活用するためには、スプレッドシートの構成を慎重に設計する必要があります。以下のように、テストデータの構成に合わせてスプレッドシートを設計しました。

  • テスト実行結果 - summary

    • 列：「テスト実行ID」「テスト開始時間」「テスト終了時間」

  • テストシナリオデータ - scenarios

    • 列：「テスト実行ID」「テスト開始時間」「テスト終了時間」

  • テストシナリオごとのエラーデータ - scenarios_errors

    • 列：「テスト実行ID」「テスト開始時間」「テスト終了時間」

設計の理由

Looker Studioはレポートやダッシュボードを作成できる強力なツールですが、スプレッドシートのデータをインプットとして活用する場合には注意が必要です。具体的には、以下の点が挙げられます。 今回は、3つのシートとともに「テスト実行ID」（1テストごとにユニーク）「テスト開始時間」「テスト終了時間」の3つの項目を設けてシートの結合ができるようにしておきました。※このデータはPlaywright側で取得しています。

  1. データの結合（Join）機能の制限:

  • Looker Studioにはシートをまたいだデータを連携させるための結合機能があります。無償ツールならではの制限が影響することもありますが、データの構造を事前に設計しておくことLooker Studioに読み込ませる前に事前にデータを成形しておくなどの対応でクリアできます。

  1. データの活用方法:

    • 「とりあえずデータを入れておいて、それをLooker Studio側でうまく活用する」という考え方ではなく、「Looker Studioでうまく使うためにデータの構造を設計してあげる」というアプローチが必要です。これにより、データの可視化がスムーズになり、より効果的な分析が可能になります。

Looker Studioでの可視化

スプレッドシートのデータをLooker Studioにインポートし、グラフや表を作成する際には、以下の手順を踏むことが一般的です。

  1. データソースの接続:

    • スプレッドシートをデータソースとして接続します。これにより、スプレッドシート内のデータをLooker Studioで利用できるようになります。

  2. データの整形:

    • インポートしたデータを基に、必要なフィールドを選択し、グラフや表に適した形式に整形します。特に、Summary、scenarios、scenarios_errorsの各シートから必要な情報を抽出します。

  3. グラフや表の作成:

    • データを可視化するためのグラフや表を作成します。テストの合格率やエラーの発生状況など、分析したいポイントに応じて適切なビジュアルを選択します。

  4. ダッシュボードの構築:

    • 複数のグラフや表を組み合わせてダッシュボードを構築します。これにより、テスト結果の全体像を一目で把握できるようになります。

ダッシュボードのイメージ（例）

自動テストの実行結果

機能別に

まとめ

スプレッドシートの設計とLooker Studioでの可視化は、テストデータを効果的に分析するための重要なステップです。データの構造を事前に設計し、Looker Studioでの活用を考慮することで、より効果的なレポートやダッシュボードを作成することが可能になります。ぜひ、これらのポイントを参考にして、プロジェクトに取り入れてみてください。

最後までお読みいただきありがとうございました！

執筆者プロフィール：平岡 拓人
SHIFTの平岡です。入社3年目になります。 新卒で独立系SIerに就職し主にWEBシステムの構築に携わり、要件定義から開発まで経験しました。 システム開発以外には、サーバの構築やNW構築経験があります。 2021年11月よりSHIFTで勤務しております。 主にQA・スクラムに関する業務に従事しており チャットアプリの技術支援としてコードから画面遷移図などのドキュメントを作成したりテストコードの開発を行っています。 趣味：#バスケ#キャンプ＃登山＃グルメ

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/

PHOTO：UnsplashのJonathan Simcoe

最後まで読んでくださり、ありがとうございます！

御社サービスのご相談はお気軽に。
ソフトウェア品質のプロがお伺いします。