The cookie value is blank once after moving to the second page

I'm facing an issue with 2 domains where performing an action on the first domain results in setting a cookie that should be accessible on both domains. However, when trying to read the value of this cookie on the second domain, it appears empty. Can anyone explain why?

Here's a snippet of code that retrieves the cookie value:

const getCookie = ClientFunction(() => {
    const name = 'ConfigCookie';
    const match = document.cookie.match(new RegExp(name + '=([^;]+)'));
    let decodedValue;
    if (match) decodedValue = decodeURIComponent(match[1]).replace(/%28/g, '(').replace(/%29/g, ')');
    return JSON.parse(decodedValue || '');
})

Below is a test script (with sensitive data removed) that replicates the problem:

test('xyz', async t => {
    await t
        .navigateTo(FirstDomain)
        .click(firstDomainSubmitButtonSelector)
        const firstDomainCookie = await getCookie();
        const firstDomainConsents = firstDomainCookie.consents;
    await t
        .expect(consents).eql({here the expected value});
    await t
        .navigateTo(SecondDomain)
        const secondDomainCookie = await getCookie();
        const secondDomainConsents = secondDomainCookie.consents;
        console.log(secondDomainConsents)
})

Answer №1

After creating a code snippet using TestCafe, I was able to successfully demonstrate the behavior as described. The test passed without any issues on my end. However, if you could modify the test to showcase the problematic behavior and then provide me with the corrected code, I would appreciate it so that I can replicate the issue on my side.

import { Selector, ClientFunction } from 'testcafe';
 
fixture`test fixture`
const FirstDomain = 'http://devexpress.github.io/testcafe/example';
const SecondDomain = 'https://wikipedia.org/';
test('test name', async t => {
    const setCookie = ClientFunction(() => {
        document.cookie = 'key=value'
    });
    const getCookie = ClientFunction(() => {
        return document.cookie;
    });
    const data = 'key=value'
    await t.navigateTo(FirstDomain)
    await setCookie()
    await t.expect(await getCookie(data)).ok()
    await t.navigateTo(SecondDomain)
    await setCookie()
    await t.expect(await getCookie()).ok(data)
    await t.navigateTo(FirstDomain).click(await Selector('#submit-button'))
    await t.expect(await getCookie()).ok(data)
    await t.navigateTo(SecondDomain)
    await t.expect(await getCookie()).ok(data)
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to locate pseudo-elements using Selenium

There is a single page with the following HTML code: <div class="call-to-action call-to-action--final"> <input type="submit" name="complete" value="Complete order" class="btn btn--primary" data-submit-payment="true"> </div> CSS Code ...

Dealing with Angular 2's Http Map and Subscribe Problem

Looking to parse a JSON file and create a settingsProvider. This is how I am attempting it: import {Http} from "angular2/http"; import {Injectable} from "angular2/core"; @Injectable() export class SettingsProvider{ url: string = ""; constructor ...

Retrieving the value of a selected option in Angular

I have the following dropdown select in my HTML and I am currently retrieving the text content of the selected option. How can I access the value attribute instead? Here is the dropdown select: <form [formGroup]="angForm" class="form-inline my-5 my-l ...

The module ~/assets/images/flags/undefined.png could not be found in the directory

When I use the img tag with a dynamic address filled using require, it works well in the component. However, when I try to write a test for it, an error is thrown. console.error Error: Configuration error: Could not locate module ~/assets/ima ...

Resolving ES6 type conflicts while compiling TypeScript to Node.js

I seem to be facing some challenges with the TypeScript 2 type system when working with Node.js. Let me explain the situation: I am compiling a small Node.js Express server written in TypeScript to plain ES5 for running under Node 6.10.0 (target: ES5 in ...

tips for utilizing a variable for inferring an object in typescript

In my current code, I have the following working implementation: type ParamType = { a: string, b: string } | { c: string } if ('a' in params) { doSomethingA(params) } else { doSomethingC(params) } The functions doSomethingA and doSomething ...

Enhance Your Angular SPAs with Automated Accessibility Testing Tools

Has anyone had success using an automated accessibility testing tool specifically designed for Angular Single Page Applications (SPA)? I experimented with pa11y, but it was not providing consistent results. I'm curious if there are other tools simila ...

Tips on customizing the appearance of the dropdown calendar for the ngx-daterangepicker-material package

Is there a way to customize the top, left, and width styling of the calendar? I'm struggling to find the right approach. I've been working with this date range picker. Despite trying to add classes and styles, I can't seem to update the app ...

Avoid saying the same thing more than once

Within my Typescript class, I have the following structure: class C { #fsm (...) startFoo(name: string) { this.#fsm.send('FOO', name) return this } startBar(name: string) { this.#fsm.send('BAR', name) return th ...

When attempting to display an identical image on two distinct canvas elements in Angular 6

I am facing an issue where the image is only rendered on the second canvas instead of both canvases. I need assistance in finding a solution to render the same image on both canvases. Below is a screenshot demonstrating that the image is currently only re ...

Using Angular to make an HTTP POST request to fetch data

My trusty .net backpack has been working flawlessly. However, I encountered an issue when trying to connect it with the Angular front end. All backend requests are post requests and require passing an ApiKey in the body of each request. Interestingly, ever ...

How to trigger a click event in React using TypeScript and material-ui library

Currently, I am facing an issue when trying to update the value of material-ui TextFields from the store. When manually typing inside the field, everything works fine as expected with the handleChange() and handleBlur() functions handling the events. Howev ...

What is the process of transforming an object type into a two-dimensional array using lodash?

In order to properly display multiple tables in my Angular project, I am looking to convert an object type into an array of different objects. The object I am working with is as follows: let myObject = { internalValue:{city:"Paris", country:"France", pin ...

What is the syntax for adjusting background-position with ngStyle in Angular 4?

It's finally Friday! I'm a bit confused about how to properly set the background-position-x property in an [ngStyle] directive in Angular 4 with Ionic 3. Can someone guide me on the correct way to implement background-position-x? I expect the ou ...

What is the reason behind Flow's reluctance to infer the function type from its return value?

I was anticipating the code to undergo type checking within Flow just like it does within TypeScript: var onClick : (() => void) | (() => boolean); onClick = () => { return true; } However, I encountered this error instead: 4: onClick = () => ...

What does `(keyof FormValues & string) | string` serve as a purpose for?

Hey there! I'm new to TypeScript and I'm a bit confused about the purpose of (keyof FormValues & string) | string. Can someone please explain it to me? export type FieldValues = Record<string, any>; export type FieldName<FormValues ...

NextAuth credentials are undefined and authentication is malfunctioning in React

I encountered the following issue: This is the code snippet that I am using: return ( <> {Object.values(providers).map((provider) => { if (provider.id === "credentials") { return null; } retu ...

What is the best way to transform an array of objects into a nested array through shuffling

I am dealing with a diverse array of objects, each structured in a specific way: data = [ { content: { ..., depth: 1 }, subContent: [] }, { content: { ..., depth: 2 ...

The node version in VS Code is outdated compared to the node version installed on my computer

While working on a TypeScript project, I encountered an issue when running "tsc fileName.ts" which resulted in the error message "Accessors are only available when targeting ECMAScript 5 and higher." To resolve this, I found that using "tsc -t es5 fileName ...

Fill up the table using JSON information and dynamic columns

Below is a snippet of JSON data: { "languageKeys": [{ "id": 1, "project": null, "key": "GENERIC.WELCOME", "languageStrings": [{ "id": 1, "content": "Welcome", "language": { ...