Playwright中globalSetup无法设置Cookie的问题求助

按以下核心步骤排查和修复：

1. 确认配置文件的状态关联 #

检查playwright.config.ts是否同时配置了globalSetup和storageState，二者必须同时存在才能让测试加载保存的Cookie：

import { defineConfig } from '@playwright/test';

export default defineConfig({
  globalSetup: './global-setup.ts',
  use: {
    storageState: 'storage-state.json', // 测试上下文会加载这个文件的状态
    baseURL: 'http://localhost:3000',
  },
});

2. 修正globalSetup的Cookie参数配置 #

针对localhost:3000的场景，Cookie参数很容易踩坑，调整为以下正确格式：

import { chromium, FullConfig } from '@playwright/test';

async function globalSetup(config: FullConfig) {
  const browser = await chromium.launch();
  // 必须指定baseURL，确保上下文域名和服务一致
  const context = await browser.newContext({ baseURL: 'http://localhost:3000' });
  
  await context.addCookies([
    {
      name: '你的Cookie名称',
      value: '你的Cookie值',
      domain: 'localhost', // 直接用localhost，不要加前缀.
      path: '/', // 设为根路径，保证全站页面都能访问该Cookie
      expires: Date.now() + 3600000, // 设置1小时有效期，避免过期失效
      httpOnly: true,
      secure: false, // 本地http服务设为false，https服务才设为true
    },
  ]);

  await context.storageState({ path: 'storage-state.json' });
  await browser.close();
}

export default globalSetup;

关键注意点：

• domain不能写.localhost，localhost是顶级域名，浏览器不识别带前缀的子域形式
• secure必须和服务协议匹配，http服务设false，否则浏览器不会主动发送该Cookie
• path设为/，避免Cookie仅在特定路径生效

3. 调试时的正确查看方式 #

别只盯着网络面板：网络面板只有在发送请求时才会显示携带的Cookie。正确操作是：

1. 测试运行后，确保页面已加载（比如执行await page.goto('/')）
2. 打开DevTools的Application面板，找到Storage下的Cookies -> http://localhost:3000，这里能看到所有已加载的Cookie

4. 验证Cookie是否成功加载到测试上下文 #

如果还是看不到，在测试用例中添加代码打印当前Cookie，确认状态是否加载：

test('验证Cookie加载状态', async ({ context, page }) => {
  await page.goto('/');
  const cookies = await context.cookies();
  console.log('当前上下文的Cookie:', cookies);
});

如果控制台能打印出目标Cookie，说明加载成功，只是浏览器面板显示的延迟问题；如果打印不出来，再回头检查配置文件和globalSetup的代码逻辑。

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