Testcafe 从域中获取所有 Cookie，将它们存储在对象/数组中，并检查 Cookie 的名称是否在数组中

Question

我是 Testcafé 的新手，需要从网站获取所有 Cookie，将它们存储在对象或数组中，然后查看 Cookie 的名称是否与字符串数组匹配，以查看是否设置了某些 Cookie；这需要在 Typescript 中完成；纯 Javascript 会更容易，但这些是要求。

为了实现这一目标，我实现了一个接口，其中包含 Cookie 中我需要的所有属性：

class CookieInterface {
    static getName: string;

    constructor(domain: string, name: string, expirationDate: bigint,hostOnly: boolean, httpOnly: boolean,
                path: string, sameSite: string, secure: boolean, session: boolean, storeId: number,value: bigint,
                id: number) {
        this.domain = domain;
        this.expirationDate = expirationDate;
        this.hostOnly = hostOnly;
        this.httpOnly = httpOnly;
        this.path = path;
        this.sameSite = sameSite;
        this.secure = secure;
        this.session = session;
        this.name = name,
        this.storeId = storeId,
        this.value = value,
        this.id = id
    }

    domain: string
    expirationDate: bigint
    hostOnly: boolean
    httpOnly: boolean
    name: string
    path: string
    sameSite: string
    secure: boolean
    session: boolean
    storeId: number
    value: bigint
    id: number

    getName(cookieName: string){
     
    }
}

export {
    CookieInterface
};

这是我迄今为止提出的测试用例的实现：

import 'testcafe';
import consentLayer from '../../page-objects/consent-layer';
import {ClientFunction, Selector} from 'testcafe';
import {CookieInterface} from './cookieInterface';

fixture('Cookie Checker')
    .page('http://www.mywebsite.com')
    .beforeEach(async t => {
        await t.setTestSpeed(0.1)
        await t.maximizeWindow()
    })

test
    .disablePageCaching
    .timeouts({
        pageLoadTimeout:    1000,
        pageRequestTimeout: 1000
    })
    ('should check if all relevant Cookies are set', async t => {

        let getCookies = ClientFunction(() => ()

TODO：实现一个获取所有 Cookie 或使用接口的函数，并将属性名称与字符串数组进行比较 )

        let getCookieName = CookieInterface.getName;

        await t.wait(3000);
        await t.navigateTo('http://www.mywebsite.com')
        const cookies1 = await getCookies();
        await t.expect(cookies1.length).gt(
            0
        )

        await t.switchToIframe(Selector('*[id^=sp_message_iframe_]'));
        await t.expect(Selector('button[title="Accept all"]').exists).ok();
        await t.switchToMainWindow();
        await consentLayer.clickAcceptButton();
        await t.eval(() => location.reload(true))
        const cookies2 = await getCookies();
        await t.expect(cookies2.length).gt(
            0
        )
        await t.expect(Selector('*[id^=sp_message_iframe_]').exists).notOk();
        await t.expect(Selector('button[title="Accept All"]').exists).notOk();
    });

如果我现在陷入困境，因此希望得到任何提示或帮助，尤其是如何从所有 Cookie 中获取名称并将它们与字符串数组进行比较；预先感谢！

Answer 1

TestCafe 不提供获取 cookie 及其元数据的标准方法。作为此问题的一部分，我们正在研究接收 Cookie 的机制。

最简单的方法如下：

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

但是，它只会返回

name=value

对。

以下是一些解决方法：

使用

cookieStore

：

const getCookie = ClientFunction(() => cookieStore.getAll());

在这种情况下，TestCafe 必须使用

--hostname localhost

标志启动，Chrome 必须使用

--allow-insecure-localhost

标志启动。所以运行命令可能如下所示：

testcafe "chrome: --allow-insecure-localhost" --hostname localhost test.js

这种方法有两个缺点：

1. 由于代理，您收到的某些对象字段将无效。
2. 将来，cookieStore函数返回的值可能会改变。

直接从文件系统读取cookie：

在 Windows 中，Chrome 将 cookie 存储在文件中：

C:\Users\<User>\AppData\Local\Google\Chrome\User Data\Default\Cookies

。 这种方法有以下缺点：

1. 在每个操作系统中，每个浏览器都有自己的文件路径。
2. 理解数据存储格式会很困难。
3. 仅当客户端在同一台计算机上运行时，您才能访问文件系统（无法远程运行测试）。

拦截cookie：

import { Selector, ClientFunction } from 'testcafe';

fixture `About`
    .page`about:blank`;

test('cookie hook test', async t => {
    const setCookie = ClientFunction(string => document.cookie = string);
    const getCookie = ClientFunction(() => document.cookie);

    const name    = 'foo';
    const value   = 'bar';
    const expires = Date.now() - Date.now() % 1000 + 60000;

    await setCookie(`${name}=${value}; expires=${(new Date(expires)).toUTCString()}`);

    const cookie = await getCookie();

    await t.expect(cookie).eql({ [name]: { name, value, expires } });
})
    .before(async t => {
        const setCookieHooks = ClientFunction(() => {
            const cookie = {};

            document.__defineGetter__('cookie', () => cookie);
            document.__defineSetter__('cookie', raw => {
                const pairs  = raw.split(';').filter(string => !!string).map(string => string.trim().split('='));

                const [name, value] = pairs.shift();

                const result = { name, value };

                pairs.forEach(([key, val]) => result[key] = val);

                result.expires = result.expires ? Date.parse(result.expires) : null;

                cookie[name] = result;
            });
        });

        await setCookieHooks();
    });

Answer 2

自 TestCafe 1.19.0 版本起，无需发明复杂的解决方法来与浏览器 cookie 交互。我们的 cookie 管理 API 提供了一种灵活的跨浏览器方式来设置、获取或删除页面 cookie，甚至包括具有

HttpOnly

属性的页面 cookie。请阅读发行说明了解更多信息。

以下示例显示了使用 cookie 的常见情况。

fixture`Cookies API`;
 
test('get/set cookie test', async t => {
   const name  = 'foo';
   const value = 'bar';
 
   var expires = new Date();
   expires.setDate(expires.getDate() + 3); //cookies for 3 days
 
   await t.setCookies({
       name,
       value,
       expires
   });
 
   const cookies = await t.getCookies();
 
   await t.expect(cookies[0]).contains({ name, value, expires });
});