[BUG] storageState in globalSetup will has empty cookies in Playwright headless mode

Context:

• Playwright Version: @playwright/test version ^1.23.1
• Operating System: macOS Big Sur v11.6 M1 Chip
• Node.js version 16.13.1
• Browser: Chromium

Code Snippet

StorageState failed to save cookies in headless mode enabled from Playwright globalSetup.

I define a globalSetup for playwright.config.ts

const config: PlaywrightTestConfig = {
  ...  
  globalSetup: require.resolve('./e2e/helpers/globalSetup'),
  ...
}

Here’s my e2e/helpers/globalSetup.ts content:

const globalSetup = async (config: FullConfig) => {
  const browser = await chromium.launch();
  const baseURL = config.projects[0].use.baseURL;

  const page = await browser.newPage();
  // do logic to login

  // save session to owner.json file
  await page.context().storageState({ path: 'e2e/mocks/owner.json' });

  await browser.close();
};

And in my spec file, I just called them:

test.describe.parallel('As owner', () => {
  test.use({ storageState: getStorageState('e2e/mocks/owner.json') });

  test('should be able to see home page', async ({ page }) => {
    await page.goto('/');
    await expect(page.locator('text=HomeIsHere')).toBeVisible();
  });
});

This is all working fine if I run the playwright WITHOUT headless mode, I can see my file e2e/mocks/owner.json has the cookies stored properly.

But when I enabled headless mode, I can see the save to storageState that is called from globalSetup file will override my ‘e2e/mocks/owner.json’ file with empty cookies and context like this:

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

I tried some ways that led me to this conclusion:

• Disable headless mode and run Playwright in debug mode: Cookies is stored
• Remove globalSetup and setup another spec file to store session: Cookies is stored when called with test.use({ storageState: '' })

I’m not sure whether someone has found solution to this, I tried checking others reported bug here, but none has a working solution in this case and some are just people keep reporting they have issues but the issue thread is closed 😦

• https://github.com/microsoft/playwright/issues/9112
• https://github.com/microsoft/playwright/issues/12884
• https://github.com/microsoft/playwright/issues/717

[mxschmitt]

There are multiple reasons why this happens, most likely your website behaves different when a headless browser automates it. You can e.g. enable tracing to find out what exactly is going on (library tab): https://playwright.dev/docs/next/trace-viewer

Also you may need to wait until your are actually logged in, instead of directly trying to save the storageState - imagine that you click, Playwright directly saves the storage state but the actual login is happening in the background after calling storageState.

[rfbowen]

For future weary travelers:

I encountered this problem and came to realize the request and page objects passed into each test are a bit misleading. Issuing a POST with request will not populate page with your cookies. Attempts to save state off of it will fail / be empty.

Disregard the additional arguments and work from page alone. In particular, issue your request with page.context().request.post. After that point I was able to navigate and use the cookies successfully, as well as persist them.

Definitely caught me off guard!