[Feature] API for changing localStorage

[djasnowski]

I'm trying to get the localStorage of an app via:

const storage = await context.storageState(); and it outputs: { cookies: [], origins: [] }

and then I try:

    const localStorage = await page.evaluate(() =>
      JSON.stringify(window.localStorage)
    );
    console.log(localStorage);

and I get: page.evaluate: Evaluation failed: DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

I know this page has localStorage because In between tests, I can see the localStorage in the Application tab.

[dgozman]

@naknode Most likely your page is at some restricted origin, e.g. about:blank. Try logging page.url() or page.evaluate(() => window.location.href) and see what it says.

We can look into this in detail, but we need a repro script to run locally.

[djasnowski]

@dgozman I realized I wasn't doing a page.goTo() so I was getting that about:blank. Once I fixed that... I am able to get the localStorage

The repo is pretty basic. It's a blank repo since we're having a separate repo for our e2e test.

So now that i do const localStorage = await page.evaluate(() => window.localStorage);, I get the localStorage I need.

Modifying it now is another matter. Doing window.localStorage.setItem() doesn't seem to work.

[dgozman]

Modifying it now is another matter. Doing window.localStorage.setItem() doesn't seem to work.

I am not sure I can help with this, web apis are up to the browser. I'd suggest to open Developer Tools and play with local storage in the console. Take a look at our Debugging Tools doc.

[djasnowski]

@dgozman

Modifying it now is another matter. Doing window.localStorage.setItem() doesn't seem to work.

I am not sure I can help with this, web apis are up to the browser. I'd suggest to open Developer Tools and play with local storage in the console. Take a look at our Debugging Tools doc.

Well, I finally found a way...

    await page.evaluate(
      `window.localStorage.setItem('X', 'Y')`
    );

It feels hacky. It works. Does playwright not support localStorage modifying with ease? I mean, I know there's storageState, but it just seems to read and put in arrays.

[dgozman]

@naknode It seems like you want to modify localStorage from your script. Could you please elaborate on the usecase? Meanwhile, using evaluate is what I would do, unless we introduce some kind of API for that. For the new API, we need to understand the usecases first though.

Just to confirm, after you use evaluate to set values in the local storage, does context.storageState() return you the values? This methods is primarily used for authentication purposes.

[djasnowski]

@naknode It seems like you want to modify localStorage from your script. Could you please elaborate on the usecase? Meanwhile, using evaluate is what I would do, unless we introduce some kind of API for that. For the new API, we need to understand the usecases first though.

Just to confirm, after you use evaluate to set values in the local storage, does context.storageState() return you the values? This methods is primarily used for authentication purposes.

Sure. I have a localStorage that needs to change (permission-wise) and I'd like to modify it so I can test permissions on the page.

[chambo-e]

Hello, we have approximately the same use case

We'd like to inject a pre-existing StorageState to set localStorage values into an existing BrowserContext

I wonder if it would be possible to expose this function in the client side

[oscargullberg]

We also had to inject some localStorage values into the browser context before tests.
I ended up doing this in globalSetup as an ugly workaround:

  const storageState = await page.context().storageState();
  const customStorageState = { ...storageState };
  customStorageState.origins = [
    {
      origin: "https://staging.some-site.com",
      localStorage: [{ name: "@cookieConsent", value: "1" }],
    },
  ];
  await fsPromises.writeFile("state.json", JSON.stringify(customStorageState));

🤷‍♂️

[sergioariveros]

Same here, we also need to inject some key/values in the localStorage, our case is because we are enabling multiple mocks from the localStorage to test specific scenarios, it would be nice if we can have something like localStorage.setItem("key", "value"); to edit and enter new data

[mindplay-dk]

Well, cookies() has an addCookies() counterpart - it seems like storageState() ought to have an addStorageState() counterpart?

But it looks like the intended workflow is to use contexts - and inject cookies and storage at context creation time:

https://playwright.dev/docs/api/class-browser#browser-new-context-option-storage-state

The guide also explains how to "reuse authentication state", meaning cookies and storage:

https://playwright.dev/docs/auth/#reuse-authentication-state

(I don't like the example, which relies on disk storage - but looks like it will also accept a data structure like the one returned by storageState(), so you probably don't actually need to use a file here.)

(And support for sessionStorage is missing on both ends, but that's a separate issue.)

[o-lagatta]

Somehow Playwright during the execution is not getting the localStorage because is executing before the values are even set by the web application. So from my end after running the authentication, localStorage is empty, but if I check in Chromium the data is there. My understanding is that needs some delay before it reads the localStorage ?

`(async () => {
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();

await page.goto('http://localhost:4200');

await page.fill('[name="loginfmt"]', 'email@email.com');
await page.click('[type="submit"]');

await page.fill('input[type="password"]', 'password');
await page.click('[type="submit"]');

await page.click('text=No');

// (checking the application listing button - I know now I am logged In)
await page.waitForSelector('.button.header__link');

console.log('reading the local storage');
// get the data from localstorage
await page.evaluate(() => {
const returner = {};
// Local storage is empty, seems the execution runs before the actual values are set in the page localStorage
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
console.log('key', key);
console.log('getItem', localStorage.getItem(key));
returner[key] = JSON.stringify(localStorage.getItem(key));
}
return returner;
});

// tried again but still empty
const localStorage = await page.evaluate(() =>
JSON.stringify(window.localStorage)
);

console.log('localStorageVariable', localStorage);
})();
`