如何解决Playwright中addInitScript无法传递外部变量的问题

你遇到的问题是因为addInitScript的回调函数会被Playwright序列化为字符串，在页面上下文独立执行，无法访问外部作用域的user变量，所以会报未定义错误。以下是两种可行的解决方案：

方法一：通过addInitScript的参数传递数据（推荐） #

Playwright的addInitScript支持传递额外参数，这些参数会被自动序列化并注入到页面上下文，回调函数可以直接接收使用：

const login = async (page, user) => {
  await page.addInitScript((userData) => {
    window.localStorage.setItem('user', JSON.stringify(userData));
  }, user); // 将user作为参数传入页面上下文
};

原理说明 #

• 第二个参数user会被Playwright序列化为JSON，传递到页面环境中
• 回调函数的参数userData就是序列化后还原的用户数据，在页面上下文内可直接访问
• 这种方式避免了手动字符串拼接的转义问题，更安全可靠

方法二：手动序列化并拼接脚本字符串 #

如果需要手动处理，可以先将user序列化为字符串，再拼接到脚本中（注意转义特殊字符）：

const login = async (page, user) => {
  // 先序列化用户数据，再转义单引号避免语法错误
  const serializedUser = JSON.stringify(JSON.stringify(user)).replace(/'/g, "\\'");
  await page.addInitScript(`window.localStorage.setItem('user', ${serializedUser});`);
};

注意事项 #

• 这种方式需要手动处理字符串转义，比如单引号、换行符等，容易出错，仅在特殊场景下使用

测试调用示例 #

调用方式和你原来的代码一致，只需确保传入正确的用户数据：

test("Test login user 1", async ({ page }) => {
  await login(page, exampleUser1);
  // 执行断言逻辑
});

test("Test login user 2", async ({ page }) => {
  await login(page, exampleUser2); // 注意这里要传入对应的用户数据
  // 执行其他断言逻辑
});

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