如何在JavaScript中等待Cookie更新？Playwright自动化测试需求

在Playwright的JavaScript/TypeScript测试中，有几种可靠的方式等待Cookie更新，以下是最常用的两种方案：

1. 使用page.waitForFunction()监听前端Cookie（非HttpOnly场景） #

如果目标Cookie不是HttpOnly的，可以直接在页面上下文里监听Cookie变化，对比新旧值或判断目标状态：

// 步骤1：获取当前Cookie的旧值（用于后续对比）
const oldAuthToken = await page.context().cookies().then(cookies => 
  cookies.find(c => c.name === 'auth_token')?.value
);

// 步骤2：等待Cookie更新为不等于旧值的新值
await page.waitForFunction(
  ({ cookieName, oldValue }) => {
    // 解析当前页面的Cookie
    const currentCookie = document.cookie.split('; ')
      .find(row => row.startsWith(`${cookieName}=`))
      ?.split('=')[1];
    // 条件：Cookie存在且与旧值不同
    return currentCookie && currentCookie !== oldValue;
  },
  { cookieName: 'auth_token', oldValue: oldAuthToken },
  { timeout: 15000 } // 可选：设置超时时间，默认30秒
);

// Cookie更新后执行下一步操作
await page.click('#confirm-btn');

如果明确知道目标Cookie的预期值，也可以直接等待匹配该值：

await page.waitForFunction(
  ({ name, targetValue }) => {
    const currentCookie = document.cookie.split('; ')
      .find(row => row.startsWith(`${name}=`))
      ?.split('=')[1];
    return currentCookie === targetValue;
  },
  { name: 'auth_token', targetValue: 'new_session_123' }
);

2. 使用page.context().waitForCookie()监听所有Cookie（支持HttpOnly） #

如果目标Cookie是HttpOnly的（前端JS无法读取），必须通过Playwright的上下文来监听，这个方法会等待指定名称的Cookie被添加或更新：

// 等待名为auth_token的Cookie完成更新
const updatedCookie = await page.context().waitForCookie('auth_token', {
  timeout: 10000 // 自定义超时时间
});

// 可以直接获取更新后的Cookie值
console.log('更新后的Cookie值：', updatedCookie.value);

// 执行后续测试步骤
await page.goto('/user-profile');

注意事项 #

• 若Cookie属于特定域名，可在waitForCookie中指定domain参数缩小范围：page.context().waitForCookie('auth_token', { domain: 'your-site.com' })
• 超时时间可根据实际业务调整，避免因网络延迟导致测试失败
• 确保触发Cookie更新的操作（如登录、提交表单）在等待代码之前执行

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