如何使用Testcafe与JavaScript检查指定cookie的存在及取值

完整实现代码 #

你可以直接参考下方的可运行代码调整适配你的测试站点：

import { Selector, ClientFunction, t } from 'testcafe';

// 方案1：基于你已有的ClientFunction改造，支持按名称获取指定cookie
const getCookieByName = ClientFunction((cookieName: string) => {
  const cookies = document.cookie.split('; ');
  for (const cookie of cookies) {
    const [name, value] = cookie.split('=');
    if (name === cookieName) {
      return decodeURIComponent(value);
    }
  }
  return null; // 不存在则返回null
});

// 你要校验的cookie名称和预期值，替换成你自己的
const TARGET_COOKIE_NAME = '你的目标cookie名称';
const EXPECTED_COOKIE_VALUE = '你预期的cookie值';

fixture`Cookie 授权校验测试`
  .page`你要测试的站点URL`;

test('校验同意授权后指定cookie是否符合预期', async () => {
  // 第一步：点击同意cookie授权按钮，替换成你站点的实际按钮选择器
  const acceptCookieBtn = Selector('.cookie-accept-btn'); // 示例选择器，自行修改
  await t
    .expect(acceptCookieBtn.exists).ok('Cookie授权弹窗未出现')
    .click(acceptCookieBtn)
    .wait(500); // 等待cookie写入完成，可根据站点实际情况调整或删除

  // 第二步：获取目标cookie
  const targetCookieVal = await getCookieByName(TARGET_COOKIE_NAME);

  // 第三步：校验两项要求
  await t
    // 校验cookie存在
    .expect(targetCookieVal).notEql(null, `指定Cookie ${TARGET_COOKIE_NAME} 不存在`)
    // 校验cookie取值符合预期
    .expect(targetCookieVal).eql(EXPECTED_COOKIE_VALUE, `指定Cookie ${TARGET_COOKIE_NAME} 取值不符合预期`);
});

更简便的方案：使用TestCafe内置Cookie API #

如果你要校验的是HttpOnly类型的Cookie，document.cookie无法读取，可以直接用TestCafe原生提供的t.getCookies()方法，不需要自己写ClientFunction：

// 替换上面的getCookieByName调用部分即可
const targetCookies = await t.getCookies(TARGET_COOKIE_NAME);
const targetCookie = targetCookies[0];

await t
  .expect(targetCookie).ok(`指定Cookie ${TARGET_COOKIE_NAME} 不存在`)
  .expect(targetCookie.value).eql(EXPECTED_COOKIE_VALUE, `指定Cookie ${TARGET_COOKIE_NAME} 取值不符合预期`);

注意事项 #

• 代码中的按钮选择器、站点URL、目标cookie名称和预期值都需要替换成你实际测试场景的对应值
• 如果点击同意后Cookie是异步写入的，可以适当延长等待时间，或者加轮询判断Cookie是否存在的逻辑避免偶发失败
• 原生t.getCookies()默认获取当前测试域名下的所有Cookie，如果需要跨域获取可以额外传配置参数

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