Percy CLI - logging in? executing in order?

462 Views Asked by At

2fold question:

  • how do I get Percy to execute snapshots -in order-?
  • can you help me troubleshoot my simple login script?

Trying to set up a basic beginnings of Percy CLI. Using a .js file as they detail here - https://docs.percy.io/docs/cli-snapshot (I have spent a lot of time with this document)

My website is mostly behind a login, so being able to login in Percy and continue snapshotting is of key importance. I have created the following execute script. It sends Percy to the login screen, puts in credentials and logs in, then takes a snapshot of /home (not accessible without login)

module.exports = [  {
    name: 'Login Page - Execute Login',
    url: 'http://localhost:3000/login',
    waitForSelector: '.login-form > button',
    waitForTimeout: 3000,
    execute() {
      document.querySelector('#email').value = '[email protected]';
      document.querySelector('#confirmPassword').value = 'password';
      document.querySelector('.login-form > button').click();
    }
  },
  {
    name: 'Home',
    url: 'http://localhost:3000/home',
    waitForTimeout: 2000
  }
]

When I input this script line by line into Chrome console, everything works as expected. When I run it in Percy CLI in the terminal, it executes without error:

9:50:~$ npx percy snapshot snapshots.js
[percy] Percy has started!
[percy] Snapshot taken: Home
[percy] Snapshot taken: Login Page - Execute Login
[percy] Finalized build #21: <URL removed for privacy>

But the screenshots I see show that the email and password have not been set as the values of the inputs. I do not understand how this would work in Chrome console but not in Percy Chromium headless browser.

Additionally, you'll notice that percy takes the 'Home' snapshot first, when it is listed second in the JS object. Is there any trick to getting snapshots taken in a certain order? A different format besides exporting as a JS module? Or, can I somehow create a login cookie for my website before running Percy so I don't have to worry about order? Is there some SDK I should be using to make these slightly more complex interactions beyond just going to a URL and snapshotting possible?

Thanks very very much.

0

There are 0 best solutions below