Playwright中page.content()为何有时返回空内容？

一、可靠自动接受Cookie的方法 #

你遇到的Cookie横幅导致动态内容加载失败的概率很高，当前直接定位[name="TRAFFIC"]的方式容错性差，试试以下几种更稳定的方案：

1. 提前注入Cookie同意状态 #

如果网站的Cookie同意是通过特定Cookie标识的，可在创建上下文时直接注入该Cookie，跳过横幅：

const context = await browser.newContext({
  cookies: [
    {
      name: "CookieConsent", // 替换为网站实际的同意Cookie名称
      value: "accepted",
      domain: new URL(url).hostname,
      path: "/",
      expires: Date.now() / 1000 + 3600 * 24 * 30 // 有效期30天
    }
  ]
});

注：需通过浏览器开发者工具查看网站接受Cookie后生成的具体Cookie键值对。

2. 容错性更高的横幅交互逻辑 #

如果必须操作横幅，不要直接调用check()，先确保元素可交互，同时处理可能的加载延迟：

// 等待Cookie横幅元素可见，最长等待15秒
const cookieCheckbox = page.locator('[name="TRAFFIC"]');
await cookieCheckbox.waitFor({ state: "visible", timeout: 15000 });
// 强制勾选，避免元素被遮挡或未完全加载
await cookieCheckbox.check({ force: true });

若横幅是“同意全部”按钮而非复选框，替换为点击逻辑：

await page.locator('button:has-text("同意全部")').waitFor({ state: "visible" });
await page.locator('button:has-text("同意全部")').click({ force: true });

二、解决locator.check超时问题 #

剩余10%的超时概率，大概率是元素加载不稳定或交互状态异常，可从这几点优化：

• 延长超时时间：把超时从10秒调整为15-20秒，适配部分网站Cookie横幅的加载延迟
• 使用更通用的选择器：如果[name="TRAFFIC"]是动态生成的，改用文本或角色定位，比如page.getByRole('checkbox', { name: '同意流量分析' })
• 添加重试机制：用循环包裹操作，处理偶发的加载失败：

async function acceptCookie(page) {
  for (let i = 0; i < 3; i++) {
    try {
      const checkbox = page.locator('[name="TRAFFIC"]');
      await checkbox.waitFor({ state: "visible", timeout: 5000 });
      await checkbox.check({ force: true });
      return;
    } catch (e) {
      if (i === 2) return; // 最后一次重试失败则跳过，避免阻塞流程
      await page.waitForTimeout(1000); // 等待1秒后重试
    }
  }
}
// 调用重试逻辑
await acceptCookie(page);

三、其他可能导致动态内容缺失的原因 #

若处理完Cookie横幅后仍有问题，排查以下方向：

• 页面加载状态等待不足：load或networkidle不一定覆盖所有动态渲染，改为等待关键元素出现：

  await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 20000 });
  // 等待动态内容的核心元素加载完成
  await page.getByRole('section', { name: 'U-Bahn' }).waitFor({ state: "visible" });
  

• 无头浏览器被检测：部分网站会屏蔽无头模式，启动浏览器时添加参数模拟真实环境：

  const browser = await chromium.launch({
    chromiumSandbox: false,
    headless: 'new',
    args: [
      '--disable-blink-features=AutomationControlled',
      '--user-agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36"'
    ]
  });
  

• 动态内容依赖滚动加载：若内容需滚动才会渲染，添加滚动操作：

  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
  await page.waitForTimeout(1000); // 等待滚动后的内容加载
  

• 关键API请求失败：监听核心接口，确保其成功返回：

  // 等待特定动态内容API请求完成
  await page.waitForResponse(response => 
    response.url().includes('api/dynamic-content') && response.ok()
  );
  

修改后的完整示例代码 #

async function getContent(url) {
  const browser = await chromium.launch({
    chromiumSandbox: false,
    headless: 'new',
    args: [
      '--disable-blink-features=AutomationControlled',
      '--user-agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36"'
    ]
  });
  const context = await browser.newContext();
  const page = await context.newPage();

  try {
    await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 20000 });

    // 带重试的Cookie处理逻辑
    async function acceptCookie() {
      for (let i = 0; i < 3; i++) {
        try {
          const checkbox = page.locator('[name="TRAFFIC"]');
          await checkbox.waitFor({ state: "visible", timeout: 5000 });
          await checkbox.check({ force: true });
          return;
        } catch (e) {
          if (i === 2) return;
          await page.waitForTimeout(1000);
        }
      }
    }
    await acceptCookie();

    // 等待关键动态元素加载
    await page.getByRole('section', { name: 'U-Bahn' }).waitFor({ state: "visible", timeout: 15000 });
    
    // 可选：滚动加载更多内容
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    await page.waitForTimeout(1000);

    const html = await page.content();
    return html;
  } finally {
    await context.close();
    await browser.close();
  }
}

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