Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Argos does not supply your website’s login cookie. Authenticate the Playwright browser first—preferably by saving and reusing Playwright’s authenticated browser state—then call Argos’s screenshot helper with that authenticated page. For a known test cookie, add it to the browser context before navigating to the protected URL.
Choose the right way to authenticate Playwright
Use storageState when a normal login flow creates the session. It saves supported browser authentication state, including cookies and local storage, so the screenshot test can restore it. Use browserContext.addCookies() when you have a legitimate, known cookie value and the application’s cookie scope and attributes are known.
| Approach | Best for | What it carries | What to check |
|---|---|---|---|
storageState |
A session created by logging in through the application | Cookies and supported storage, including local storage and IndexedDB | Regenerate expired state; protect the file as a credential. Session storage needs special handling. |
addCookies() |
A known test cookie supplied by a secure test secret | The cookie or cookies you explicitly add | Use the correct URL or domain and path, expiry, and security attributes. |
Recommended: save login-created state and reuse it
Set up an authentication project that completes the application’s login flow, waits for the authenticated page, and writes browser state to a file. Then configure the project that captures screenshots to load that file. Playwright’s project dependency pattern runs setup before dependent tests.
- Keep the state file out of version control. Add the auth directory to
.gitignore, and generate the file during CI or handle it using protected secrets or artifacts appropriate to your environment. - Log in in a setup test and save state. Replace the example URL and login steps with your app’s real flow:
import { test as setup } from "@playwright/test";
setup("authenticate", async ({ page }) => {
await page.goto("https://staging.example.com/login");
// Complete the application's real login flow here.
await page.waitForURL("https://staging.example.com/");
await page.context().storageState({ path: "playwright/.auth/user.json" });
});- Make the screenshot project depend on setup and load its state. In
playwright.config.ts, configure project names and paths to match your tests:
import { defineConfig } from "@playwright/test";
export default defineConfig({
projects: [
{
name: "setup",
testMatch: /.*.setup.ts/,
},
{
name: "screenshots",
dependencies: ["setup"],
use: {
storageState: "playwright/.auth/user.json",
},
},
],
});The resulting state can expire, so refresh it when the app invalidates the session or CI begins showing the login page. Playwright warns that “The browser state file may contain sensitive cookies and headers that could be used to impersonate you or your test account.”
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
Alternative: inject a known cookie
Use context.addCookies() before opening the protected page. A cookie must have a name and value and either a URL or both a domain and path. Optional attributes include expiry, httpOnly, secure, and sameSite. Set these to match the application; do not guess the cookie’s scope.
import { test } from "@playwright/test";
import { argosScreenshot } from "@argos-ci/playwright";
test("capture authenticated account page", async ({ page }) => {
await page.context().addCookies([
{
name: process.env.TEST_COOKIE_NAME!,
value: process.env.TEST_COOKIE_VALUE!,
url: "https://staging.example.com",
httpOnly: true,
secure: true,
sameSite: "Lax",
},
]);
await page.goto("https://staging.example.com/account");
await argosScreenshot(page, "account");
});This is illustrative: use your actual hostname, cookie attributes, and secure secret source. Do not print cookie values in logs. Prefer a dedicated test account and renew expired sessions rather than assuming a saved value remains valid.
Rank #2
- Used Book in Good Condition
Capture the authenticated page with Argos
Once Playwright has valid application authentication, Argos’s Playwright helper captures the supplied page. The reporter handles upload in CI; it does not log in to the application or create its authentication cookie.
import { test } from "@playwright/test";
import { argosScreenshot } from "@argos-ci/playwright";
test("capture authenticated account page", async ({ page }) => {
// The project or fixture must already have loaded valid auth state.
await page.goto("https://staging.example.com/account");
await argosScreenshot(page, "account");
});Argos’s quickstart says screenshots are written to ./screenshots by default and recommends ignoring that output directory in version control. Its CI upload uses ARGOS_TOKEN; the quickstart also describes GitHub Actions OIDC or tokenless authentication. That upload authorization is separate from the application cookie in the browser. See the Argos Playwright documentation and Argos quickstart.
Rank #3
Or skip the browser setup
If your goal is a screenshot rather than an authenticated CI visual test, ScreenshotNeo offers a one-request screenshot API. For example, this cURL request captures a public URL as WebP:
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 options. ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. It also provides an MCP server for AI agents to take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
Sign up for ScreenshotNeo free: 1,000 screenshots a month, no card required.
Troubleshooting authentication and captures
The screenshot shows the login page
- Confirm the screenshot project uses the intended
storageStatepath, or that cookie injection runs before navigation. - For saved state, ensure the setup project completed before the dependent screenshot test.
- Check whether the session expired or the app requires storage beyond the cookie you injected.
The injected cookie is ignored
- Check that its URL or domain and path match the protected site, and that it has not expired.
- Match the app’s actual
secure,httpOnly, andsameSiterequirements. - Verify whether the app relies on local storage, IndexedDB, or session storage in addition to that cookie. A manually injected cookie cannot recreate other login state.
The screenshot is saved but does not appear in Argos
- Check the Argos reporter and CI upload configuration, including the Argos upload credential or configured GitHub Actions authentication.
- Keep the upload token separate from the application’s login cookie: each serves a different purpose.
- Check the output directory and repository ignore settings if you are looking for local screenshots; the Argos quickstart describes
./screenshotsas the default output location.
The test uses Cypress, not Playwright
Do not use Playwright’s storageState or addCookies() APIs in Cypress. Cypress documents cy.setCookie() for a known cookie and cy.session() for caching and restoring login-created cookies and web storage. Its Argos integration uses Cypress task registration and cy.argosScreenshot(). See the Cypress setCookie documentation, Cypress session documentation, and Argos Cypress documentation.
Frequently Asked Questions
Can Argos CI accept a login cookie directly?
No. Establish authentication in the browser context used by Playwright; Argos captures that page and handles screenshot upload.
Can I reuse state that includes session storage?
Playwright’s reusable browser state does not automatically capture session storage; use Playwright’s documented special handling if your app depends on it.
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.
