DEV Community

Custodia-Admin
Custodia-Admin

Posted on • Originally published at pagebolt.dev

How to capture screenshots of authenticated pages (login-required content)

How to capture screenshots of authenticated pages (login-required content)

Need to screenshot a dashboard, financial report, or paywalled page? The challenge is that Puppeteer and most screenshot APIs can't handle login flows—they need cookies, session management, or the ability to fill forms programmatically.

PageBolt's run_sequence endpoint solves this. It lets you automate a multi-step browser workflow: navigate → login → capture. All in one request.

The problem

Your dashboard is behind a login wall. You want to:

  • Generate usage reports with screenshots
  • Test that protected pages render correctly
  • Capture analytics dashboards for reports
  • Visually verify paywalled content

Most screenshot APIs fail here because they don't support form filling or session persistence.

The solution: PageBolt sequences

The run_sequence endpoint executes a series of browser actions in a single session, maintaining cookies and auth state between steps.

Code example

const PAGEBOLT_API_KEY = 'YOUR_API_KEY';

async function captureAuthenticatedPage() {
  const response = await fetch('https://pagebolt.dev/api/v1/run_sequence', {
    method: 'POST',
    headers: {
      'x-api-key': PAGEBOLT_API_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      steps: [
        {
          action: 'navigate',
          url: 'https://app.example.com/login'
        },
        {
          action: 'fill',
          selector: 'input[name="email"]',
          value: 'user@example.com'
        },
        {
          action: 'fill',
          selector: 'input[name="password"]',
          value: 'secure_password_123'
        },
        {
          action: 'click',
          selector: 'button[type="submit"]'
        },
        {
          action: 'wait',
          ms: 2000 // Wait for page to load
        },
        {
          action: 'navigate',
          url: 'https://app.example.com/dashboard'
        },
        {
          action: 'screenshot',
          name: 'dashboard',
          fullPage: true
        }
      ]
    })
  });

  const result = await response.json();
  console.log('Screenshot captured:', result.outputs[0].screenshot);
}

captureAuthenticatedPage();
Enter fullscreen mode Exit fullscreen mode

What's happening

  1. Navigate to login — Browser lands on your login page
  2. Fill credentials — CSS selectors target email/password inputs, values are entered
  3. Submit form — Click the login button
  4. Wait for redirect — Pause 2 seconds for auth to complete and page to load
  5. Navigate to target page — Go to the dashboard/report URL
  6. Capture screenshot — PageBolt returns the full-page screenshot as base64 or file

The entire session persists—cookies set during login remain active through the final screenshot.

Real-world use cases

Usage reports: Capture your Stripe dashboard, stripe down, or product analytics weekly and email them as PDFs.

// After running sequence and getting screenshot:
const pdfResponse = await fetch('https://pagebolt.dev/api/v1/generate_pdf', {
  method: 'POST',
  headers: { 'x-api-key': PAGEBOLT_API_KEY },
  body: JSON.stringify({
    html: `<img src="${screenshotDataUri}" width="100%" />`,
    format: 'A4'
  })
});
Enter fullscreen mode Exit fullscreen mode

Visual regression testing: Screenshot authenticated pages in your CI/CD to detect layout breaks on protected pages.

Snapshot reports: Auto-generate visual snapshots of client dashboards for quarterly business reviews.

Pro tips

  • Use environment variables for credentials—never hardcode passwords
  • Add waits strategically — After form submission, wait for the page to load (2-3 seconds is usually safe)
  • Test selectors locally — Use browser DevTools to find the correct input[name="..."] selectors before building your sequence
  • Handle multi-step auth — If your app has 2FA, use additional fill steps for the OTP
  • Reuse sessions — Multiple screenshots in one session share the same auth context, so you can capture 5 pages with one login

Rate limits & costs

Each run_sequence call costs 1 API request per screenshot output. Login sequences complete in 3-5 seconds total, so you can batch dozens of authenticated page captures efficiently.

Next steps

Try it free: 100 requests/month, no credit card. Get started →


Want to screenshot a different kind of protected content? Check the docs → or reach out →

Top comments (0)