Playwright测试时无法为浏览器上下文添加next-auth认证Cookie

核心问题排查与修复步骤 #

1. 补全Cookie必填属性 #

next-auth的next-auth.session-token需要完整的匹配参数，浏览器会拒绝存储属性不完整或不匹配的Cookie。必须包含以下关键字段：

await context.addCookies([
  {
    name: 'next-auth.session-token',
    value: '你的有效session-token值',
    domain: 'localhost', // 匹配测试站点域名，生产环境替换为实际域名
    path: '/',
    secure: process.env.NODE_ENV === 'production', // HTTPS环境设为true，本地测试设为false
    httpOnly: true, // next-auth默认将该Cookie设为httpOnly
    sameSite: 'lax' // 与next-auth的配置保持一致，通常为lax或strict
  }
]);

2. 先绑定站点上下文再添加Cookie #

Playwright的addCookies需要上下文关联目标站点，否则Cookie无法绑定到对应域名。两种实现方式：

• 先导航到站点页面：

  await context.goto('http://localhost:3000');
  await context.addCookies([/* Cookie配置 */]);
  

• 提前设置默认导航URL：

  await context.setDefaultNavigationUrl('http://localhost:3000');
  await context.addCookies([/* Cookie配置 */]);
  

3. 验证Session-Token有效性 #

确认globalSetup.ts中生成的token是有效状态：

• 检查globalSetup是否正确从登录接口或数据库中获取到了有效的next-auth.session-token
• 可以手动复制浏览器登录后的有效token替换测试值，验证Cookie是否能正常存储

4. 简化方案：使用storageState替代手动添加Cookie #

在globalSetup.ts中完成登录后直接保存会话状态，测试时直接加载，避免手动配置Cookie的麻烦：

// globalSetup.ts中登录完成后
await context.storageState({ path: 'storageState.json' });

// example.spec.ts中加载状态
test.use({ storageState: 'storageState.json' });

5. 检查Playwright配置 #

确保playwright.config.ts的use配置没有禁用Cookie或存在冲突项：

use: {
  ignoreHTTPSErrors: true, // 本地自签HTTPS证书需开启
  viewport: { width: 1280, height: 720 },
  // 不要设置禁用Cookie的选项
},

验证手段 #

添加Cookie后打印所有Cookie确认状态，或用浏览器调试工具查看：

const cookies = await context.cookies();
console.log('当前Cookie:', cookies);
// 或打开调试面板查看
await context.inspect();

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