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

Question

I am new to Testcafé and need to get all Cookies from a Website, store them in an Object or Array and see, if the name of the Cookie matches against an Array of Strings to see if some Cookies are set; this needs to be done in Typescript; in pure Javascript would be easier, but these are the Requirements.

In order to achieve this, I implemented an Interface with all the Properties that I need from the Cookies:

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

This is the implementation for the Testcase I came up with so far:

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: Implement a Function that gets all the Cookies or uses the Interface and compare the property name against an Array of Strings )

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

This is were I am stuck at the moment and would hence appreciate any hints or help, especially on how to get the Names from all the Cookies and compare them to an Array of Strings; thanks in advance!

Answer 1

Since TestCafe 1.19.0 version there is no need to invent complicated workarounds to interact with the browser cookies. Our cookie management API offers a flexible and cross-browser way to set, get, or delete page cookies even those with the HttpOnly attribute. Read more in the Release notes.

The following example shows a common case of working with 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 });
});