在 puppeteer 中，`page.evaluate()` 运行于浏览器上下文，与 node.js 环境完全隔离，因此无法直接访问外部变量；必须通过 `pagefunction` 的参数列表显式传入所需数据。
page.evaluate() 的核心设计原则是环境隔离：它在目标页面的 JavaScript 上下文中执行函数（即 Chromium 渲染进程），而你的 const value = "WHATEVER" 定义在 Node.js 主进程（Puppeteer 控制端），二者内存不共享、作用域不互通。这就是为什么在内联箭头函数中直接引用 val 会抛出 ReferenceError: val is not defined —— 浏览器端根本“看不见”这个变量。
✅ 正确做法是利用 page.evaluate() 的完整签名：
page.evaluate<T, Args extends unknown[]>(pageFunction: (arg: Args) => T, ...args: Args): Promise<T>
即：将待传值作为额外参数（...args）追加在函数之后，Puppeteer 会自动序列化并注入到页面上下文中。
以下是推荐写法（含类型安全提示）：
const value = "WHATEVER";
async function setValue(selector, val) {
await page.evaluate(
(sel, content) => {
const el = document.querySelector(sel);
if (el) el.innerHTML = content;
else console.warn(`Element not found: ${sel}`);
},
selector, // ← 第一个参数：selector 字符串
val // ← 第二个参数：要设置的内容
);
}
await setValue("input#username", value);? 关键要点：
- 参数数量不限，但所有 ...args 必须是可序列化的值（如字符串、数字、布尔值、普通对象、数组）；不可传函数、Promise、DOM 元素或 undefined；
- 若需传复杂对象，建议先 JSON.stringify() + JSON.parse() 显式处理（尽管 Puppeteer 内部已做基础序列化，但避免嵌套函数或循环引用更稳妥）；
- 推荐为 page.evaluate() 内部逻辑添加存在性校验（如 if (el)），防止因元素未加载导致脚本崩溃；
- 如需返回值（例如获取更新后的 innerHTML），可在函数末尾 return，evaluate() 将以 Promise 形式解析该值。
? 进阶替代方案（按需选用）：
- 使用 page.$(selector) + element.evaluate() 实现更细粒度控制；
- 对高频操作可封装为自定义方法（如 page.setValueBySelector = (sel, val) => ...）；
- 若需频繁通信，考虑 page.exposeFunction() 暴露 Node.js 函数至页面（慎用，有安全与性能开销）。
总之，牢记口诀：“函数内不闭包，参数后面依次跟” —— 所有外部数据，必须走 ...args 显式传入。
