如何捕获HTML原始静态内容？Playwright现捕获到动态脚本

你遇到的问题是因为Playwright默认会加载并执行页面中的JavaScript，最终page.content()获取的是动态渲染后的DOM内容，而非服务器返回的原始静态HTML。以下两种方法可以解决这个问题：

方法一：禁用JavaScript加载 #

直接在浏览器上下文或页面中禁用JS，这样页面不会执行任何动态脚本，获取到的就是原始静态HTML：

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

(async function () {
    const chromeBrowser = await chromium.launch({ headless: true });
    // 在上下文配置中禁用JavaScript
    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',
        javaScriptEnabled: false // 关键：禁用JS
    });
    const page = await context.newPage();
    // 不需要等待networkidle，因为没有JS要加载
    await page.goto("https://emposedesigns.wixsite.com/empose/games", { timeout: 60000 });
    let content = await page.content();
    fs.writeFileSync('static_test.html', content);
    await chromeBrowser.close();
    console.log("done")
})();

方法二：直接获取服务器原始响应内容 #

通过监听页面的响应事件，直接抓取服务器返回的原始HTML文本，完全绕过页面渲染过程：

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();

    // 监听响应，捕获目标URL的原始HTML
    page.on('response', async (response) => {
        const targetUrl = "https://emposedesigns.wixsite.com/empose/games";
        // 匹配目标URL且响应状态为200的请求
        if (response.url() === targetUrl && response.status() === 200) {
            const rawStaticHtml = await response.text();
            fs.writeFileSync('raw_static.html', rawStaticHtml);
        }
    });

    await page.goto("https://emposedesigns.wixsite.com/empose/games", { timeout: 60000 });
    await chromeBrowser.close();
    console.log("done")
})();

补充说明 #

你原来代码中使用waitUntil: 'networkidle'会让Playwright等待页面所有网络请求完成、JS执行完毕后才获取内容，这就是为什么拿到的是动态渲染后的DOM。如果要获取静态内容，不需要这个配置，甚至可以用waitUntil: 'domcontentloaded'来提前终止等待。

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