Playwright: Failed to Read the localStorage property from Window: Access is denied for this document

Question

I have this script to modify localStorage of my browser instance (assuming all definitions are correct). it returns this Error. I have a feeling that this is because Playwright is launching a browser in incognito mode. Is there a way for me to launch browser in normal mode?

Script:

const rdlocalStorage = fs.readFileSync('localstorage.json','utf8');
    const deserializedStorage = JSON.parse(rdlocalStorage);
    console.log (deserializedStorage);
    await page.evaluate((deserializedStorage)=>{
        for (const key in deserializedStorage){
            localStorage.setItem(key,deserializedStorage[key]);
        }
    }, deserializedStorage);

Error Message enter image description here

score 2 · Accepted Answer · answered Nov 17 '21 at 17:11

I don't know why your error happens, but maybe I do have an alternative. Playwright has an API to restore cookies and local storage for you, without you having to code it.

context.storageState is the method which allows you to capture the cookies, local storage, etc. You can either await and use the return value as object, or (await and) save the storage state to a file.

Restoring the storage state is done when creating a new browser context, by means of the storageState property on the options parameter of the browser.newContext method. You can either pass it a storageState object or a path to a storage state file.

These same objects and files can also be used in the @playwright/test runner.

The only thing which is not stored in storage state is the session storage (the 'brother' of the local storage). According to the Playwright docs it's not used so often for authentication state, so they don't have a 'native' method for saving and restoring it. But they do describe how to deal with session storage in case it's needed.

Thank you for this. It has worked on my side. Just to add, I have put additional lines of code just to check for my login user API response. with that, i was able to capture the bearer tokens and user details needed to complete the localStorage. — MagsTester, Nov 21 '21 at 07:26

score 1 · Answer 2 · answered Dec 07 '22 at 16:49

Not sure if I am correct but using await page.evaluate might not permit you to do what you're trying to do, thus getting that error. Try instead using the following snippet:

 await context.addInitScript((deserializedStorage)=>{
     for (const key in deserializedStorage){
         localStorage.setItem(key,deserializedStorage[key]);
     }
 }, deserializedStorage);

foobored · Answer 3 · 2023-07-13T13:16:24.383

This error is happening if you called your page.evaluate before you actually opened a page (await page.goto(X)).

test('accessing localstorage', async (page) => {
  // this will fail
  await page.evaluate((val) => localStorage.setItem('item1', val), 'some val')
  // --> throws "Playwright: Failed to Read the localStorage property from Window"
})

Accessing localStorage via page.evaluate is no issue as long as a page is actually loaded.

test('accessing localstorage', async (page) => {
  // first load a page
  await page.goto('https://some.place')

  // then you can access localStorage
  await page.evaluate((val) => localStorage.setItem('item1', val), 'some val')
  const value1 = await page.evaluate(() => localStorage.getItem('item1'))

  await expect(value1).toBe('some val')

})

Playwright: Failed to Read the localStorage property from Window: Access is denied for this document

3 Answers3