SpeedData

Catchpointの合成監視にPlaywrightが使われるのはなぜか

Catchpointの合成監視にPlaywrightが使われるのはなぜか

CatchpointとPlaywrightが実現する次世代Web監視

2025年3月17日
著者: Arunita Banerjee
翻訳: 永　香奈子

この記事は米Catchpoint Systems社のブログ記事「Why use Playwright in Catchpoint for synthetic monitoring」の翻訳です。
Spelldataは、Catchpointの日本代理店です。
この記事は、Catchpoint Systemsの許可を得て、翻訳しています。

現代のWebサイトは、すべてのクリック、ログイン、チェックアウトがスムーズに実行されるよう、継続的な監視を必要とします。
そこで活躍するのが合成監視(Synthetic Monitoring)です。
これは、疲れ知らずの仮想訪問者のように動作し、実際のユーザに影響を与える前にパフォーマンスの問題を発見します。

当社のInternet Performance Monitoring（IPM）プラットフォームは、Playwrightのサポートを特長としています。
新規または既存のPlaywrightスクリプトを、ほとんど変更することなく実行することができます。
約3,000のインテリジェントなエージェントからなるグローバルネットワークの力と、多機能なPlaywrightスクリプト言語を組み合わせることで、Catchpointは堅牢なブラウザシミュレーションをモニタリング戦略に組み込むことをこれまでになく簡単にします。

本記事では、CatchpointのPlaywright統合がどのように合成監視を強化し、問題が顧客に届く前に検出することを可能にするかを探っていきます。

Playwrightとは？

Playwrightは、多様なブラウザ間で複雑なユーザ操作をシミュレーションできる多機能なブラウザ自動化フレームワークです。
直感的なAPIを備えており、Webアプリケーションをナビゲートし、要素と対話し、デジタル体験のすべての部分が期待通りに機能しているかを検証する包括的なスクリプトを構築することができます。

Playwrightの主な機能

マルチブラウザ対応
Chromium、Firefox、WebKit上でのテスト自動化が可能です。
アクションのための豊富なAPI
クリック、入力、選択などの操作を簡単に実行できます。
堅牢なアサーション
要素、テキスト内容、URL、属性を強力なアサーションで検証できます。
非同期処理の対応
waitForSelector、waitForEvent、waitForResponseなどの組み込みメソッドにより、動的な環境でも信頼性の高いテストが実現できます。
シームレスな統合
PlaywrightスクリプトはCatchpointで直接実行可能であり、Webテストおよびモニタリングに包括的なアプローチを提供します。

CatchpointでPlaywrightスクリプトを実行することによって得られるメリット

Playwrightは、Web開発者やテスターの間で急速に人気を集めているツールです。
CatchpointのIPMプラットフォームでPlaywrightがサポートされることで、強力なブラウザ自動化フレームワークと、エンドツーエンドのパフォーマンス可視化を可能にする広大なグローバルネットワークという、両方の利点を享受することができます。
以下はそのメリットです。

1.インテリジェントなグローバルネットワークエージェント
Catchpointの約3,000のインテリジェントなエージェントからなるグローバルネットワークは、ラストマイル、バックボーン、ワイヤレス、クラウド、マルチアクセスエッジコンピューティングプロバイダにわたって展開されています。
ユーザにとって重要な場所からテストを実施することで、パフォーマンスに関する真のエンドツーエンドの可視性を得ることができ、問題の発生場所を正確に特定するのに役立ちます。
2.シンプルなエンドツーエンドテスト
わずか数行のコードでフルブラウザトランザクションを自動化できます。
eコマースサイトでの商品検索やログインフローの検証など、複雑なタスクを素早くスクリプト化できます。
Catchpointはこれらのテストをグローバルエージェントネットワークから繰り返し実行し、ユーザが問題に直面する前に発見・修正するのを支援します。
3.高い信頼性と精度
Playwrightには、toHaveURL()、toBeVisible()、toHaveText()などの強力なアサーションメソッドが含まれており、テストが本当に重要な部分を正確に検証します。
これにより、ユーザがシームレスな体験を享受できるようになります。
4.強化されたデバッグとインサイト
Playwright（waitForSelector、waitForResponseなど）の待機メソッドを使用して、非同期イベントを効果的に処理できます。
これにCatchpointのトレースポイント設定やインジケータといった独自機能を組み合わせることで、実環境下でのパフォーマンスと挙動に関する深いインサイトを得ることが可能です。
5.Catchpoint独自の機能拡張
当社の統合は、Catchpoint.username()、Catchpoint.storeGlobalVariable()、Catchpoint.startStep()といったメソッドを追加することでPlaywrightの機能を拡張します。
これらにより、認証情報の管理、グローバル変数の保存、テストステップの論理的なグループ化が可能となり、テストの作成と実行が効率化されます。
6.マルチブラウザ対応
Playwrightは、Chromium、Firefox、WebKitをサポートしており、主要なブラウザでのWeb体験のパフォーマンスを検証できます。 IPMおよびそのリアルユーザモニタリング（RUM）機能と組み合わせることで、各ブラウザが実環境下でどのように動作するかを把握し、すべてのユーザに一貫した体験を提供することができます。

仕組み

CatchpointとPlaywrightがどのように連携しているかを理解するために、モニタリングのワークフローを簡単にご紹介します。
これは、ユーザからの最初のリクエストから最終的な結果のログ記録までの流れです。

CatchpointとPlaywrightの連携の仕組み
CatchpointとPlaywrightの連携の仕組み

各ステップで実際のユーザ操作をシミュレーションすることにより、Playwrightは基本的なナビゲーションから複雑なトランザクションに至るまで、すべてを検証するのに役立ちます。
その後、CatchpointのIPMプラットフォームがパフォーマンスを測定し、結果を記録し、何か異常があればアラートを出します。
これにより、お客様が問題に気付く前に対応することができます。

実際の例

Playwrightが実際にどのように機能するのかをお見せするために、一般的なeコマースのシナリオを2つご紹介します。

1.商品検索とウィッシュリスト

この例では、IKEAのWebサイトで「ソファベッド」を検索し、その後、商品をウィッシュリスト（またはショッピングバッグ）に追加します。
このスクリプトは、Playwrightがページのナビゲーション、ボタンのクリック、結果の確認といった一般的なユーザの操作をどのように処理できるかを示しています。 


// Navigate to the IKEA homepage
await page.goto('https://www.ikea.com/us/en/');

// Search for ”sofa bed”
await page.getByPlaceholder('What are you looking for?').click();
await page.getByPlaceholder('What are you looking for?').fill('sofa bed');
await page.getByPlaceholder('What are you looking for?').press('Enter');

// Verify search results and add to wishlist/shopping bag
await page.goto('https://www.ikea.com/us/en/search/?q=sofa%20bed');
await page.getByRole('link', { name: 'FRIHETEN – Sleeper sectional,3 seat w/storage' } 
await page.getByRole('button', { name: 'Save to favorites' }).click();
await page.getByRole('button', { name: 'Add to bag' }).click();

2. カートのチェックアウトフロー

このスクリプトでは、商品をカートに追加し、チェックアウトのステップをシミュレーションします。
これにより、スムーズな購入体験が確保されます。
プロセスのいずれかの段階でエラーが発生した場合でも、Catchpointがアラートを発し、すぐに問題を修正することができます。 


// Navigate to the Danube website
await page.goto('https://danube-web.shop/');

// Add products to the cart in a loop
for (let i = 1; i <= 3; i++) {
    await page.click(`.preview:nth-child(${i}) > .preview-author`);
    await page.click('.detail-wrapper > .call-to-action');
    await page.click('#logo');
}

// Proceed to checkout
await page.click('#cart');
await page.click('.cart > .call-to-action');

// Fill in shipping details and confirm checkout
await page.type('#s-name', 'Max');
await page.type('#s-surname', 'Mustermann');
await page.type('#s-address', 'Charlottenstr. 57');
await page.type('#s-zipcode', '10117');
await page.type('#s-city', 'Berlin');
await page.click('.checkout > form');
await page.waitForSelector('#order-confirmation', { visible: true });

これらの例は、ユーザ操作をスクリプト化し、結果を検証する基本を示しています。
ログイン、製品登録、またはチェックアウトの完了など、どのような操作であっても、Playwrightの柔軟なAPIとCatchpointのIPMにより、Webサイトのすべての部分が意図どおりに動作していることに自信を持つことができます。

始め方

PlaywrightのスクリプトはCatchpointポータル内で実行できるため、既存のテストを最小限のコード変更で移行し、すぐにモニタリングを開始することができます。
当社のIPMプラットフォームでPlaywrightを活用することで、テストの信頼性が向上するだけでなく、さまざまな条件下でWebサイトがどのように動作するかに関する詳細なインサイトを得ることができます。
これにより、ユーザが問題に気付く前に、それを検出することが可能になります。

導入をご希望の方は、ソリューションエキスパートにご相談ください。

もっと詳しく知る