浏览器自动化工具Browserless.io中页面内容获取的正确方式

在使用Browserless.io进行网页自动化测试时，获取目标页面HTML内容是一个常见需求。最近有开发者反馈，原本能够正常工作的代码突然返回了Browserless.io函数运行器自身的HTML内容，而非目标页面的内容。

问题现象分析

开发者提供的原始代码如下：

export default async function ({ page }) { 
  await page.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36");
  await page.goto("https://www.google.com/", {
    waitUntil: "domcontentloaded"
  });
  return document.documentElement.outerHTML;
}

这段代码原本能够返回Google首页的HTML内容，但后来却返回了Browserless.io函数运行器自身的HTML结构。这是因为代码中存在一个常见的上下文混淆问题。

根本原因

在Browserless.io的函数运行环境中，存在两个不同的执行上下文：

1. 函数运行器上下文：这是Browserless.io用来执行用户提供的函数代码的环境
2. 页面上下文：这是通过Puppeteer控制的浏览器页面环境

当直接使用document对象时，实际上访问的是函数运行器自身的DOM，而非目标页面的DOM。这就是为什么代码会返回运行器HTML而非目标页面HTML的原因。

正确解决方案

要正确获取目标页面的HTML内容，需要使用Puppeteer提供的page.evaluate()方法，该方法能够在页面上下文中执行代码。修改后的正确代码如下：

export default async function ({ page }) { 
  await page.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36");
  await page.goto("https://www.example.com/", {
    waitUntil: "domcontentloaded"
  });
  return page.evaluate(() => document.documentElement.outerHTML);
}

技术要点解析

1. 执行上下文隔离：Browserless.io为了安全性和稳定性，将用户代码和目标页面运行在不同的JavaScript执行环境中

2. 跨上下文通信：page.evaluate()是Puppeteer提供的跨上下文通信机制，它能够：

   • 将函数序列化并传输到页面上下文
   • 在页面上下文中执行该函数
   • 将执行结果序列化并返回到函数运行器上下文

3. 数据序列化限制：通过page.evaluate()返回的数据必须是可序列化的，DOM元素本身不能直接返回，但可以通过outerHTML等属性获取其字符串表示

最佳实践建议

1. 始终明确你正在操作的上下文环境
2. 对于需要在页面上下文中执行的DOM操作，必须使用page.evaluate()
3. 考虑使用waitUntil: "networkidle0"选项来确保页面完全加载
4. 对于复杂操作，可以将多个步骤封装在一个page.evaluate()调用中，减少上下文切换开销

通过理解Browserless.io的执行模型和上下文隔离机制，开发者可以更有效地编写自动化脚本，避免类似的上下文混淆问题。