保存HTML的静态内容，但它似乎是带有脚本的动态内容

Question

我试图保存HTML的静态内容。然而，我看到像脚本这样的动态内容被捕获。有没有办法捕获原始内容?

请在这里找到示例代码

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://emposedesigns.wixsite.com/empose/games", { waitUntil: 'networkidle', timeout: 60000 });
let content = await page.content();
fs.writeFileSync('test.html', content);
console.log("done")
})();

Answer 1

当网站抓取时，在确定你的目标是什么之后，重要的是要考虑你作为一个网站的普通访问者如何实现这个目标。尽管存在一些快捷方式(通常用于网页抓取，而不是用于测试)，但在大多数情况下，剧作家被设计成1:1地复制用户的操作。

这里的目标是获取隐私策略的文本。如果我们以用户身份导航到该页面，则看不到此类隐私政策。策略可能是静态地在HTML中。我们可以通过查看页面源来检查，但在这种情况下，它不存在。

单击带有"隐私政策"文本的链接后，将显示该策略。在浏览器呈现由单击触发的更改之后，有一个包含策略的iframe。

这里有一个在剧作家中复制这个的方法:

const fs = require("node:fs/promises");
const playwright = require("playwright"); // ^1.30.1
const url = "<Your URL>";
let browser;
(async () => {
browser = await playwright.chromium.launch();
const page = await browser.newPage();
await page.goto(url, {waitUntil: "domcontentloaded"});
await page.getByText("Privacy Policy").click();
const text = await page.frameLocator("iframe")
.locator('[data-custom-class="body"]')
.textContent(); // or .innerHTML()
console.log(text.trim());
await fs.writeFile("policy.txt", text.trim());
})()
.catch(err => console.error(err))
.finally(() => browser?.close());

现在，如果目标是尽快获得隐私策略，并且您不关心为了测试目的而复制用户操作，那么您可以直接导航到iframe的srcURL。假设URL是稳定的，这是获得结果的最简单方法:不需要点击或iframe。