TestCafe 2.1.0客户端删除Cookie未生效问题求助

问题背景 #

使用TestCafe 2.1.0做自动化测试时，前端通过document.cookie = "MY_COOKIE=; path=/; max-age=0;"删除Cookie的操作在手动测试中正常，但在TestCafe环境里Cookie并未彻底移除：

• 调用await t.getCookies()返回的列表中仍存在MY_COOKIE，值为空字符串
• 后续请求会携带该空值Cookie发送至服务器
• 测试断言await t.expect(await getCookie()).eql("")失败，实际返回"MY_COOKIE="

解决方案 #

1. 使用TestCafe原生API删除Cookie（推荐） #

TestCafe提供了专门的Cookie操作API，相比前端原生代码，能更精准地控制测试环境中的Cookie状态。修改测试用例，在点击logout按钮后直接调用t.deleteCookies()方法：

import { Selector, ClientFunction } from "testcafe";

fixture`Test cookies`.page`http://localhost:8080/index.html`;

const getCookie = ClientFunction(() => document.cookie);

test(`expect a deleted cookie to be gone`, async (t) => {
  const loginButton = Selector("#login");
  const logoutButton = Selector("#logout");

  await t.expect(await getCookie()).eql("");
  await t.click(loginButton);
  await t.navigateTo("/");
  await t.expect(await getCookie()).eql("MY_COOKIE=Hello");

  await t.click(logoutButton);
  // 使用TestCafe API删除指定Cookie
  await t.deleteCookies('MY_COOKIE');
  await t.navigateTo("/");
  await t.expect(await getCookie()).eql("");
}).disablePageCaching;

若需删除所有Cookie，直接调用无参数的t.deleteCookies()即可。

2. 确保前端删除Cookie时参数完全匹配 #

前端设置Cookie时如果包含额外属性（如domain、secure、sameSite），删除时必须携带完全一致的属性，否则TestCafe的模拟环境可能无法正确匹配并删除目标Cookie。修改前端logout逻辑：
假设设置Cookie时的完整参数是MY_COOKIE=Hello; path=/; max-age=2592000; domain=xyz.com; secure; sameSite=none，删除时需写成：

document.cookie = "MY_COOKIE=; path=/; max-age=0; domain=xyz.com; secure; sameSite=none";

保证所有属性与设置时一致，让TestCafe能正确识别并移除Cookie。

3. 过滤空值Cookie（备选） #

如果必须保留前端删除逻辑，可在获取Cookie时主动过滤空值条目：

// 重写getCookie，过滤掉值为空的Cookie
const getCookie = ClientFunction(() => {
  return document.cookie.split('; ')
    .filter(cookie => !cookie.endsWith('='))
    .join('; ');
});

这种方法通过过滤空值来匹配断言预期，属于临时绕过方案，不如前两种方法彻底。

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