Playwright failing to properly set storageState

Despite diligently following the instructions on the official Playwright page to configure the storageState feature, I am disappointed to discover that nothing is actually being saved:

The process I followed is outlined below:

(1) First, I created the global-setup.ts file:

async function globalSetup() {
    const requestContext = await request.newContext();
    let foo = await requestContext
        .post('https://some/page/signin', {
        form: {
            'username': 'xxx',
            'password': 'yyy',
            'remember': 'on'
        }
    });
    // The signed-in state should be saved to 'storageState.json'.
    await requestContext.storageState({ path: 'storageState.json' });
    await requestContext.dispose();
}

export default globalSetup; 

(2) Next, I referenced the storageState in the playwright.config.ts file:


import { PlaywrightTestConfig } from '@playwright/test'

const config: PlaywrightTestConfig = {
    globalSetup: require.resolve('./global-setup'),
    timeout: 60000,
    retries: 0,
    use: {
        // Instruct all tests to load the signed-in state from 'storageState.json'.
        storageState: 'storageState.json',
        headless: false,
        viewport: { width: 1280, height: 720 },
        actionTimeout: 15000,
        ignoreHTTPSErrors: true,
        video: 'retain-on-failure',
        screenshot: 'only-on-failure',
    },
    projects: [
        {
            name: 'Chromium',
            use: { browserName: 'chromium' },
        }
    ],
}
export default config

However, upon inspecting the storageState.json file that was generated, I observed the following:

{
  "cookies": [],
  "origins": []
}

I can't seem to figure out why the cookies and origins data are empty, especially considering that the request returned a successful 200 response. What could be causing this issue?

Answer №1

How about giving this a go instead of handing over the 'storageState.json'?

try using requestContext.storageState({ path: storageState });

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

The 'import type' declaration cannot be parsed by the Babel parser

Whenever I attempt to utilize parser.parse("import type {Element} from 'react-devtools-shared/src/frontend/types';", {sourceType: "unambiguous"}); for parsing the statement, I come across an error stating Unexpected token, exp ...

Ways to implement material-ui button design on an HTML-native button

I am using pure-react-carousel which provides me an unstyled HTML button (ButtonBack). I would like to customize its style using material-ui. Trying to nest buttons within buttons is considered not allowed. An approach that works is manually assigning th ...

Error TRPCClient: The unexpected presence of the token "'<'", ""<!DOCTYPE "... invalidates the JSON format within Next.JS

Encountering an error in the authentication call back page: TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON in Next.JS. The issue occurs in src/app/auth-callback/page.tsx and here's the relevant code ...

Creating a standard arrow function in React using TypeScript: A Step-by-Step Guide

I am currently working on developing a versatile wrapper component for Apollo GraphQL results. The main objective of this wrapper is to wait for the successful completion of the query and then render a component that has been passed as a prop. The componen ...

Simulating NestJS Injected Connection Imported from Another Module

Today, I've been facing this persistent error: Encountering an issue with the ClubsService where Nest is unable to resolve dependencies (specifically DatabaseConnection). The error message prompts me to ensure that the argument DatabaseConnection at i ...

Is it possible for TypeScript to preserve the return type while consolidating multiple classes or objects of functions in a reducer method?

Describing my issue with the title was challenging, but here it is: I have several objects that follow this structure: type TUtilityFunction = {[key: string]: <T>(a: T, b: any) => T} For example: class UtilityA{ DoSomeWork = function (arg1: So ...

Tips for creating an array that aligns with the keys of a type in TypeScript

Currently, I am utilizing the Kysely SQL builder for JS based on Vercel's recommendation, despite the limited documentation and community support. This SQL builder is fully typed, allowing you to create a db object with a schema that recognizes table ...

Utilizing a single component for various purposes with diverse tags in react

I am faced with the challenge of creating two almost identical components, Component A: const ClaimedLabel = ():React.Element => ( <div tw=""> <p tw="">Some Text here</p> <div tw=""> <Icon ...

Scope Error: Variable 'Undefined' is Not Defined Outside Function in Angular 2

In one of my methods, I am subscribing to an observable and later need to unsubscribe from it in another method. The subCounter() method is triggered from an initialization function and works correctly. subCounter() { this.fml = this.playerService.coun ...

What is the best way to add a global variable to every item within an ngFor loop in Angular 4?

My challenge is to access a global variable public right: any = 30; I need to uniquely call this variable from each element and increment it by 30 in an ngFor loop iterating over the People object: interface Person { name: String, title: String, ...

Navigating Angular Router with Special Characters in URL and How Browsers Handle Encoding

I'm really struggling to find a solution for this issue. I'm currently working on designing a search engine that displays the user's query in the URL like this: https://my-site.com/search;query=%28rockstar;search=true;page=0 The user is lo ...

How to access a template variable within a component

I encountered a problem with ng-template. In our table component, we pass parameters using ngTemplateOutletContext as shown below. Depending on the data type, we use different renderers for the cells. Pay attention to the cellvalue parameter, it is crucia ...

TypeScript - the object may potentially be 'null'

Despite receiving an error message, the program is running perfectly. https://i.sstatic.net/4NQyR.jpg var video = document.querySelector('#camera-stream'), if(!navigator.getMedia){ displayErrorMessage("Your browser doesn't have su ...

Refining a category

I'm attempting to create an implementation that meets the requirements of a type, but in a more specific way than that type. type A = 'number' | 'string' type B = { [prop: string]: ( input: { [key: string]: A }, ) ...

Can you explain the meaning of <T, U = T> in typescript terms?

While I'm comfortable with the syntax <T, U> and its use, I find myself puzzled by the syntax <T, U = T>. I've combed through the TypeScript documentation without success in locating any information on this. Any recommendations for fu ...

Typescript's dynamic arguments feature allows for passing varying numbers of parameters without using ell

// Defining function: lm( vv: number, kk: string[] ) { console.log( kk ) } // Invoking the function this.lm( 33, ["dd","ff","da"] ) I have thoroughly tested the provided code and it is working flawlessly. But why do we need ellipses? Refe ...

Property '{}' is not defined in type - Angular version 9.1.1

Currently, I am working with Angular CLI version 9.1.1 and I am attempting to update certain data without updating all of it. form: UserInfo = {adresse : {}}; UserInfo.interface export interface UserInfo { id_user: string; username: string; em ...

What is the best way to change a timestamp into a date format using Angular?

I am struggling to convert a timestamp to the date format 'dd/MM/YYYY' but keep getting a different date format in the output. I am using syncfusion spreadsheet for this task. https://i.sstatic.net/BoRaa.png export-electronic.component.ts updat ...

Constructor caching leading to the error message: "The property '...' does not have an initializer and is not definitely assigned in the constructor."

Whenever I work on projects, I tend to create classes with constructors that cache the objects they generate. This way, if the constructor is called with the same parameters multiple times, it will return the same instance rather than creating redundant in ...

Exploring the implementation of if/else statements in Sass/HTML

I need assistance with customizing the appearance of a save button on my form. The button is currently disabled and appears in blue color, but I would like it to change to a different color until all fields within the form are completed. Even though it c ...