如何使用Playwright等待延迟加载的页面内容以抓取隐私声明？

问题描述 #

我尝试抓取页面https://www.imaginegolf.com/privacy的隐私声明，但该页面的隐私声明加载存在延迟。我已尝试使用load、networkidle、commit和domcontentloaded等waitUntil选项，仍无法成功抓取内容。请问如何让Playwright等待内容加载完成后再抓取页面内容？

用户提供的示例代码：

import {chromium}  from 'playwright'; // Web scraper Library
import * as fs from 'fs';

(async function () {
    const chromeBrowser = await chromium.launch({ headless: true }); // Chromium launch and options
    const context = await chromeBrowser.newContext({ ignoreHTTPSErrors: true ,
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36',
      });
    const page = await context.newPage();
    await page.goto("https://www.imaginegolf.com/privacy", { waitUntil: 'networkidle', timeout: 60000 });
    let content = await page.content();
    fs.writeFileSync('test.html', content);
    console.log("done")
})();

解决方案 #

当通用的waitUntil选项无法生效时，说明页面内容是通过异步请求动态渲染的，此时需要针对目标内容的特定标识做等待，以下是几种可靠的方法：

• 等待目标元素可见：找到隐私声明对应的DOM容器（比如通过ID、类名或XPath定位），等待该元素完全可见后再抓取内容。这是最精准的方式，因为元素可见意味着内容已渲染完成。
• 等待目标文本出现：如果知道隐私声明中的标志性文本，直接等待该文本出现在页面中。
• 自定义循环检查：循环检测页面内容是否包含目标内容，直到超时。

修改后的代码示例（以等待元素为例）

首先打开目标页面的开发者工具，找到隐私声明内容所在的DOM元素，获取其准确选择器（示例中假设选择器为.privacy-content-container，需根据实际页面调整），代码修改如下：

import {chromium}  from 'playwright';
import * as fs from 'fs';

(async function () {
    const chromeBrowser = await chromium.launch({ headless: true });
    const context = await chromeBrowser.newContext({ 
        ignoreHTTPSErrors: true,
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36',
    });
    const page = await context.newPage();
    
    await page.goto("https://www.imaginegolf.com/privacy", { waitUntil: 'domcontentloaded', timeout: 60000 });
    
    // 等待隐私声明容器可见，超时60秒，请替换为实际页面的选择器
    await page.waitForSelector('.privacy-content-container', { state: 'visible', timeout: 60000 });
    
    // 若页面是英文，也可以等待标志性文本，比如：
    // await page.waitForText('Privacy Policy', { timeout: 60000 });
    
    let content = await page.content();
    fs.writeFileSync('test.html', content);
    console.log("done");
    
    // 关闭浏览器释放资源
    await chromeBrowser.close();
})();

关键说明

1. 替换选择器：必须根据目标页面的实际DOM结构，替换waitForSelector中的选择器，确保定位到隐私声明的容器元素。
2. 超时调整：可根据页面实际加载速度，修改timeout值，避免因等待时间不足导致抓取失败。
3. 资源清理：添加chromeBrowser.close()避免浏览器进程残留，浪费系统资源。

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