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("hatem@example.com")
    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("hatem@example.com")
        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()      
        })


})

score 2 · Accepted Answer · answered Feb 12 '23 at 23:38

2

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!

answered Feb 12 '23 at 23:38

David R

493
2
8

1

OMG! Thank you! it is working now, but i cant find waitFor(), i just have a list of 'tobe...' – Yehia Gamal Feb 13 '23 at 00:08
@YehiaGamal Awesome, you’re welcome! `waitFor` is a method directly on the locator (see the doc I linked), not on an `expect` call, since its purpose is just waiting rather than making an assertion too. – David R Feb 13 '23 at 00:27
@YehiaGamal if you’re considering this solved, I recommend marking it as accepted to indicate that to others coming to this question. If not, or still having problems with `waitFor` and that’s holding you back, please share any additional info you have or need! – David R Feb 15 '23 at 00:26

playwright JS reuse the signed-in empty storageState.json

1 Answers1