Zenn
👺

Playwrightでクエリパラメータが付与されているページのURLを取得する

2024/09/26に公開
Test
Playwright
E2E
tech

結論

page.on()メソッドでネットワークを監視して、特定のURLだけを取得すれば可能です。

    // 現在のURLを取得する
  page.on('response', async (response) => {
    // レスポンスURLを取得する
    const responseURL = response.url();
    console.log('🚀 ~ page.on ~ response:', response);
  });

確認方法

response.urlの内容はChrome DevToolsのリクエストURLを見れば確認することができます。


Chrome DevTools ネットワークタブの内容


リクエストURLの位置

使用例としてはこんな感じで、特定のページURL(この場合inori-track.vercel.app/venue)の通信だけをフィルタリングし、そこに紐づくクエリパラメータをsearchParams.getAll('hoge');で取得します。

  // 現在のURLを取得する
  page.on('response', async (response) => {
    // レスポンスURLを取得する
    const responseURL = response.url();

    // レスポンスURLがinori-track.vercel.app/venueのものだけを抽出する。
    if (responseURL.match(/inori-track.vercel.app\/venue/g)) {
      const url = new URL(responseURL);
      // クエリパラメータを取得する
      const params = url.searchParams.getAll('live_id');

      // 以下固有の処理なので気にしなくてもOK
      // IDに紐づく会場名を取得する
      const venueList = liveNames.filter((live) => params.includes(live.id));

      // 会場名が画面に表示されていることを確認
      for (const venue of venueList) {
        await expect(page.getByLabel(venue.name)).toBeVisible();
      }
    }
  });

参考

https://zenn.dev/masa5714/articles/12c917e065a108

Discussion