[Question] Persist Auth from Session Storage?

I have seen the docs on this: https://playwright.dev/docs/auth#session-storage.

However, I am a bit lost at the location I should add the hook for addInitScript.

I have tried adding it in: beforeAll, the test itself, overriding the context fixture. However, none seem to work. Where would be the proper place to place this hook?

const test = base.extend({
  // override `context` fixture to add init script
  context: async ({ context }, use) => {
    await context.addInitScript(() => {
      const entries = JSON.parse(process.env.SESSION_STORAGE);
      for (const [key, value] of Object.entries(entries)) {
         window.sessionStorage.setItem(key, value);
      }
    });
    await use(context);
  },
});

This is the attempt with overriding. If I add a console.log inside the initScript fn it doesn’t show anything, if I add it outside, it works. Also, the session storage seems to have values, it’s just that they are all set on null. The value from the environmental variable is correct.

[taigi100]

@Citronex Not sure if this is best practices, it works. In every test suite I have, on a beforeAll I do a login and save the session in an environmental variable as per the docs:

export async function loginAndSaveSession(browser: Browser) {
  const page = await browser.newPage();
  const context = await browser.newContext();
  await login(page);
  await saveSession(page);
  await context.close();
  await page.close();
}

Then, to properly load the session on every test, I override the fixture:

export const test = base.extend({
  // override `context` fixture to add init script
  context: async ({ context }, use) => {
    const sessionStorage = process.env.SESSION_STORAGE;
    await context.addInitScript((storage: string) => {
      const entries = Object.entries(JSON.parse(storage));
      for (let i = 0; i < entries.length; i += 1) {
        const [key, value]: [key: string, value: any] = entries[i];
        window.sessionStorage.setItem(key, value);
      }
    }, sessionStorage);
    await use(context);
  },
});

The tests then look exactly like the normal tests, but just use the extended test function instead of the one from playwright.

[Citronex]

Thanks @taigi100 ! Yeah I’m doing something very similar, the only difference is that my login is inside global-setup.ts. I save the session inside process.env and then override the fixture.