playwright JS reuse the signed-in empty storageState.json

Question

I'm new to playwright and trying to reuse the signed-in but i always end with storageState.json file empty

I added this code to playwright.config.ts globalSetup: require.resolve('./utils/global-config.ts'),

And my global file is

import { chromium, expect } from "@playwright/test"

async function globalConfig() {
    
    const browser = await chromium.launch()
    const page = await browser.newPage()
    await page.goto('https://qacart-todo.herokuapp.com/login');
    await page.locator("#login").fill("[email protected]")
    await page.locator('//input[@data-testid="password"]').fill("123456")
    await page.locator('button:has-text("login")').click();
    await expect(page.locator('[data-testid="welcome"]')).toBeVisible
    await page.context().storageState({ path: 'storageState.json'});
}

export default globalConfig

And the test case

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


test.describe("todo page test cases", async()=> {
      // test.use({
      //   storageState: 'storageState.json' })
      
    test.beforeEach(async({page})=> {
        await page.goto('https://qacart-todo.herokuapp.com/login');
        await page.locator("#login").fill("[email protected]")
        await page.locator('//input[@data-testid="password"]').fill("123456")
        await page.locator('button:has-text("login")').click();
    })

    test("mark a todo as completed", async({page}) => {
        await page.locator('[data-testid="add"]').click()
        await page.locator('[data-testid="new-todo"]').fill('My First Automation To DO')
        await page.locator('[data-testid="submit-newTask"]').click()
        await page.locator('[data-testid="complete-task"]').nth(0).click()
        await expect(page.locator('[data-testid="todo-item"]').nth(0)).toHaveCSS('background-color', 'rgb(33, 76, 97)')
      })
      test("welcome message displayed", async({page}) => {
        await expect(page.locator('[data-testid="welcome"]')).toBeVisible()      
        })


})

Answer 1

Looks like you accidentally awaited a function reference instead of calling it, immediately moving on to the saving storage state line, which makes sense that it could end up empty. So you should just need to add the () to the end of this line:

await expect(page.locator('[data-testid="welcome"]')).toBeVisible

Although you don’t really need to assert that it’s visible (it may actually give an error outside a test), so I may recommend using locator.waitFor instead like so:

await page.locator('[data-testid="welcome"]').waitFor()

With that, assuming you’re use-ing the storageState, either in the config or in the test file as you commented out, you should be good to go and can remove that login in the beforeEach.

Hope that helps!