[Question] - storageState - only working in 1 of 3 browsers

I originally posted this as a discussion before I saw that the api docs link to issues/questions for questions, so here it is: https://github.com/microsoft/playwright/discussions/16548

I am new to playwright so I assume I am doing something wrong. I am trying to use storageState with Auth0.

My global-setup.js has the following:

const auth0StorageState = './auth/UATAuth0AgentAuth.json'
  browser = await chromium.launchPersistentContext('', { headless: true })
  page = await browser.newPage()
  await auth0LoginPage.login(page)
  await page.context().storageState({
    path: auth0StorageState,
  })

My test has this:

  test.describe('UI Tests for new UI', () => {
  test.use({ storageState: './auth/UATAuth0AgentAuth.json' })
  
  test('Should bypass log in page', async ({ page }) => {
  await page.goto('https://<<myURL>>/')

This is what I am seeing, if I run one browser, chromium, firefox, safari, it works just fine, due to getting creds and storing them in global-setup, the login page is bypassed.

IF I run all three browsers, only one of the 3 will bypass the login page, it is as if the other two aren’t picking up or using the storageState correctly.

Any idea what I am doing wrong?

Right now I am running in chromium only by doing this

  test.describe('UI Tests for new UI', () => {
  test.skip(({ browserName }) => browserName !== 'chromium', 'Chromium only!')
  test.use({ storageState: './auth/UATAuth0AgentAuth.json' })

My playwright-config.js browser setup:

  projects: [
  {
    name: 'firefox',
    use: {
      ...devices['Desktop Firefox'],
    },
  },
  {
    name: 'chromium',
    use: {
      ...devices['Desktop Chrome'],
    },
  },
  {
    name: 'webkit',
    use: {
      ...devices['Desktop Safari'],
    },
  }

[jlee-vouch]

@aslushnikov I figured out what the problem was. I spend most of the day making a new auth0 app, a test express app etc and sharing the auth0 creds worked…

So I looked at the app that isn’t working and this stuck out:

Refresh Token Rotation was enabled in Auth0.

So in my test, after every navigation to my site that does an auth0 check, I wait for the redirect to happen back to our site and I write the new keys/values back to my json file

test.describe('UI Tests for MYSITE', () => {
  test.use({ storageState: './auth/UATAuth0AgentAuth.json' })


test('NAV TO MY SITE', async ({ page }) => {
  await page.goto('https://mysite.com/')
  await page.locator('text=Log In').click()
  await page.waitForSelector('text=Welcome',{timeout:25000})
  const auth0StorageState = './auth/UATAuth0AgentAuth.json'
  await page.context().storageState({
    path: auth0StorageState,
  })

The downsides are it seems like I would have to run with just 1 worker but it is OK for now.

Thanks for your help

[aslushnikov]

Is there a way to look at any variables or browser data in the runs to ensure it properly loaded? It for sure is in the first run/browser it launches.

@jlee-vouch Browser DevTools can show you localstorage state, for example.

I did put breakpoints in the code and I verified the json file with the cookies for auth do not change after the first successful use and the failing second and third.

Well, something should change, otherwise things would work! Hard to say what’s going on though.

I will see what I can come up with.

We’ll appreciate if you can come up with any repro that demonstrates the issue. I’ll close this for now since it’s not actionable on our side, but please do not hesitate to file another issue if you have a repro we can run locally & debug!