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?"
Related Ask AI answer for "How do I use Playwright's API to save and load session storage for handling a random modal in a specific test?".
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.
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.