localStorage authentication

[alanltr]

Hello, I am looking to set up Percy on an APP that requires token authentication. The token is stored directly in the localStorage. My problem is that currently all screenshots return the login page. Is it possible with Percy to inject a token in the localStorage when taking screenshots? thanks in advance

[wwilsman]

Hey @alanltr!

Which SDK are you using or how are you taking snapshots of your app? For most SDKs, you can set localStorage using your existing test framework API.

However, web storage objects like localStorage are not sent to the server with each request, and can only be accessed by client-side JavaScript APIs. If your app reads the token from the web storage data and uses it to authenticate requests, it is probably sending the token using a request header. Request headers can be sent per-snapshot with discovery.requestHeaders, or using the accompanying config file option.

[alanltr]

Hi @wwilsman!

Thank you for your answer.

I am using the percy snapshot SDK (https://docs.percy.io/docs/percy-snapshot). I created a snapshots.yml file, I specified the pages for which I want a screenshot and I run the command "yarn run percy snapshot snapshots.yml" to get my screenshots

In my application, in order to maintain the user's connection I put his token in the localStorage and it is by checking if a token is present or not that my user remains connected. I just wanted to know if it was possible to recreate this effect (put a token in the localStorage) with Percy?

I don't know if it's clear 😅 Thank you in advance

[wwilsman]

For the snapshot SDK, while there is no option to specify local storage values, you can instead provide a JavaScript function which will be executed on the page before the snapshot is taken:

# snapshots.yml
- name: My Snapshot
  url: "https://example.com"
  execute: |
    window.localStorage.setItem('my-item', 'item-value');

However, this will open the page first before setting the localStorage value. Looking into similar issues on project's such as Puppeteer, it appears this is a known limitation there as well. If you need the value to exist before the page is loaded, you have to reload the page. Perhaps something like this will do the trick:

  execute: |
    window.localStorage.setItem('my-item', 'item-value');
    window.location.reload();

Once the value is set for the domain, it should persist for other snapshots. However, snapshots are processed in parallel with a limited concurrency, so the first 5-10 snapshots may all run at the same time and you might need to create a small helper to do this for all snapshots. If you're familiar with JavaScript, you can use a .js file instead of a .yml file and pass an actual function to the execute option: https://docs.percy.io/docs/cli-snapshot#javascript

Or if you wanna stick with YAML, you can use anchors and references by adjusting your file slightly:
(No Percy docs for this yet, so I'll add an example here)

# snapshots.yml
references:
  checkLocalStorage: &checkLocalStorage | # this is an anchor
    if (!window.localStorage.getItem('my-item')) {
      window.localStorage.setItem('my-item', 'item-value');
      window.location.reload();
    }

snapshots:
- name: Snapshot 1
  url: "https://example.com/1"
  execute: *checkLocalStorage # this is a reference
- name: Snapshot 2
  url: "https://example.com/2"
  execute: *checkLocalStorage
- name: ...
  execute: *checkLocalStorage
- # ...etc.

I should also point out that the percy snapshot command isn't necessarily meant to be a full test framework in itself, although it can achieve quite a bit on its own. If you need to snapshot more and more application states and integrate more logic, it might make sense to choose another SDK that integrates with a real test framework (for example Cypress).