DEV Community

Styrow.dev
Styrow.dev

Posted on Originally published at styrow.dev

How do you efficiently manage authenticated user sessions across multiple Playwright tests to optimize test execution ti

#testing #automation #programming #softwaredevelopment

🔥 Playwright Pro Tip: Stop repeating logins in your E2E tests!
Learn how to achieve lightning-fast execution and perfect isolation by mastering session management.

📌 Problem Statement
❌ Repetitive logins in Playwright E2E tests are a major performance bottleneck, wasting valuable execution time.
❌ Re-authenticating for every test also increases flakiness and complicates test maintenance.
• The core challenge: How do we reuse an authenticated session without sacrificing test isolation?

💡 Solution & Code Walkthrough
✅ Playwright's storageState feature is your answer. It captures browser context (cookies, local storage, session storage) and lets you reuse it.
• This allows a one-time login in a global setup, then applies the saved state to all subsequent tests.

// global-setup.ts - Runs ONCE before all tests
import { chromium, FullConfig } from '@playwright/test';
const AUTH_FILE = 'playwright/.auth/user.json'; // Path to save state

async function globalSetup(config: FullConfig) {
  const { baseURL } = config.projects[0].use; // Get baseURL from config
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto(`${baseURL}/login`);
  await page.locator('#username').fill('your_username');
  await page.locator('#password').fill('your_password');
  await page.locator('button[type="submit"]').click();

  // Wait for post-login navigation, e.g., to dashboard
  await page.waitForURL(`${baseURL}/dashboard`);

  // Save authentication state
  await page.context().storageState({ path: AUTH_FILE });
  await browser.close();
}
export default globalSetup;
Enter fullscreen mode Exit fullscreen mode 
// playwright.config.ts - Configure to use the saved state
import { defineConfig } from '@playwright/test';
// Ensure AUTH_FILE path matches global-setup.ts
const AUTH_FILE = 'playwright/.auth/user.json'; 

export default defineConfig({
  globalSetup: require.resolve('./global-setup'), // Link setup file
  use: {
    // For ALL tests, load the saved state
    storageState: AUTH_FILE,
  },
});
Enter fullscreen mode Exit fullscreen mode

🔑 Key Takeaways
• Performance Boost: Eliminate redundant login steps from individual tests, drastically reducing execution time.
• Improved Reliability: Decouple login logic from test steps, making tests less brittle and easier to maintain.
• Test Isolation: Each test still gets a clean context with the pre-authenticated state, preventing side effects.
• Simplicity: A few lines of config transform your entire E2E suite's efficiency.

❓ Quick Summary Q&A
Q: What is storageState in Playwright?
A: It's a Playwright feature to capture and reuse the browser's session state (cookies, local storage, etc.) across tests.
Q: Why use globalSetup for authentication?
A: It runs once before all tests, allowing you to perform login and save storageState efficiently, preventing per-test logins.

TAGS: playwright, e2e testing, test automation, typescript, performance testing, session management
────────────────────────────────────────
────────────────────────────────────────

📲 𝐅𝐑𝐄𝐄 𝐌𝐎𝐁𝐈𝐋𝐄 𝐀𝐏𝐏 — 𝟔𝟎𝟎+ 𝐒𝐃𝐄𝐓 𝐐&𝐀𝐬
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_20260918

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

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

Top comments (0)