Outdated 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 matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallTo capture an Okta-protected page, complete the application’s normal sign-in flow in Playwright, verify that the app is authenticated, navigate to the target page, and take the screenshot. For repeat runs, save and reuse Playwright’s browser storage state—but treat that file like a credential.
Before you start
Use an account authorized to access the application and its target page. Open the application through its normal sign-in route rather than assuming that every organization uses the same login form. Okta supports a hosted sign-in flow that redirects users to Okta and back to the app, as well as an embedded widget that appears within the application. Okta recommends the hosted widget for basic use cases. Okta Sign-In Widget documentation
As an Amazon Associate I earn from qualifying purchases.
Sign-in can require MFA, authenticator enrollment, or other verification depending on the app and organization policy. Complete the permitted steps; do not attempt to bypass MFA, CAPTCHA, or access controls. Okta MFA documentation
Capture the page in one Playwright run
The example below uses Playwright’s JavaScript API. Replace the application and target URLs, and choose a stable selector that is visible only after sign-in. The selector shown is an example: use a heading, account control, or other element that actually identifies the authenticated page in your app.
#1 Best Overall
- Install Playwright: run
npm init -y, thennpm install -D playwrightandnpx playwright install chromium. - Save this as
capture.mjs:
import { chromium } from 'playwright';
const appUrl = 'https://app.example.com/';
const targetUrl = 'https://app.example.com/reports';
const browser = await chromium.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();
try {
await page.goto(appUrl);
// Complete the real Okta sign-in flow in the browser, including any
// required MFA or enrollment. Do not assume a fixed form or redirect.
await page.pause();
// Replace this with an authenticated-only signal from your application.
await page.getByRole('heading', { name: 'Dashboard' }).waitFor();
await page.goto(targetUrl);
await page.getByRole('heading', { name: 'Reports' }).waitFor();
await page.screenshot({ path: 'capture.png', fullPage: true });
} finally {
await browser.close();
}Run it with node capture.mjs. Because the browser is launched with headless: false, you can complete interactive sign-in and any policy-required verification. page.pause() opens Playwright Inspector when running in supported local development setups; alternatively, remove that line and complete the flow manually while the browser is open. The important condition is that the authenticated signal succeeds before the protected route is captured.
For automated runs, replace the interactive pause with an approved way to provide valid authentication state, such as a saved state file described below. MFA and other requirements remain governed by your organization’s policies.
Verify authentication before capturing
A successful click on a sign-in button does not prove that authentication finished. Okta may redirect back to the application, or require another verification or enrollment step. Playwright’s authentication guidance recommends waiting for the final URL or checking for a visible authenticated UI element. Pick a signal that cannot appear on the login screen, then navigate to the target and wait for its content before taking the screenshot. Playwright authentication guidance
Recommended Free Tools
If the application’s final redirect URL is stable, you can wait for it with await page.waitForURL('**/dashboard');. If URL patterns vary or the app loads content after the redirect, prefer a stable authenticated-only element. Use the target page’s own heading or another meaningful element to avoid capturing a partially loaded screen.
Reuse a successful login with storage state
For repeated captures, save the authenticated browser context after sign-in has completed and been verified. Playwright storage state can include cookies and local storage, and the BrowserContext API documents options for additional state such as IndexedDB. BrowserContext API
Save state after a successful login
After the authenticated signal in the first script, add:
await context.storageState({ path: 'playwright/.auth/user.json' });Create the parent directory before running the script if it does not exist. To keep secrets out of version control, add the auth directory to .gitignore, for example:
playwright/.auth/Load state in a later capture
Once you have created and verified the state file, initialize a new context from it:
const context = await browser.newContext({
storageState: 'playwright/.auth/user.json'
});Then open the target route, wait for the authenticated UI signal, and take the screenshot as in the first example. State can expire, so be prepared to repeat the authorized sign-in and refresh the file when a later run returns to the login page.
When ordinary storage state is not enough
- Session storage: it is not included in the ordinary storage-state file. Playwright’s authentication guide describes a separate save-and-restore approach for it. Playwright authentication guidance
- IndexedDB: if your app stores authentication data there, check the installed Playwright version’s BrowserContext API for the
indexedDBstorage-state option. BrowserContext API - Application-specific state: confirm the state is valid for the app origin and the account used for the capture; a file from a different app or expired session will not establish access.
Choose the right sign-in workflow
| Workflow | Best for | What to account for |
|---|---|---|
| Interactive UI sign-in | Initial setup, occasional captures, or flows requiring interactive verification | Complete all policy-required MFA or enrollment in the current run, then verify the authenticated app state. |
| Saved-state reuse | Repeated captures after an authorized login has succeeded | State may expire; protect the file and refresh it when authentication no longer works. |
The Okta widget may be hosted on an Okta domain or embedded in the app. That changes where the sign-in interface appears, not the basic Playwright requirement: complete the real flow and confirm the app has reached an authenticated state before capturing. Okta Sign-In Widget documentation
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot login-page screenshots and failed captures
The screenshot shows the Okta login page
- Check that you started at the intended application URL and that the sign-in flow completed all required verification steps.
- Wait for the app’s final redirect or a stable authenticated-only element; do not use a completed button click as the success condition.
- If using saved state, confirm it belongs to the application origin and has not expired.
The flow pauses or asks for another step
MFA, enrollment, and additional verification can depend on the app and organization policy. Complete the allowed step interactively or ask the administrator for an approved test setup. Okta’s Authentication API documentation describes policy-dependent behavior. Okta Authentication API
The app is still loading when the screenshot is taken
Wait for a target-page element that appears only when the content is ready. A redirect completing does not necessarily mean that all application content has rendered; use the app’s actual stable UI as the readiness check.
Restored state does not authenticate the app
- Sign in again and save a fresh state after verifying the app is authenticated.
- Check whether the application relies on session storage, which ordinary storage state does not capture, or IndexedDB, for which Playwright documents an option.
- Make sure the state file is readable by the run and belongs to the correct application origin.
Protect the saved state
Playwright warns that saved authentication state may contain cookies and headers capable of impersonating the account. Keep it out of source control, restrict access to it, and use a dedicated authorized test account where appropriate. Playwright authentication guidance
For a screenshot task, prefer the user-facing application flow over directly calling Okta’s Authentication API. Okta describes its Sign-In Widget as the easier option for basic use cases, while authentication behavior can depend on policy and public-application rate limits. Okta Sign-In Widget documentation · Okta Authentication API
Or skip the browser setup
ScreenshotNeo can capture pages through a single request. It does not provide an Okta login flow: use it only when the page is accessible to its request, for example through an authorized public or signed URL. It cannot replace completing an interactive Okta sign-in or bypassing access controls.
cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpReplace https://stripe.com with the page URL you are authorized to capture. See the ScreenshotNeo API documentation for request options.
ScreenshotNeo 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 use screenshot tools, 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 free for 1,000 screenshots a month with no card.
Frequently Asked Questions
Can Playwright complete an Okta login that requires MFA?
Yes, when you complete the verification required by your organization’s policy through the authorized sign-in flow. Do not bypass MFA or other access controls.
Why does saved Playwright state stop working?
Authentication state can expire, and some applications use session storage or IndexedDB in addition to the state ordinarily saved. Reauthenticate when needed and account for the app’s storage method.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteQuick 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.
