How can you leverage Playwright's capabilities to directly manipulate browser storage (Local Storage, Session Storage, a

🔥 Playwright Power-Up: Ditch Slow UIs!
How can you leverage Playwright to directly manipulate browser storage (Local Storage, Session Storage, Cookies) for efficient test setup and state verification?

📌 Problem Statement
Building robust end-to-end tests often involves cumbersome UI interactions just to get an application into a specific state. Waiting for login flows, setting preferences, or pre-filling forms via the UI can be slow, brittle, and significantly extend test execution times. This impacts feedback loops and CI/CD efficiency.

💡 Solution & Code Walkthrough
Playwright's page.evaluate() provides direct access to the browser's JavaScript context, enabling powerful manipulation of localStorage and sessionStorage. This capability bypasses UI, drastically speeding up test setup. While context.addCookies() handles cookies, page.evaluate() is key for scriptable storage access.

• page.evaluate() executes JavaScript within the page's context.
• Use localStorage.setItem() and sessionStorage.setItem() directly.
• Ideal for injecting preferences, feature flags, or authentication data.

import { test, expect } from '@playwright/test';

test('should set browser storage for efficient test setup', async ({ page }) => {
  await page.goto('https://www.example.com');

  // Set Local Storage and Session Storage items
  await page.evaluate(() => {
    localStorage.setItem('user_preference', 'dark_mode'); // Local Storage persists
    sessionStorage.setItem('temp_session_data', 'user_id_123'); // Session Storage (current tab)
  });

  // Verify Local Storage item
  const preference = await page.evaluate(() => localStorage.getItem('user_preference'));
  expect(preference).toBe('dark_mode');

  // Verify Session Storage item
  const sessionData = await page.evaluate(() => sessionStorage.getItem('temp_session_data'));
  expect(sessionData).toBe('user_id_123');

  // Reload confirms Local Storage persistence
  await page.reload();
  const reloadedPreference = await page.evaluate(() => localStorage.getItem('user_preference'));
  expect(reloadedPreference).toBe('dark_mode');
});

🔑 Key Takeaways
✅ Accelerate test execution by bypassing UI setup.
✅ Inject specific test data or application states programmatically.
✅ page.evaluate() is your go-to for localStorage and sessionStorage manipulation.
❌ Avoid over-reliance on UI for state management in tests when direct manipulation is possible.

❓ Quick Summary Q&A
• Q: Why manipulate browser storage directly in Playwright tests?
• A: To drastically reduce test setup time, inject specific data, and control application state without slow UI interactions.
• Q: Which Playwright method handles Local and Session Storage?
• A: page.evaluate() allows running JavaScript to interact with localStorage and sessionStorage.

TAGS: playwright, automation, testing, javascript, webdev, localstorage, sessionstorage, e2e

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

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

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

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