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();
What's happening
- Navigate to login — Browser lands on your login page
- Fill credentials — CSS selectors target email/password inputs, values are entered
- Submit form — Click the login button
- Wait for redirect — Pause 2 seconds for auth to complete and page to load
- Navigate to target page — Go to the dashboard/report URL
- 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'
})
});
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
fillsteps 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)