The answer depends on which “Loki” you mean. The documented JavaScript loki package is for capturing Storybook stories and comparing screenshots; its documentation does not establish that it can sign in to an arbitrary website. For a one-off capture, use an authorized browser session. For repeatable captures, Playwright can reuse saved browser storage state. If you meant a different Loki product, its documentation is needed for exact Loki-specific steps.
First identify the Loki product
The Loki package documentation describes a workflow for capturing screenshots and comparing them against reference files. That is a Storybook visual-testing use case, not documented general-purpose automation for logging in to websites. Do not assume its commands can authenticate to a regular site or capture any protected URL. If you have another Loki in mind, check that product’s documentation for support for browser login, stored sessions, and screenshots before following tool-specific instructions.
As an Amazon Associate I earn from qualifying purchases.
Capture a page once using an authorized browser session
- Sign in to the website through its normal login flow in a browser you are authorized to use. Complete any multifactor authentication or consent prompts yourself.
- Open the exact protected URL you need, rather than relying on a redirect or a link from a previous page.
- Wait until the private content is visibly loaded. If the page loads sections as you scroll, inspect the lower sections too.
- Use the browser or operating-system screenshot function to capture the visible area, or use a browser’s full-page capture option if you need content below the fold.
- Open the saved image and confirm it shows the intended signed-in page—not a login screen, redirect, loading state, or blank area.
This is the simplest route for an occasional capture. It requires a person to complete sign-in and does not create a reusable automation workflow.
Free tools Windows power users keep installed
One-click scans. No signup required.
Automate repeat captures with Playwright
Playwright documents a pattern for signing in once, saving browser storage state, and loading that state in a later browser context. The example below assumes the site permits this kind of session reuse and that you can identify a reliable element that appears only after sign-in. Some authentication systems—such as those tied to a particular device, certificate, or interactive challenge—may need a different approach. See Playwright authentication and Playwright screenshots.
#1 Best Overall
Install Playwright
In a new Node.js project, install Playwright and its browser:
npm install playwright
npx playwright install chromium
Rank #2
Sign in and save storage state
Create save-auth.mjs. Replace the example URL, selectors, and credentials handling with the site’s actual login flow. Avoid putting a real password directly in a script or committing it to source control; use environment variables or an approved secret store.
import { chromium } from 'playwright';
const browser = await chromium.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://example.com/login');
await page.getByLabel('Email').fill(process.env.SITE_USER);
await page.getByLabel('Password').fill(process.env.SITE_PASSWORD);
await page.getByRole('button', { name: 'Sign in' }).click();
// Replace this with a dependable marker shown only after successful sign-in.
await page.getByText('Account').waitFor({ state: 'visible' });
await context.storageState({ path: 'playwright/.auth/state.json' });
await browser.close();If the site requires MFA or another interactive step, complete it in the opened browser before saving state. This approach stores browser storage state; it should not be treated as a universal export of every credential or authentication mechanism.
Load the saved state and capture the page
Create capture.mjs. The example writes a full-page PNG; change fullPage to false for a viewport-only image.
import { chromium } from 'playwright';
const browser = await chromium.launch();
const context = await browser.newContext({
storageState: 'playwright/.auth/state.json',
});
const page = await context.newPage();
await page.goto('https://example.com/account/reports', {
waitUntil: 'domcontentloaded',
});
// Use a signed-in page marker, not a generic page-load event, as the check.
await page.getByText('Account').waitFor({ state: 'visible' });
await page.screenshot({ path: 'page.png', fullPage: true });
await browser.close();Run node save-auth.mjs to save the session, then node capture.mjs to create page.png. A successful navigation alone does not prove authentication succeeded: sites can redirect to a login page while still returning a valid page response.
Protect the saved state
The state file may contain cookies or other data that grants access to the account. Keep it out of public repositories, restrict who and what can read it, and delete or rotate it when it is no longer needed. The same care applies to screenshots: private pages can expose names, account details, or other sensitive information.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsChoose the method that fits the job
| Method | Best for | Sign-in and reuse | Output |
|---|---|---|---|
| Manual browser capture | A one-off screenshot | A person signs in each time; no automation state is required. | Capture the visible area or use a browser full-page option. |
| Playwright with saved storage state | Repeatable browser automation | Sign in and save state first; later runs load it. MFA or site-specific authentication may still require interaction. | Viewport or full-page screenshot, as configured. |
| An API offering HTTP Basic Authentication | Only a target site that actually uses HTTP Basic Authentication | The API’s Basic Auth option applies to that authentication mechanism, not automatically to a normal login form. | Depends on the API’s documented capture options. |
Why Basic Authentication is not a general login solution
Some capture APIs document HTTP Basic Authentication, in which credentials are sent through that protocol. That option is relevant only when the protected site uses Basic Authentication. It does not establish that the service can operate a regular login form, complete MFA, or reuse an arbitrary browser session. Match the documented authentication method to the site instead of treating all login screens as equivalent. See Capture API documentation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Check the capture and troubleshoot failures
- The image shows a login screen: The session may not have been saved, may have expired, or may not be accepted in the new context. Sign in again, save fresh state, and wait for a signed-in-only marker before capturing.
- The page is blank or incomplete: Wait for a reliable content marker rather than relying only on navigation completion. If content appears on scroll, inspect or load the relevant sections before using full-page capture.
- MFA or a challenge blocks automation: Complete the step interactively where permitted, or use the site’s approved authentication method. Do not try to bypass access controls.
- The image includes the wrong page: Verify the final URL and inspect the saved file. A redirect can lead to a valid login page without producing a browser error.
- A capture API rejects credentials: Confirm that the site uses HTTP Basic Authentication and that the API’s documented option matches it. A regular username-and-password form is a different flow.
- The screenshot exposes private details: Limit capture and sharing to information you are authorized to access; review the image before sending or publishing it.
Or skip the browser setup
ScreenshotNeo is a screenshot API and MCP server. One GET request can return a PNG, JPEG, WebP, or PDF. Its cleanup accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients.
For a page that ScreenshotNeo can access, make a one-call capture with cURL (replace the target URL and use your API key):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for authentication and capture parameters. ScreenshotNeo’s stated API details do not establish that it can complete a site’s regular login form or reuse Playwright storage state; confirm the target site’s supported authentication before relying on an authenticated capture.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchThe free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo’s free plan.
Frequently Asked Questions
Does the Loki Storybook package capture arbitrary logged-in websites?
Its documentation describes Storybook screenshot capture and comparison, not general authenticated website capture.
Can I reuse Playwright storage state for every kind of login?
No. It is a documented browser-state reuse pattern, but it does not guarantee support for every credential or authentication mechanism.
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.
Recommended Free Tools
