使用Puppeteer自定义HTML创建页面时无法获取有效URL求助

问题场景 #

使用Puppeteer创建页面后，通过setContent注入自定义HTML，但page.url()始终返回about:blank，无法满足pa11y工具对有效URL的需求，且newPage方法不支持直接传入URL参数。代码如下：

import Puppeteer from "puppeteer";
import type { Browser, Page } from "puppeteer";

// 位于异步函数内
const browser: Browser= await Puppeteer.launch({ headless: "new" });
const page: Page = await browser.newPage();

await page.setContent(
  "<html><body>Hello world!</body></html>", 
  { waitUntil: "domcontentloaded" }
);

console.log(page.url()); // -> "about:blank"

解决方法 #

有两种可靠方式可以为页面设置有效URL：

方法1：先导航到虚拟URL，再设置内容 #

先通过page.goto导航到自定义虚拟URL（比如http://test.local），之后调用setContent，页面URL会保持为导航地址：

import Puppeteer from "puppeteer";
import type { Browser, Page } from "puppeteer";

const browser: Browser= await Puppeteer.launch({ headless: "new" });
const page: Page = await browser.newPage();

// 先导航到自定义虚拟URL
await page.goto("http://test.local", { waitUntil: "domcontentloaded" });
// 再设置自定义HTML内容
await page.setContent(
  "<html><body>Hello world!</body></html>", 
  { waitUntil: "domcontentloaded" }
);

console.log(page.url()); // -> "http://test.local"

方法2：使用data URL直接加载内容 #

直接用page.goto加载包含自定义HTML的data URL，页面URL会是该data URL，同时内容也会被渲染：

import Puppeteer from "puppeteer";
import type { Browser, Page } from "puppeteer";

const browser: Browser= await Puppeteer.launch({ headless: "new" });
const page: Page = await browser.newPage();

const htmlContent = "<html><body>Hello world!</body></html>";
// 将HTML转为data URL并导航
await page.goto(`data:text/html,${encodeURIComponent(htmlContent)}`, { waitUntil: "domcontentloaded" });

console.log(page.url()); // -> "data:text/html,%3Chtml%3E%3Cbody%3EHello%20world!%3C/body%3E%3C/html%3E"

注意事项 #

• 方法1的虚拟URL可任意自定义，只要符合URL格式即可，pa11y工具会识别为有效地址
• 方法2的data URL会包含完整HTML内容，适合内容较短的场景，若HTML过长可能触发URL长度限制

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD