DEV Community

Ondrej Machala
Ondrej Machala

Posted on

Screenshots Behind Login Shouldn't Require a DevOps Engineer

#webdev #documentation #automation #devops

A technical writer on our team needed screenshots of the admin dashboard. The dashboard is behind SSO login (Okta).

She asked me to help. I wrote a Playwright script with the login flow. It broke after the next Okta update. I fixed it. Then IT enabled MFA. Script broke again. I added TOTP handling. Then they rotated the client secret.

Three weeks of back-and-forth for 6 screenshots.

The problem

Most screenshot automation tools assume you can script the login. But modern auth is designed to resist automation:

  • OAuth redirects across domains
  • CAPTCHA challenges
  • MFA (TOTP, push notifications, hardware keys)
  • SSO providers that change their UI regularly
  • Session cookies with short TTLs

You end up maintaining auth code that's more complex than the actual screenshot capture.

Just log in yourself

Heroshot opens a real browser:

npx heroshot config
Enter fullscreen mode Exit fullscreen mode

The technical writer logs in herself. Through Okta, with MFA, the whole thing. She does this every day anyway. Takes 15 seconds.

Then she clicks the elements she wants to screenshot. Heroshot saves:

  1. The screenshot config (which pages, which elements)
  2. The browser session, encrypted

Next time anyone runs npx heroshot, it restores the session. No login flow. If the session expires, she runs npx heroshot config --reset and logs in again.

For the CI pipeline

The session is encrypted with a generated key stored on your machine. To use it in CI:

# On your laptop
npx heroshot session-key
# Copy the key
Enter fullscreen mode Exit fullscreen mode 
# In GitHub Actions
env:
  HEROSHOT_SESSION_KEY: ${{ secrets.HEROSHOT_SESSION_KEY }}

steps:
  - run: npx heroshot
Enter fullscreen mode Exit fullscreen mode

That's it. CI decrypts the session and captures authenticated screenshots. No Okta credentials in CI. No login scripts. No DevOps engineer required.

Multiple accounts

Need screenshots from different user roles? Admin view, regular user view, read-only view?

Use separate config files:

# Log in as admin
npx heroshot config -c .heroshot/admin.json

# Log in as regular user
npx heroshot config -c .heroshot/user.json
Enter fullscreen mode Exit fullscreen mode

Each config has its own session. Capture both:

npx heroshot -c .heroshot/admin.json
npx heroshot -c .heroshot/user.json
Enter fullscreen mode Exit fullscreen mode

Who should take the screenshots?

The person who knows the product. That's usually not the DevOps engineer writing Playwright scripts. It's the technical writer, the product manager, or the designer.

With a visual picker, they don't need to know CSS selectors, Playwright APIs, or how OAuth works. They log in and click.

Top comments (0)