I’m using Playwright to write my e2e tests. I have been using beforeEach hooks but I have decided that it would be better to use a global setup. It seems however that the storage state is not properly passed to the tests themselves or maybe my whole implementation is just wrong.

This is my playwright.config.ts:

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

export default defineConfig({
  globalSetup: "./global-setup.ts",
  testDir: './tests',
  retries: 2, // Set the number of retries here
  reporter: [['html'], ['list']],
  use: {
    baseURL: 'http://localhost:8080/velocity_builder',
    headless: true,
    screenshot: 'only-on-failure',
    storageState: './storageState.json'
  },
  workers: 4,
  timeout: 30000,
});

Here is my global-setup.ts:

import { expect, Browser, chromium, Page } from '@playwright/test';
import { BuilderPage } from './tests/BuilderPage';

async function globalSetup() {
const browser: Browser = await chromium.launch({ headless: false })
const context = await browser.newContext()
const page: Page = await context.newPage()
const builderPage = new BuilderPage(page); // initialize a new builder page object
await page.goto('http://localhost:8080'); // go to the builder
await builderPage.initializeBuilder(); // initialize the builder by clicking a blank applet

    // Ensure panels are visible
    await expect(builderPage.panels.document).toBeVisible();
    await expect(builderPage.panels.quickView).toBeVisible();
    await expect(builderPage.panels.properties).toBeVisible();
    
    // Ensure buttons are visible
    await expect(builderPage.saveButton).toBeVisible();
    await expect(builderPage.previewButton).toBeVisible();
    await expect(builderPage.automationButton).toBeVisible();
    await expect(builderPage.globalizationButton).toBeVisible();
    await expect(builderPage.addButton).toBeVisible();
    
    // Click on the add button and ensure toolbox panel is visible
    await builderPage.addButton.click();
    await expect(builderPage.panels.toolbox).toBeVisible();
    
    // Store session state (e.g., cookies) for further use in tests
    const storageState = await page.context().storageState({ path: 'storageState.json' });
    console.log(storageState)
    
    await browser.close()

}

export default globalSetup

And lastly this is the test I have been trying to run unsuccsessfully:

import { test, expect, Page } from '@playwright/test';
import { BuilderPage } from './BuilderPage';

test.describe.configure({ mode: 'parallel', retries: 4 }); // Runs the test in the file in parallel mode and retries them 4 times if they fail
test.describe('Element Style Tests', () => {
// let page: Page;
let builderPage: BuilderPage;
test('Check Header Style', async () => {
await builderPage.addElementToDocument('Header');
const isElementInQuickView = await builderPage.verifyElementInQuickView();
expect(isElementInQuickView).toBe(true);

        const types = [
            'Header (Branded)',
            'Header (Decorative)',
            'Section',
            'Header'
        ];
    
        for (let i = 0; i < types.length; i++) {
            await new Promise((resolve) => setTimeout(resolve, 500)); // You might want to replace this with a better synchronization method
            await builderPage.checkHeaderStyleChange(types[i]);
        }
    });

});

The global setup seems to be working fine as it successfully writes in the storageState.json:

{
"cookies": [],
"origins": [
{
"origin": "http://localhost:8080",
"localStorage": [
{
"name": "flowplayerTestStorage",
"value": "test"
}
]
}
]
}

And also when i run it in a headless mode i can see that the commands are working just fine. However when it gets to the test itself, this is what i get in the test results terminal:

Running global setup if any…
{
cookies: [],
origins: [ { origin: 'http://localhost:8080', localStorage: [Array] } ]
}

Running 1 test using 1 worker

x  1 testStyles.spec.ts:9:9 › Element Style Tests › Check Header Style (11ms)
x  2 testStyles.spec.ts:9:9 › Element Style Tests › Check Header Style (retry #1) (11ms)
x  3 testStyles.spec.ts:9:9 › Element Style Tests › Check Header Style (retry #2) (12ms)
x  4 testStyles.spec.ts:9:9 › Element Style Tests › Check Header Style (retry #3) (11ms)
x  5 testStyles.spec.ts:9:9 › Element Style Tests › Check Header Style (retry #4) (11ms)

1) testStyles.spec.ts:9:9 › Element Style Tests › Check Header Style ─────────────────────────────

    TypeError: Cannot read properties of undefined (reading 'addElementToDocument')
    
       8 |     let builderPage: BuilderPage;
       9 |     test('Check Header Style', async () => {
    > 10 |         await builderPage.addElementToDocument('Header');
         |                           ^
      11 |         const isElementInQuickView = await builderPage.verifyElementInQuickView();
      12 |         expect(isElementInQuickView).toBe(true);
      13 |
    
      ```

I would be happy if someone could help me understand what I am doing wrong.