Issue facing with Global Setup

I am facing one issue related to global setup and teardown approach :

--> i have to run mutliple spec files , which are in different folders under test and wanted to login once and logout once all the spec files are executed.

-> So i have created global-setup.ts file and global-teardown.ts file for storing the state and once everything is done, teardown will logout.

--> i have given tags in the specific tests and created a config file where i have used it and created one test-runner file where these test cases will run

--> Also setup is done in playwright.config file

==> Now the problem statement is : when i am running the command , login is done and state is stored by global-setup and first test cases gets executed , but for the 2nd testcase login is happening again , if i comment the global-setup and global-teardown in playwright config , all the testcases are running as expected, because storage state is maintained , but this is not the ideal scenario, because when we run it in CI/CD problem will arise again , i am sharing code of all the files, please shared to expert advice (cant share the code on git , because this is office project) [will also share the project structure ]

global-setup.ts file :import { Browser, chromium, FullConfig } from '@playwright/test';
import { LoginPage } from '../../app/pages/login.page';
import * as fs from 'fs';
import { saveStorageState } from '../../../utils/utils';

export let browserConnection: Browser;
export let wsEndPoint: string;

async function globalSetup(config: FullConfig) {
const server = await chromium.launchServer({ headless: false });
wsEndPoint = server.wsEndpoint();

const browser = await chromium.connect(wsEndPoint);
browserConnection = browser;

const context = await browser.newContext();
const page = await context.newPage();

const loginPage = new LoginPage(page, context);

await loginPage.login();

//global.__LOGIN_PAGE__ = loginPage;

//await new Promise((resolve) => setTimeout(resolve, 3000));

await saveStorageState(context, page);

await context.close();

//await browser.close();

}

export default globalSetup;
global-terdown.ts :
import { FullConfig } from '@playwright/test';
import { chromium } from '@playwright/test';
import { LoginPage } from '../../app/pages/login.page';
import { loadStorageState } from '../../../utils/utils';
import { wsEndPoint } from './global-setup';

async function globalTeardown(config: FullConfig) {
const browser = await chromium.connect(wsEndPoint);
const context = await browser.newContext({ storageState: 'localStorageState.json' });

//const openPages = context.pages();

// console.log(Number of open tabs: ${openPages.length});

// Close all open pages in the context
// for (const page of openPages) {
//     await page.close();
// }

const origin = await loadStorageState(context);

const page = await context.newPage();
await page.goto(origin);

const loginPage = new LoginPage(page, context);
await loginPage.logout();

//await new Promise((resolve) => setTimeout(resolve, 3000));

await page.close();
await context.close();
await browser.close();

}

export default globalTeardown;

test-cases.config.ts :

{
"testCases": [
{
"file": "./src/app/tests/designers/module-designer/create-module.spec.ts",
"tags": ["create-new-project"]
},
{
"file": "./src/app/tests/designers/entity-designer/create-entity.spec.ts",
"tags": ["test-case-1"]
}

]

}

test-runner.ts :

import { exec } from 'child_process';
import { promisify } from 'util';
import * as fs from 'fs';

const execAsync = promisify(exec);

async function runTests() {
const config = JSON.parse(fs.readFileSync('./test-cases.config.json', 'utf-8'));
const testCases = config.testCases;

for (const { file, tags } of testCases) {
for (const tag of tags) {
try {
console.log(Running tests in ${file} with tag @${tag});
await execAsync(npx playwright test ${file} --grep "@${tag}");
} catch (error) {
console.error(Error running tests in ${file} with tag @${tag}:, error);
process.exit(1); // Exit on failure
}
}
}

console.log('All tests passed');
}

runTests().catch(err => {
console.error(err);
process.exit(1);

});

playwright.config.ts :

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
globalSetup: require.resolve('./src/app/global/global-setup'),
globalTeardown: require.resolve('./src/app/global/global-teardown'),
use: {
headless: false,
channel: 'chrome',
screenshot: 'on',
video: 'on',
viewport: { width: 1920, height: 970 },
launchOptions: {
slowMo: 3500,
args: ['--window-position=-5,-5'],
},
trace: 'on',
},
timeout: 1200000,
testDir: 'src/app/tests',
fullyParallel: false,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : 1,
reporter: 'html',

projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'], storageState: './localStorageState.json' },
},
// Define other projects as needed...
],
});

1st spec file :

import { test, expect, Page } from '@playwright/test';
import moduleDesignerTestConfig from "../../../../app/data/module-designer-test.config.json";
import { MenuNavigatorPage } from '../../../pages/menu-navigator.page';
import { ModuleDesignerPage } from '../../../pages/designers/module-designer/module-designer.page';
import * as fs from 'fs';
import { loadStorageState } from '../../../../../utils/utils';

import { LoginPage } from '../../../pages/login.page';

test.describe.configure({ mode: 'serial' });

let menuNavigatorPage: MenuNavigatorPage;
let moduleDesignerPage: ModuleDesignerPage;

test.beforeAll(async ({ browser }) => {
const context = await browser.newContext({ storageState: 'localStorageState.json' });
const page = await context.newPage();
const origin = await loadStorageState(context);
await page.goto(origin);

menuNavigatorPage = new MenuNavigatorPage(page, context);
moduleDesignerPage = new ModuleDesignerPage(page, context);

});

test('Create New Module by creating new project @create-new-project', async () => {
const projectName = await moduleDesignerPage.projectDesignerPage.createProject();
if (projectName) {
const moduleName = await moduleDesignerPage.createNewModule(projectName);
expect(moduleName).toContain(moduleDesignerTestConfig.module.moduleName);
} else {
throw new Error('Failed to create project');
}
});

test('Create New Module in existing project', async () => {
const projectName = moduleDesignerTestConfig.module.projectNameForModule;
if (projectName) {
const moduleName = await moduleDesignerPage.createNewModule(projectName);
expect(moduleName).not.toBeNull();

} else {
    throw new Error('Project name for module is not defined in the config');
}

});

----- 2nd spec file

import { test, expect, BrowserContext, Page } from '@playwright/test';
import { LoginPage } from '../../../pages/login.page';
import testConfig from "../../../../../test.config.json";
import { MenuNavigatorPage } from '../../../pages/menu-navigator.page';
import { getRandomNumber, loadStorageState } from '../../../../../utils/utils';
import { EntityDesignerPage } from '../../../pages/designers/entity-designer/entity-designer.page';
import { TestSuite } from '../../../common/test-suite.enum';
import entityDesignerTestConfig from "../../../data/entity-designer-test.config.json";
import { IEntity } from '../../../pages/designers/entity-designer/entity-designer.model';
import * as fs from 'fs';

test.describe(TestSuite.entityDesigner, () => {

test.describe.configure({ mode: 'serial' });
let menuNavigatorPage: MenuNavigatorPage;
let entityDesignerPage: EntityDesignerPage;

let context: BrowserContext;
let page: Page;

test.beforeAll(async ({ browser }) => {
const context = await browser.newContext({ storageState: 'localStorageState.json' });
const page = await context.newPage();
const origin = await loadStorageState(context);
await page.goto(origin);

    menuNavigatorPage = new MenuNavigatorPage(page, context);
    entityDesignerPage = new EntityDesignerPage(page, context)


});


// test.afterEach(async ({ page, context }) => {
//     await loginPage.logout();
// });


test('Create New Entity with main table by creating new project @test-case-1', async () => {
    let projectName = await entityDesignerPage.projectDesignerPage?.createProject();
    let entityName = await entityDesignerPage.createNewEntity(projectName as string
        , testConfig.entityTest.entityName + getRandomNumber());
    expect(entityName).toContain(testConfig.entityTest.entityName);
});


test('Create New Entity with main table using existing project', async () => {
    let entityName = await entityDesignerPage.createNewEntity(testConfig.entityTest.projectNameForEntity,
        testConfig.entityTest.entityName + getRandomNumber());
    expect(entityName).toContain(testConfig.entityTest.entityName);
});


test('Create Standard Entity In Standard Automation Project', async () => {
    let entityName = await entityDesignerPage.createNewEntity(testConfig.standard.projectName,
        testConfig.standard.entity.entityName);
    expect(entityName).toBe(testConfig.standard.entity.entityName);
});


test('Create New Entity with main table for Standard project', async () => {
    const entity: IEntity = entityDesignerTestConfig.entity;
    let entityName = await entityDesignerPage.createNewEntityForStandardProject(testConfig.standard.projectName, entity);
    expect(entityName).toContain(testConfig.standard.entity.entityName);
});

});

---- this is common file for function:

import { ControlEvent, HttpVerb } from "../src/app/common/common.model";
import { Response } from "playwright-core";
import { BrowserContext, Page } from '@playwright/test';
import * as fs from 'fs';
export async function saveStorageState(context: BrowserContext, page: Page) {

// Save localStorage state

await context.storageState({ path: 'localStorageState.json' });

// Get session storage and store as a file

const sessionStorage: any = await page.evaluate(() => JSON.stringify(sessionStorage));

fs.writeFileSync('sessionStorage.json', sessionStorage, 'utf-8');

}

export async function loadStorageState(context: BrowserContext) {

// Load the saved storage state

const savedStorageStateStr = fs.readFileSync('localStorageState.json', 'utf8');

const savedStorageState = JSON.parse(savedStorageStateStr);

// Manually set cookies

await context.addCookies(savedStorageState.cookies);

const origin = savedStorageState.origins[0].origin;

// Manually set local storage

const sessionStorage = JSON.parse(fs.readFileSync('sessionStorage.json', 'utf-8'));

await context.addInitScript(storage => {

for (const [key, value] of Object.entries(storage)) {

window.sessionStorage.setItem(key, value as string);

}

}, sessionStorage);

return origin;

}