Sharing Session Storage in Playwright for .NET

Our previous post on sharing authentication in Playwright tests covered cookies and local storage. However, you might find that your single sign-on (SSO) authentication token is stored in session storage. Let’s take a look at how we can use session storage in our Playwright tests.

Note: This blog post was written with reference to Microsoft.Playwright.NUnit version 1.43.

Deciphering Their Code Snippet

In the guidance from Playwright, they share the code snippets in one code fence. This means you need to pay attention to the code blocks and know where that separation lies - and decipher what’s going on.

This is the snippet of code they gave us:

// Get session storage and store as env variable
var sessionStorage = await page.EvaluateAsync<string>("() => JSON.stringify(sessionStorage)");
Environment.SetEnvironmentVariable("SESSION_STORAGE", sessionStorage);

// Set session storage in a new context
var loadedSessionStorage = Environment.GetEnvironmentVariable("SESSION_STORAGE");
await context.AddInitScriptAsync(@"(storage => {
    if (window.location.hostname === 'example.com') {
      const entries = JSON.parse(storage);
      for (const [key, value] of Object.entries(entries)) {
        window.sessionStorage.setItem(key, value);
      }
    }
  })('" + loadedSessionStorage + "')");

Let’s break this down further.

General Plan

This code is actually a mix of C# and JavaScript. The activity of gathering the session storage and saving the session storage is done by the JavaScript. The session storage data is stored on the JavaScript side in a variable named sessionStorage and in an environment variable named SESSION_STORAGE, which could then be accessed by the C# side.

Get Session Storage

The session storage data is stored in the sessionStorage variable, per HTML5’s Web Storage API. In order to get the values out of session storage in a way that makes sense for C#, use JavaScript’s JSON.stringify() to convert the sessionStorage into a JSON string. Then, store the data in an environment variable.

// Get session storage and store as env variable
var sessionStorage = await page.EvaluateAsync<string>("() => JSON.stringify(sessionStorage)");
Environment.SetEnvironmentVariable("SESSION_STORAGE", sessionStorage);

Use this code snippet wherever you need to get the session storage for your tests. For example, if you are running tests that are testing authenticated pages behind SSO, you would need to get the session storage right after logging in to preserve the authentication tokens in session storage.

Set Session Storage

In this snippet, the code will pull the session storage from the environment variable and then load it into the Playwright browser’s session storage.

Make sure that the window.location.hostname is set to the domain name you’re expecting for session storage to belong to. That’s the only gotcha in this code.

// Set session storage in a new context
var loadedSessionStorage = Environment.GetEnvironmentVariable("SESSION_STORAGE");
await context.AddInitScriptAsync(@"(storage => {
    if (window.location.hostname === 'example.com') {
      const entries = JSON.parse(storage);
      for (const [key, value] of Object.entries(entries)) {
        window.sessionStorage.setItem(key, value);
      }
    }
  })('" + loadedSessionStorage + "')");

For those not familiar, the loadedSessionStorage in parentheses at the end of the script represents the value that gets passed in as storage in the first part of the JavaScript script.

Why would you need to write to session storage? If you are running tests for pages with a shared SSO token in session storage, then you may need to load the preserved SSO token into session storage for the Playwright tests.

Conclusion

In this post, we deciphered the scripts to use session storage in your Playwright for .NET tests. Get the session storage once you log in. Set the session storage for subsequent tests.

If you are getting started with Playwright for .NET, we have a couple on-demand webinars that may help you as well:

• Design Patterns for Testing - This includes the Page Object pattern for front-end testing.
• Testing Blazor with Playwright

If you are interested in having us train your devs on Playwright for .NET, contact us today!