I recently added a feature to the Grouparoo site that is using sessionStorage
to send analytics data. Being that it's an important feature, we should write test(s) to cover the use case(s), right?
Okay, fine. Let's do it!
This website is a Next.js application that uses Jest as the test runner and Selenium WebDriver for integration test help.
What I wanted to do with Jest and Selenium was to read from sessionStorage
after visiting a series of pages. After a bit of perusing, I finally uncovered a (goofy) way to achieve what I wanted.
We can use the executeScript
method to run a JavaScript expression and capture the result. Our test looks like this:
declare var browser: any;
async function getSessionItem(key) {
return await browser.executeScript(
`return window.sessionStorage.getItem("${key}");`
);
}
test("stores page history in the session data", async () => {
await browser.get(url + `/docs/config`);
expect(await getSessionItem("prevPath")).toBe("null");
expect(await getSessionItem("currentPath")).toBe("/docs/config");
await browser.get(url + `/meet`);
expect(await getSessionItem("prevPath")).toBe("/docs/config");
expect(await getSessionItem("currentPath")).toBe("/meet");
});
Here are a few of the key items to note:
- You must
return
the JavaScript expression or you'll end up withundefined
. - It's a much cleaner approach to run tests as
async
functions so you can useawait
to retrieve the result of the script, rather than ending up in a nightmarish Promise chain. -
browser
is often referred to asdriver
in other documentation and implementations. This comes from the library we're using to connect Jest and Selenium.
This now works like a charm! You could take a similar approach if you wanted to read from any other JavaScript object, including localStorage
.
Top comments (0)