How do you manage and inject browser cookies in Playwright to simulate pre-authenticated sessions or specific user state

🔥 Playwright Pro Tip:
Tired of slow, repetitive login flows in your E2E tests? Master Playwright cookie management for lightning-fast, pre-authenticated sessions!

📌 Problem Statement
Repetitive UI logins are test bottlenecks. They slow execution, introduce flakiness, and complicate test isolation. Modern test suites demand efficient ways to simulate specific user states or pre-authenticated sessions without burning cycles on UI interactions.

💡 Solution & Code Walkthrough
Playwright's storageState() API is your secret weapon. It allows you to capture an authenticated browser state (including cookies, local storage) once, then inject it into subsequent test contexts.

• Phase 1: Capture Authentication State
Perform login once, then save the entire session state to a file. This can be done in a global setup test.

// In global-setup.ts or a specific setup test file
test('setup: save auth state', async ({ page }) => { 
  await page.goto('https://www.example.com/login'); // Your login URL
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'password123');
  await page.click('#login');
  await page.waitForURL('/dashboard'); // Wait for successful redirect
  // Saves cookies & localStorage to a file for later reuse
  await page.context().storageState({ path: 'playwright-auth.json' }); 
});

• Phase 2: Inject Authentication State
Use the saved storageState in new test contexts to start pre-authenticated, skipping the login UI.

// In playwright.config.ts or at the top of your test file
test.use({ storageState: 'playwright-auth.json' }); // Auto-injects session state

test('access protected dashboard', async ({ page }) => {
  await page.goto('https://www.example.com/dashboard'); // Navigates directly as logged in
  await expect(page.locator('h1')).toHaveText('Welcome, testuser!'); 
});

🔑 Key Takeaways
• Faster Tests: Skip UI login, significantly reducing test duration.
• Increased Reliability: Eliminate flakiness often associated with login interactions.
• Isolated Sessions: Each test gets a clean, pre-authenticated context.
• Full State Management: storageState() captures and restores all session data (cookies, localStorage).

❓ Quick Summary Q&A
Q: Why use storageState() instead of just page.context().addCookies()?
A: storageState() provides a complete snapshot of the browser session (cookies, localStorage), ensuring a fully restored, pre-authenticated user state.

TAGS: playwright, testing, automation, e2e, cookies, sessionmanagement, typescript
────────────────────────────────────────
Ready to level up your testing skills? Download our app for more expert guides, interview prep, and coding challenges!
────────────────────────────────────────

📲 𝐅𝐑𝐄𝐄 𝐌𝐎𝐁𝐈𝐋𝐄 𝐀𝐏𝐏 — 𝟔𝟎𝟎+ 𝐒𝐃𝐄𝐓 𝐐&𝐀𝐬
Practice real-world interview scenarios offline on the free QA Automation & SDET Prep app:

🤖 𝐆𝐨𝐨𝐠𝐥𝐞 𝐏𝐥𝐚𝐲 (𝐀𝐧𝐝𝐫𝐨𝐢𝐝):
https://play.google.com/store/apps/details?id=com.app.seleniuminterviewquestions&referrer=utm_source%3Ddevto%26utm_medium%3Darticle%26utm_campaign%3Dselenium_20261020

🍎 𝐀𝐩𝐩 𝐒𝐭𝐨𝐫𝐞 (𝐢𝐎𝐒):
https://apps.apple.com/app/id6786760948?pt=128640464&ct=devto_selenium_20261020&mt=8

────────────────────────────────────────
────────────────────────────────────────