How do you test browser storage corruption in Playwright?

Question

QA Hacks Team · Accepted Answer

Testing browser storage "corruption" in Playwright primarily focuses on validating the application's graceful handling of malformed, unexpected, or excessively large data stored client-side, rather than physical disk corruption. The strategy involves manipulating storage states and observing application behavior.

Here’s a structured approach using Playwright:

1.  **Understanding "Corruption"**: This refers to:
    *   **Malformed JSON**: Storing invalid JSON strings where an object is expected.
    *   **Incorrect Data Types**: Storing a string where a number/boolean is expected.
    *   **Missing or Unexpected Keys**: Data structures lacking critical properties or containing irrelevant ones.
    *   **Storage Limit Exceeded**: Pushing `localStorage` or `sessionStorage` beyond its capacity.

2.  **Playwright Capabilities for Manipulation**:

*   **`browser.newContext({ storageState })`**: Ideal for pre-seeding `localStorage` and `sessionStorage` before a test run. We can construct a JSON file with intentionally corrupted data.
        ```javascript
        // corrupt-storage-state.json
        {
          "origins": [
            {
              "origin": "https://example.com",
              "localStorage": [
                { "name": "userSettings", "value": "{invalid: json}" },
                { "name": "preferences", "value": "corrupt_string" }
              ],
              "sessionStorage": []
            }
          ]
        }
        ```
        ```javascript
        import { test, expect } from '@playwright/test';

test('app handles malformed localStorage', async ({ browser }) => {
          const context = await browser.newContext({ storageState: 'corrupt-storage-state.json' });
          const page = await context.newPage();
          await page.goto('https://example.com');

// Assert app's graceful degradation or error message
          await expect(page.locator('.error-message')).toHaveText('Failed to load user settings');
          await expect(page.locator('.default-state-indicator')).toBeVisible();

await context.close();
        });
        ```
    *   **`page.evaluate()`**: Essential for dynamic injection during a test and for interacting with `IndexedDB`.
        *   **Injecting Malformed Data**:
            ```javascript
            await page.evaluate(() => {
              localStorage.setItem('userProfile', 'this is not valid json!');
              sessionStorage.setItem('tempData', '{"id": "abc", "status": undefined}'); // `undefined` serializes as "undefined"
            });
            await page.reload(); // App might re-evaluate storage on load
            ```
        *   **Exceeding Storage Limits**: Create a very large string.
            ```javascript
            const hugeString = 'a'.repeat(5 * 1024 * 1024); // 5MB
            await page.evaluate((data) => {
              try {
                localStorage.setItem('largePayload', data);
              } catch (e) {
                console.error('localStorage write failed:', e);
              }
            }, hugeString);
            // Assert app behavior when storage write fails or is truncated
            ```
        *   **IndexedDB Corruption**: IndexedDB is asynchronous and requires more complex `evaluate` calls. We can use it to insert non-spec compliant data or exceed transaction limits.
            ```javascript
            await page.evaluate(async () => {
              const request = indexedDB.open('myDB', 1);
              request.onupgradeneeded = (event) => {
                const db = event.target.result;
                db.createObjectStore('items', { keyPath: 'id' });
              };
              await new Promise(resolve => request.onsuccess = resolve);
              const db = request.result;
              const transaction = db.transaction(['items'], 'readwrite');
              const store = transaction.objectStore('items');
              // Intentionally store malformed data (e.g., non-serializable object if not handled by framework)
              store.add({ id: 1, data: new WeakMap() }); // WeakMap is not cloneable
              await new Promise((resolve, reject) => {
                transaction.oncomplete = resolve;
                transaction.onerror = reject;
              });
              db.close();
            });
            await page.reload();
            // Assert application handling of corrupted IndexedDB data upon retrieval
            ```

3.  **Assertion Strategy**:
    *   **UI Validation**: Check for specific error messages, fallback UI components, or absence of expected data.
    *   **Console Logs**: Listen for JavaScript errors (`page.on('console', msg => { ... })`) or network failures.
    *   **Network Activity**: Verify if corrupted data is being sent to backend APIs, which could cause server-side issues.
    *   **Application State**: Validate the internal state of the application after attempting to read the corrupted data.

4.  **Framework In

How do you test browser storage corruption in Playwright?

📋 Interview Context

Overview

Interview Question:

Expert Answer:

Speaking Blueprint (3-Minute Verbal Response):

Continue Learning: Up Next

How do you analyze defect leakage across releases?

How do you assess release readiness using quality metrics?

How do you audit production incidents using logs and metrics?