Rayrun
← Back to Discord Forum

How to fill session storage

Hi 👋

My main goal was to handle random custom modal apparition but wasn't able to find a solution that would handle the popin apparition as it have a random delay/page apparition. So when the modal trigger, my test fails because they can't click anymore on the UI (there is the custom modal over the whole website).

So I try to use a fallback solution, as the modal script doesn't appear if there is modal_appeared: true in the sessionStorage.

I failed to implement it following the storageState method / dependencies. So now I'm at the point where I'm just trying to implement it as simple as it could be --> programmatically fill the sessionStorage on a specific test:

test("Test 1", async ({ page, context }) => {
  await context.addInitScript((storage) => {
    window.sessionStorage.setItem('modal_appeared', 'true');
  });
}

But even this fail, when opening the page through the UI tools, sesssionStorage keeps getting empty. Not sure what I missed here

This thread is trying to answer question "How can I programmatically fill the sessionStorage to prevent a modal from appearing during testing?"

2 replies

Can you instead disable the javascript or css that shows this modal?

Or better yet if you have control over the page you are testing, flight your test user or pass some query string argument to force enable/disable the modal to make your tests fully deterministics

Answer

Handling Random Modals with Session Storage in Playwright

You can handle random modals in your tests by saving and loading session storage using Playwright's API. Here's how you can do it:

Saving Session Storage

First, save the session storage as an environment variable in your test setup. Use page.evaluate() to execute JavaScript code on the page. Here's an example:

const sessionStorage = await page.evaluate(() => JSON.stringify(sessionStorage));
fs.writeFileSync('playwright/.auth/session.json', JSON.stringify(sessionStorage), 'utf-8');

This code gets the session storage from the current page and saves it as a JSON file named "session.json" in the ".auth" directory.

Loading Session Storage

Next, load the previously saved session storage in your specific test. Use fs.readFileSync() to do this:

const sessionStorage = JSON.parse(fs.readFileSync('playwright/.auth/session.json', 'utf-8'));
await context.addInitScript(storage => {
  if (window.location.hostname === 'ray.run') {
    for (const [key, value] of Object.entries(storage))
      window.sessionStorage.setItem(key, value);
  }
}, sessionStorage);

This code sets up a new context and its initial script to set each key-value pair from the loaded session storage into window.sessionStorage. Remember to replace 'ray.run' with your target domain.

By following these steps, you can handle any random modal that appears during testing.

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.