Test localStorage State

The concept

localStorage is a small key-value store the browser keeps per origin, meaning scheme, host and port. Apps use it for themes, drafts, feature flags and sometimes auth tokens. Tests often need to seed it or check it.

Your test reaches it through page.evaluate(), because storage lives in the browser. There is one trap: a brand-new page is on about:blank, which has no real origin, and accessing localStorage there throws a SecurityError. Navigate to the site first, then read or write.

If you set values and want the app to pick them up, reload after writing. For seeding many tests at once, Playwright's storageState or context.addInitScript() are the usual tools.

The fragile version

await page.evaluate(() => localStorage.setItem('currency', 'GBP'));
await page.goto('/');

Why it breaks: The evaluate runs on about:blank, which has no origin, so it throws before the test even loads the site.

A robust Playwright version

await page.goto('/');
await page.evaluate(() => localStorage.setItem('currency', 'GBP'));
await page.reload();
expect(await page.evaluate(() => localStorage.getItem('currency'))).toBe('GBP');
await expect(page.getByText('Prices in GBP')).toBeVisible();

It gives the page a real origin first, writes, reloads so the app reads the value, and checks both storage and UI.

This is a general example on a made-up page, not the challenge’s reference solution.

Common mistakes

• Touching storage before navigating to the site.
• Writing on one origin and reading on another (for example www. versus bare domain).
• Forgetting to reload when the app only reads storage on start-up.

FAQ