使用Playwright抓取网页中的GraphQL请求负载

当然有标准实现方法，核心思路是通过Playwright监听网络请求事件，筛选出GraphQL类型的请求后提取其POST请求体（也就是负载）。以下是具体实现步骤和代码示例：

核心逻辑 #

GraphQL请求通常具备以下特征，可用于筛选：

• 请求方法为POST
• 请求URL路径包含/graphql（部分网站可能是/api/graphql等，需根据目标站点调整）
• 请求体为JSON格式，包含query或mutation字段

JavaScript 实现示例 #

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false }); // 打开非无头模式方便调试
  const page = await browser.newPage();

  // 监听所有网络请求，捕获GraphQL负载
  page.on('request', async (request) => {
    // 筛选符合条件的GraphQL请求
    if (request.method() === 'POST' && request.url().includes('/graphql')) {
      const postData = request.postData();
      if (postData) {
        try {
          const payload = JSON.parse(postData);
          console.log('=== 捕获到GraphQL请求负载 ===');
          console.log(JSON.stringify(payload, null, 2));
          // 这里可以将payload写入文件或进行后续处理
        } catch (err) {
          console.error('解析请求体失败:', err);
        }
      }
    }
  });

  await page.goto('你的目标网页URL');
  await page.waitForLoadState('networkidle'); // 等待网络请求稳定，确保捕获到初始加载的请求

  await browser.close();
})();

Python 实现示例 #

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()

    # 定义请求监听回调函数
    def capture_graphql_payload(request):
        # 筛选GraphQL请求
        if request.method == "POST" and "/graphql" in request.url:
            try:
                # 直接解析JSON格式的请求体
                payload = request.post_data_json
                print("=== 捕获到GraphQL请求负载 ===")
                print(payload)
                # 可添加代码将payload保存到文件
            except Exception as err:
                print(f"解析请求体失败: {err}")

    # 绑定监听器
    page.on("request", capture_graphql_payload)

    page.goto("你的目标网页URL")
    page.wait_for_load_state("networkidle")

    browser.close()

进阶技巧 #

• 精准筛选特定请求：如果只需要捕获某个特定的Query/Mutation，可以在解析payload后判断payload.query是否包含目标字段，比如if (payload.query.includes('getProductList'))
• 使用路由拦截：也可以用page.route方法拦截GraphQL请求，同样能获取负载，适合需要修改请求或做更复杂处理的场景：

await page.route('/graphql', async (route) => {
  const request = route.request();
  if (request.method() === 'POST') {
    const payload = JSON.parse(request.postData());
    console.log('拦截到GraphQL请求:', payload);
  }
  await route.continue(); // 继续发送请求，不阻断页面加载
});

• 捕获动态加载请求：如果页面有滚动加载、点击触发的后续GraphQL请求，需要添加对应的等待逻辑（比如page.waitForSelector等待元素出现，或模拟用户操作），确保捕获到所有目标请求

内容的提问来源于stack exchange，提问作者jarrowconsulting