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 及其元数据的标准方法。作为此 issue.

的一部分，我们正在研究接收 cookie 的机制

最简单的方法如下：

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

但是，它只会returnname=value对。

这里有一些解决方法：

使用`cookieStore`:

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

在这种情况下，必须使用 --hostname localhost 标志启动 TestCafe，并使用 --allow-insecure-localhost 标志启动 Chrome。所以运行命令可能如下所示： testcafe "chrome: --allow-insecure-localhost" --hostname localhost test.js 这种方法有两个缺点：

由于代理，您收到的某些对象字段将无效。
将来，由 cookieStore 函数 return 编辑的值可能会改变。

直接从文件系统读取cookies：

In Windows Chrome 将 cookie 存储在文件中：C:\Users\<User>\AppData\Local\Google\Chrome\User Data\Default\Cookies。这种方法有以下缺点：

在每个 OS 中，每个浏览器都有自己的文件路径。
理解数据存储格式会比较困难。
只有当客户端运行在同一台计算机上时，您才能访问文件系统（不可能运行远程测试）。

拦截cookies：

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();
    });

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

Testcafe Getting all Cookies from domain, store them in Object / Array and check if the Names of the Cookies are in an Array

javascript

typescript

cookies

e2e-testing

testcafe

使用`cookieStore`:

直接从文件系统读取cookies：

拦截cookies：

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

Testcafe Getting all Cookies from domain, store them in Object / Array and check if the Names of the Cookies are in an Array

javascript

typescript

cookies

e2e-testing

testcafe

使用cookieStore:

直接从文件系统读取cookies：

拦截cookies：

使用`cookieStore`: