The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To monitor a page that requires login, use browser automation to sign in with an authorized test account, save its authenticated browser state securely, and reuse that state for scheduled screenshot checks. Capture the relevant page or element, compare it with a reviewed baseline, and treat differences as signals for investigation—not automatic proof of an outage.
Build an authenticated screenshot check with Playwright
Playwright supports reusable authentication state and screenshot comparisons. The example below uses Playwright Test: sign in once to create a storage-state file, then load that state in a visual test. Replace the example URLs, selectors, and credentials with values for your own application.
1. Install Playwright Test
In a Node.js project, install the test runner and its browser binaries:
npm init -y
npm install --save-dev @playwright/test
npx playwright install2. Create and protect the authenticated state
Save this as auth.setup.js. It performs the site’s normal login flow, verifies a signed-in marker, and writes state to playwright/.auth/user.json.
#1 Best Overall
- POWERFUL SECURITY KEY: The Security Key C NFC is the essential physical passkey for protecting your digital life from phishing attacks. It ensures only you can access your accounts.
- WORKS WITH 1000+ ACCOUNTS: Compatible with Google, Microsoft, and Apple. A single Security Key C NFC secures 100 of your favorite accounts, including email, password managers, and more.
- FAST & CONVENIENT LOGIN: Plug in your Security Key C NFC via USB-C and tap it, or tap it against your phone (NFC) to authenticate. No batteries, no internet connection, and no extra fees required.
- TRUSTED PASSKEY TECHNOLOGY: Uses the latest passkey standards (FIDO2/WebAuthn & FIDO U2F) but does not support One-Time Passwords. For complex needs, check out the YubiKey 5 Series.
- BUILT TO LAST: Made from tough, waterproof, and crush-resistant materials. Manufactured in Sweden and programmed in the USA with the highest security standards.
const { test: setup, expect } = require('@playwright/test');
const fs = require('node:fs');
const path = require('node:path');
const authFile = path.join(__dirname, 'playwright/.auth/user.json');
setup('authenticate', async ({ page }) => {
await page.goto('https://example.com/login');
await page.getByLabel('Email').fill(process.env.TEST_USERNAME);
await page.getByLabel('Password').fill(process.env.TEST_PASSWORD);
await page.getByRole('button', { name: 'Sign in' }).click();
// Use a stable marker that appears only after successful sign-in.
await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
fs.mkdirSync(path.dirname(authFile), { recursive: true });
await page.context().storageState({ path: authFile });
});Use a test account with only the permissions needed for monitoring. Authentication state can contain session cookies or headers that allow account access. Keep the file out of source control, restrict access in the monitoring environment, and regenerate it when the session expires. Playwright’s guidance explains reusing authentication state and its sensitivity.
3. Configure the setup and visual test
Create playwright.config.js so setup runs before the screenshot test. The ignoreHTTPSErrors option is intentionally omitted; do not suppress certificate errors unless you have a specific, approved test need.
Rank #2
- POWERFUL SECURITY KEY: The YubiKey 5C NFC is the most versatile physical passkey, protecting your digital life from phishing attacks. It ensures only you can access your accounts
- WORKS WITH 1000+ ACCOUNTS: Compatible with popular accounts like Google, Microsoft, and Apple. A single YubiKey 5C NFC secures 100+ of your favorite accounts, including email, password managers, and more
- FAST & CONVENIENT LOGIN: Plug in your YubiKey 5C NFC via USB and tap it, or tap it against your phone (NFC), to authenticate. No batteries, no internet connection, and no extra fees required
- MOST SECURE PASSKEY: Supports FIDO2/WebAuthn, FIDO U2F, Yubico OTP, OATH-TOTP/HOTP, Smart card (PIV), and OpenPGP. That means it’s versatile, working almost anywhere you need it
- PRIMARY & SPARE KEYS: Just like having a spare house key, we recommend buying two YubiKeys - one for daily use and one as a spare. That way you’ll never get locked out of your accounts
const { defineConfig } = require('@playwright/test');
module.exports = defineConfig({
testDir: './tests',
projects: [
{ name: 'setup', testMatch: /auth.setup.js/ },
{
name: 'visual',
dependencies: ['setup'],
use: {
baseURL: 'https://example.com',
storageState: 'playwright/.auth/user.json',
viewport: { width: 1440, height: 1000 }
}
}
]
});Then create tests/dashboard.spec.js:
const { test, expect } = require('@playwright/test');
test('dashboard matches the approved visual baseline', async ({ page }) => {
await page.goto('/dashboard');
// Fail clearly if the state expired or the app redirected to login.
await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
await expect(page.getByTestId('dashboard-ready')).toBeVisible();
await expect(page).toHaveScreenshot('dashboard.png', {
fullPage: true,
animations: 'disabled',
caret: 'hide'
});
});Run the test with npx playwright test. On the first approved run, generate a reference with npx playwright test --update-snapshots; inspect that image before accepting it as the baseline. Later runs compare against the stored expectation. Playwright screenshot assertions wait until two consecutive captures match before comparing, but they cannot determine whether a difference is desirable. See the screenshot assertion documentation and visual comparisons guidance.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesChoose the capture scope
- Viewport: omit
fullPageto capture the visible viewport, useful for a dashboard as users initially see it. - Full page: use
fullPage: trueto include content below the fold. Long pages can produce large images and may include sections that are not relevant to the check. - One component: capture a locator, such as
await expect(page.getByTestId('billing-summary')).toHaveScreenshot('billing-summary.png'), to reduce unrelated diffs.
Playwright documents page and element screenshots, including scope and constraints.
Rank #3
- POWERFUL SECURITY KEY: The YubiKey 5 NFC is the most versatile physical passkey, protecting your digital life from phishing attacks. It ensures only you can access your accounts
- WORKS WITH 1000+ ACCOUNTS: Compatible with popular accounts like Google, Microsoft, and Apple. A single YubiKey 5 NFC secures 100+ of your favorite accounts, including email, password managers, and more
- FAST & CONVENIENT LOGIN: Plug in your YubiKey 5 NFC via USB and tap it, or tap it against your phone (NFC), to authenticate. No batteries, no internet connection, and no extra fees required
- MOST SECURE PASSKEY: Supports FIDO2/WebAuthn, FIDO U2F, Yubico OTP, OATH-TOTP/HOTP, Smart card (PIV), and OpenPGP. That means it’s versatile, working almost anywhere you need it
- PRIMARY & SPARE KEYS: Just like having a spare house key, we recommend buying two YubiKeys - one for daily use and one as a spare. That way you’ll never get locked out of your accounts
Keep the comparison meaningful
Visual comparisons are sensitive to browser, operating system, fonts, viewport, rendering settings, and page content. Standardize the environment where practical; a baseline made on one host may differ on another even if the site did not meaningfully change. Playwright’s visual comparison guidance discusses baseline expectations and environmental consistency.
Reduce noise without hiding real changes
- Wait for a stable, page-specific ready marker instead of relying only on a fixed delay.
- Disable animations and hide the caret for captures where those effects create irrelevant differences.
- Mask or hide only known volatile areas, such as a timestamp or rotating avatar. Keep content that matters to the check visible.
- Use a stable test account and data where possible. Ads, live metrics, user images, and frequently changing records can generate diffs.
Playwright provides options such as animation handling and caret behavior for screenshot assertions. Do not mask an area simply because it changes: first decide whether that content is part of what you need to monitor. A screenshot diff is not, by itself, an outage diagnosis.
Rank #4
- POWERFUL SECURITY KEY: The Security Key NFC is the essential physical passkey for protecting your digital life from phishing attacks. It ensures only you can access your accounts.
- WORKS WITH 1000+ ACCOUNTS: Compatible with Google, Microsoft, and Apple. A single Security Key NFC secures 100 of your favorite accounts, including email, password managers, and more.
- FAST & CONVENIENT LOGIN: Plug in your Security Key NFC via USB-A and tap it, or tap it against your phone (NFC) to authenticate. No batteries, no internet connection, and no extra fees required.
- TRUSTED PASSKEY TECHNOLOGY: Uses the latest passkey standards (FIDO2/WebAuthn & FIDO U2F) but does not support One-Time Passwords. For complex needs, check out the YubiKey 5 Series.
- BUILT TO LAST: Made from tough, waterproof, and crush-resistant materials. Manufactured in Sweden and programmed in the USA with the highest security standards.
Run checks reliably and handle failures
Run the test through your existing CI or monitoring system at an interval that matches the page’s importance. The cited browser documentation explains capture and comparison, but does not prescribe a monitoring schedule, alert destination, or retention period. Configure those in your own operational system, and route failures to a person who can review the screenshot and test logs.
Free tools Windows power users keep installed
One-click scans. No signup required.
- Redirected to login or marker missing: the session may have expired, the login flow may have changed, or sign-in may have failed. Treat this as an authentication failure; rerun the authorized setup flow and confirm the signed-in marker before capturing.
- Test fails at MFA or interactive approval: do not try to bypass it. Coordinate an authorized test approach with the site owner, such as a suitable test account or documented authentication arrangement.
- Many diffs after moving runners or updating browsers: check whether the host, browser, viewport, or rendering settings changed. Re-establish a baseline only after reviewing the new environment and expected output.
- Intermittent screenshot differences: wait for a meaningful ready state, disable irrelevant animations, and isolate dynamic content only when it is outside the test’s purpose.
- Baseline update requested: inspect the new capture and approve the intended change before updating the reference. Automatically accepting every new image can erase the very regressions the check should detect.
For authenticated content, consider where rendering happens and who can access captured page data. BrowserStack Percy documents that it captures DOM state and assets and later re-renders them in Percy infrastructure; its discovery configuration describes authentication options such as headers, authorization, and cookies. Review its authentication and discovery setup and visual review workflow before sending protected page state to a hosted service. BrowserStack also explains cross-browser visual differences. Applitools documents a Playwright integration; verify the authenticated workflow and current terms for your use case.
Best Value
- Security Key : Protect your online accounts against unauthorized access by using FIDO2 and U2F authentication with T110. It's the world's most protective security key that works with windows, Mac OS, Linux as well as Chrome, Firefox, Edge and many other major browsers.
- Certified with the new FIDO2 standard, T110 provides the benefit of fast login and strong protection against phishing, account takeover as well as many other online attactks.
- Works with : Bank of America, Github, Google, Microsoft, DUO, Twitter, Facebook, Dropbox, Apple, ebay, BINANCE, mor and more.
- Fits USB-A port : Insert the T110 security key into the USB-A port of each service and log in conveniently with one touch
- For the driver download and user guide, please visit TrustKey Solutions Home support page.
Or skip the browser setup
For a one-call screenshot of a publicly accessible page, ScreenshotNeo offers a screenshot API. It does not replace the authenticated browser-state workflow above for private pages that require your signed-in session. The service accepts a URL and returns an image or PDF; see the ScreenshotNeo API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/dashboard -o shot.webpScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are not billed. Its MCP server lets AI agents take screenshots, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo, or sign up for 1,000 free screenshots a month with no card.
Frequently Asked Questions
How do I know whether a screenshot change is a real regression?
Review the changed image in context and check whether the affected element is meant to be stable. A visual difference alone cannot distinguish a defect from an intentional design or data change.
Can I use saved login state forever?
No. The site may expire a session or require authentication again; refresh the state through the site’s authorized login flow when needed.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
