Playwright会话信息未保存：转译Cypress测试后无法跳转支付页面

核心原因 #

Cypress的API请求与浏览器页面默认共享同一Cookie容器，但Playwright的全局request API独立于页面上下文，API请求生成的Cookie不会自动同步到浏览器会话，导致跳转支付页面时因缺少有效会话数据而失败。

具体解决方案 #

1. 复用页面上下文发送API请求 #

直接使用当前页面的page.request对象发送注册和报价请求，这样API请求的Cookie会直接存入页面的上下文环境，后续跳转支付页面时自动携带会话信息：

// 用page.request替代全局request对象发送注册请求
await page.request.post('/api/register', {
  data: { /* 你的注册参数 */ }
});

// 获取报价并提取引用
const quoteResponse = await page.request.post('/api/get-quote', {
  data: { /* 你的报价参数 */ }
});
const quoteRef = (await quoteResponse.json()).quoteReference;

// 直接跳转支付页面
await page.goto(`/payment?ref=${quoteRef}`);

2. 手动同步API请求的Cookie到页面上下文 #

如果必须使用全局request对象，需手动提取API返回的Cookie并添加到页面上下文：

// 发送注册请求并获取Cookie
const registerResp = await request.post('/api/register', {
  data: { /* 注册参数 */ }
});
const registerCookies = registerResp.cookies();

// 发送报价请求并获取Cookie
const quoteResp = await request.post('/api/get-quote', {
  data: { /* 报价参数 */ }
});
const quoteCookies = quoteResp.cookies();
const quoteRef = (await quoteResp.json()).quoteReference;

// 将Cookie合并添加到页面上下文
await page.context().addCookies([...registerCookies, ...quoteCookies]);

// 跳转支付页面
await page.goto(`/payment?ref=${quoteRef}`);

3. 验证会话状态 #

跳转前可先检查页面上下文的Cookie是否正确，确认会话数据已同步：

// 打印当前页面上下文的所有Cookie
const currentCookies = await page.context().cookies();
console.log(currentCookies); // 核对是否包含API返回的会话标识Cookie

4. 处理跨域Cookie限制 #

如果支付页面与API域名不同，需确保Cookie配置了正确的domain和sameSite属性。测试环境下可临时放宽上下文的Cookie策略：

const context = await browser.newContext({
  // 仅测试环境使用，放宽跨域Cookie限制
  permissions: ['storage'],
  ignoreHTTPSErrors: true
});

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