Testcafe request with cookies

Question

I am trying to find a method in testcafes API similar to Cypress' request.

Cypress' request will attach any cookies to the request that already exist in the browser so that http requests will look like they're being made from the browser / user.

Is there a similar function in testcafe?

Answer 1

You can modify your cookies using the ClientFunctions mechanism. These cookies will be added to further requests. This approach is safe, since every test in TestCafe starts with clear cookies, so cookies modification will not affect other tests. I prepared an example, please see it:

import { ClientFunction } from 'testcafe';

const setCookie = ClientFunction(() => {
    document.cookie = "myCustomCookie=myCustomValue";
});

fixture `fixture`
    .page `http://google.com`;

test(`1`, async t => {
    await setCookie();

    await t.typeText('input[type=text]', 'test');

    await t.debug();
});

Answer 2

Please also take a look at https://azevedorafaela.com/2019/07/24/inject-cookies-in-your-testcafe-automation/?source=post_page--------------------------- . That article can be useful for your purpose.

Answer 3

TestCafe 1.20.0+ offers the t.request method - it is designed for API testing. Using this method, you can incorporate API testing right into your existing functional TestCafe tests. Read about this feature in the corresponding guide. If you'd like to attach a cookie to the request, you can use the withCredentials option.

Please note that to get/set/delete cookies in tests, you can use TestCafe's cookie management API (works for 'HTTPOnly' as well).