# Create a new Playwright project (interactive setup wizard)
npm init playwright@latest

# Or add to an existing project
npm install --save-dev @playwright/test

# Install browsers (Chromium, Firefox, WebKit)
npx playwright install

# Install only specific browsers
npx playwright install chromium
npx playwright install chromium firefox

my-project/
├── tests/                      # Your test files go here
│   └── example.spec.ts
├── tests-examples/            # Example tests from Playwright
│   └── demo-todo-app.spec.ts
├── playwright.config.ts        # Main configuration file
├── package.json
└── .github/
    └── workflows/
        └── playwright.yml      # CI/CD workflow (GitHub Actions)

# Run all tests (headless by default)
npx playwright test

# Run with visible browser (headed mode)
npx playwright test --headed

# Run specific file
npx playwright test tests/login.spec.ts

# Run tests matching a title
npx playwright test -g "should login successfully"

# Run on specific browser
npx playwright test --project=chromium
npx playwright test --project=firefox

# Debug mode (opens Playwright Inspector)
npx playwright test --debug

# Open HTML test report
npx playwright show-report

code --install-extension ms-playwright.playwright

// 1. Import the test runner and assertion library
import { test, expect } from '@playwright/test';

// 2. A test file can have multiple test() blocks
// test() takes: (name, async function with { page })
test('user can log in successfully', async ({ page }) => {

  // 3. Navigate to a URL
  await page.goto('https://example.com/login');

  // 4. Locate elements (Playwright's recommended approach)
  await page.getByLabel('Email').fill('user@example.com');
  await page.getByLabel('Password').fill('secret123');

  // 5. Click a button by its accessible role + name
  await page.getByRole('button', { name: 'Sign in' }).click();

  // 6. Assert the result
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByText('Welcome back')).toBeVisible();
});

test('shows error with invalid credentials', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.getByLabel('Email').fill('bad@user.com');
  await page.getByLabel('Password').fill('wrong');
  await page.getByRole('button', { name: 'Sign in' }).click();

  await expect(page.getByRole('alert')).toContainText('Invalid credentials');
});

# Record your interactions and generate test code automatically
npx playwright codegen https://example.com

# Record and save to file
npx playwright codegen --target typescript -o tests/recorded.spec.ts https://example.com

# Record for a specific viewport (mobile)
npx playwright codegen --viewport-size="375,667" https://example.com

// ── getByRole ──────────────────────────────────────────────────
page.getByRole('button');                      // any button
page.getByRole('button', { name: 'Submit' });   // button with text "Submit"
page.getByRole('link', { name: 'Home' });       // <a> with text "Home"
page.getByRole('checkbox');                   // checkbox input
page.getByRole('heading', { name: 'Products' });// h1-h6 with text
page.getByRole('textbox', { name: 'Search' });  // input type=text
page.getByRole('listitem');                   // <li> elements
page.getByRole('row');                        // table rows

// ── getByLabel ─────────────────────────────────────────────────
page.getByLabel('Email address');             // <input> with <label>Email address</label>
page.getByLabel('Subscribe to newsletter');   // checkbox with label

// ── getByPlaceholder ───────────────────────────────────────────
// Use when there is no label — finds by placeholder attribute
page.getByPlaceholder('Search products...');
page.getByPlaceholder('Enter your email');
// ⚠️ Prefer getByLabel when a label exists — placeholder is a fallback

// ── getByAltText / getByTitle ──────────────────────────────────
page.getByAltText('Company logo');            // <img alt="Company logo">
page.getByTitle('Close dialog');             // element with title="Close dialog"

// ── getByText ──────────────────────────────────────────────────
// ⚠️ Default is SUBSTRING match (case-sensitive), NOT exact!
page.getByText('Welcome back, John');                   // substring match (default)
page.getByText('Welcome back, John', { exact: true });  // exact full-string match
page.getByText('Welcome');                              // matches any element containing 'Welcome'
page.getByText(/welcome/i);                             // regex (case insensitive)

// ── getByTestId ─────────────────────────────────────────────────
page.getByTestId('submit-button');           // data-testid="submit-button"

// ── locator (CSS / XPath fallback) ─────────────────────────────
page.locator('.btn-primary');               // CSS class
page.locator('#login-form');                 // CSS ID
page.locator('input[type="email"]');         // CSS attribute
page.locator('//button[@type="submit"]');    // XPath

// ── Chaining: narrow scope to a parent element ─────────────────
// Find the Submit button INSIDE a specific form
page.locator('#checkout-form').getByRole('button', { name: 'Submit' });

// ── filter(): narrow a locator result by text or inner locator ─
// Find all list items, but only the ones containing "urgent"
page.getByRole('listitem').filter({ hasText: 'urgent' });

// Find table rows that contain a specific cell value
page.getByRole('row').filter({ hasText: 'John Doe' });

// ── nth(): picking from a list ─────────────────────────────────
page.getByRole('listitem').first();           // first item
page.getByRole('listitem').last();            // last item
page.getByRole('listitem').nth(2);            // 0-indexed, so this is 3rd

// ── and(): combine locators (must match BOTH) ──────────────────
page.getByRole('button').and(page.locator('.primary'));

// ── or(): match either locator ─────────────────────────────────
page.getByRole('button', { name: 'OK' }).or(page.getByRole('button', { name: 'Accept' }));

// ── frameLocator(): interact with iframes ─────────────────────
const frame = page.frameLocator('iframe[title="Payment form"]');
await frame.getByLabel('Card number').fill('4111111111111111');

// ── Click variants ─────────────────────────────────────────────
await locator.click();                      // regular click
await locator.click({ button: 'right' });   // right-click
await locator.dblclick();                  // double-click
await locator.click({ modifiers: ['Shift'] });  // Shift+Click
await locator.click({ position: { x: 10, y: 20 } }); // click at offset

// ── Text input ─────────────────────────────────────────────────
await locator.fill('Hello World');          // clears and types (recommended)
await locator.clear();                       // clear the field
await locator.pressSequentially('Hello');  // types char by char (for fields with JS events)

// ── Keyboard ───────────────────────────────────────────────────
await locator.press('Enter');              // press a key
await locator.press('Control+A');           // key combo
await locator.press('ArrowDown');           // arrow keys
await locator.press('Tab');                // tab navigation
await page.keyboard.type('Hello World');   // global keyboard (use when no focus)

// ── Select dropdowns ──────────────────────────────────────────
await locator.selectOption('option-value');   // by value attribute
await locator.selectOption({ label: 'United States' }); // by visible text
await locator.selectOption(['val1', 'val2']); // multi-select

// ── Checkboxes & Radio buttons ────────────────────────────────
await locator.check();                      // check a checkbox
await locator.uncheck();                    // uncheck
await locator.setChecked(true);             // set to specific state

// ── Mouse operations ──────────────────────────────────────────
await locator.hover();                      // mouse over
await locator.focus();                      // focus the element
await locator.blur();                       // remove focus

// ── Drag and drop ────────────────────────────────────────────
await page.dragAndDrop('#source', '#target');
await locator.dragTo(page.locator('#target'));

// ── File upload ────────────────────────────────────────────────
await page.getByLabel('Upload file').setInputFiles('path/to/file.pdf');
await page.getByLabel('Upload').setInputFiles(['file1.jpg', 'file2.jpg']);

// ── Screenshots ───────────────────────────────────────────────
await page.screenshot({ path: 'screenshot.png' });
await page.screenshot({ path: 'full.png', fullPage: true });
await locator.screenshot();                // screenshot of just the element

// ── Scrolling ─────────────────────────────────────────────────
await locator.scrollIntoViewIfNeeded();     // scroll element into view
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));

// ── Mobile tap (for touch events) ─────────────────────────────
await locator.tap();                       // touch tap (use with mobile device emulation)

// ── Register handler BEFORE the action that triggers the dialog ─
// ⚠️ If you don't handle a dialog, Playwright auto-dismisses it

// Accept all dialogs (alert / confirm / beforeunload)
page.on('dialog', dialog => dialog.accept());

// Inspect and selectively handle
page.on('dialog', async dialog => {
  console.log(dialog.type());     // 'alert' | 'confirm' | 'prompt' | 'beforeunload'
  console.log(dialog.message());  // the dialog text
  if (dialog.type() === 'confirm') {
    await dialog.accept();          // click OK
  } else {
    await dialog.dismiss();         // click Cancel
  }
});

// Handle a prompt() and enter a value
page.on('dialog', dialog => dialog.accept('My typed value'));

// ── Wait for a new page to open (link with target="_blank") ────
// IMPORTANT: Set up the waitForEvent BEFORE clicking the link
const pagePromise = page.waitForEvent('popup');
await page.getByRole('link', { name: 'Open in new tab' }).click();
const newPage = await pagePromise;     // the new tab's Page object
await newPage.waitForLoadState();
await expect(newPage).toHaveTitle(/Expected Title/);

// ── Handle window.open() popups ────────────────────────────────
const [popup] = await Promise.all([
  context.waitForEvent('page'),         // listen on context level
  page.getByRole('button', { name: 'Share' }).click(),
]);
await popup.waitForLoadState();
// Now interact with popup like any page

// URL assertions
await expect(page).toHaveURL('https://example.com/dashboard');
await expect(page).toHaveURL(/dashboard/);    // regex

// Page title
await expect(page).toHaveTitle('My App - Dashboard');
await expect(page).toHaveTitle(/Dashboard/);

// Visual regression (screenshots)
await expect(page).toMatchSnapshot();
await expect(page).toMatchSnapshot({ maxDiffPixelRatio: 0.01 });

const btn = page.getByRole('button', { name: 'Submit' });

// Visibility
await expect(btn).toBeVisible();           // element is in DOM and visible
await expect(btn).toBeHidden();            // element is hidden or not in DOM
await expect(btn).toBeAttached();          // element is in the DOM

// Enabled/disabled state
await expect(btn).toBeEnabled();           // not disabled
await expect(btn).toBeDisabled();          // is disabled

// Text content
await expect(btn).toHaveText('Submit Order');   // exact text match
await expect(btn).toContainText('Submit');      // partial text match
await expect(page.locator('ul')).toHaveText(['Item 1', 'Item 2']); // array of texts

// Form values
await expect(page.getByLabel('Email')).toHaveValue('user@example.com');
await expect(page.getByLabel('Accept')).toBeChecked();

// Attributes & CSS
await expect(btn).toHaveAttribute('type', 'submit');
await expect(btn).toHaveClass(/btn-primary/);
await expect(btn).toHaveCSS('color', 'rgb(255, 0, 0)');

// Count
await expect(page.getByRole('listitem')).toHaveCount(5);

// Negate with .not
await expect(btn).not.toBeVisible();
await expect(page).not.toHaveURL('/error');

// ── expect.poll() — retry a non-Playwright value ──────────────
// Perfect when checking a DB value, API response, or custom condition
await expect.poll(async () => {
  const response = await page.request.get('/api/job-status');
  return (await response.json()).status;
}, {
  timeout: 30000,    // poll for up to 30s
  intervals: [1000, 2000, 5000],  // backoff intervals
}).toBe('completed');

// ── expect(fn).toPass() — retry a block of assertions ─────────
// Retries the entire block until all assertions inside pass
await expect(async () => {
  const response = await page.request.get('/api/report');
  expect(response.status()).toBe(200);
  const data = await response.json();
  expect(data.rows.length).toBeGreaterThan(0);
}).toPass({ timeout: 30000 });

// Soft assertions: test continues even if assertion fails
// All failures are reported at the end of the test
test('validate product page', async ({ page }) => {
  await page.goto('/product/123');

  // These won't stop the test if they fail
  await expect.soft(page.getByRole('heading')).toHaveText('Product Name');
  await expect.soft(page.getByText('$99.99')).toBeVisible();
  await expect.soft(page.getByRole('button', { name: 'Add to Cart' })).toBeEnabled();

  // This is a hard assertion — still stops if it fails
  await expect(page).toHaveURL(/product/);
});

// ── Auto-wait (built-in, no code needed) ──────────────────────
// These all auto-wait for the element to be actionable:
await locator.click();         // waits: visible, stable, enabled, in viewport
await locator.fill('text');    // waits: visible, stable, enabled, editable
await expect(locator).toBeVisible();  // retries assertion for 5s

// ── Wait for navigation ────────────────────────────────────────
await page.waitForURL('**/dashboard');        // wait for URL to match
await page.waitForURL(/dashboard/, { timeout: 10000 });

// ── Wait for element state ─────────────────────────────────────
await locator.waitFor({ state: 'visible' });   // visible, hidden, attached, detached
await locator.waitFor({ state: 'hidden' });

// ── Wait for network ───────────────────────────────────────────
// Wait for a specific API call to complete (great for async forms)
const responsePromise = page.waitForResponse('**/api/users');
await page.getByRole('button', { name: 'Save' }).click();
const response = await responsePromise;
expect(response.status()).toBe(200);

// Wait for a specific outgoing request to be sent
const requestPromise = page.waitForRequest('**/api/analytics');
await page.getByRole('button', { name: 'Track' }).click();
const req = await requestPromise;
expect(req.method()).toBe('POST');

// Wait for page to have no pending network requests
await page.waitForLoadState('networkidle');  // ⚠️ Use sparingly — can be slow
await page.waitForLoadState('domcontentloaded');

// ── Wait for a function / condition ───────────────────────────
await page.waitForFunction(() => window.myAppReady === true);

// ── AVOID: Hard sleeps (like Selenium's Thread.sleep) ─────────
// ❌ await page.waitForTimeout(3000);  // Only for debugging!

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  // Where to look for test files
  testDir: './tests',

  // Run all tests in parallel by default
  fullyParallel: true,

  // CI: don't run test.only — fail build if committed accidentally
  forbidOnly: !!process.env.CI,

  // Retry failed tests — 0 locally, 2 in CI
  retries: process.env.CI ? 2 : 0,

  // ⚠️ undefined = HALF the logical CPU count (not full count)
  workers: process.env.CI ? 4 : undefined,

  // Reporters: list = terminal, html = HTML report file
  reporter: [
    ['list'],                    // terminal output
    ['html', { open: 'never' }], // HTML report (don't auto-open)
    ['junit', { outputFile: 'results.xml' }], // for CI
  ],

  // Run a global setup script ONCE before the entire test suite
  globalSetup: './global-setup.ts',

  // Run a global teardown script ONCE after all tests finish
  globalTeardown: './global-teardown.ts',

  // Configure assertion retry timeout (default: 5000ms)
  expect: {
    timeout: 5000,
  },

  // Global settings applied to all tests
  use: {
    // Base URL — use relative URLs in tests: page.goto('/login')
    baseURL: process.env.BASE_URL || 'http://localhost:3000',

    // Collect traces on first retry (for debugging CI failures)
    trace: 'on-first-retry',

    // Screenshot on failure
    screenshot: 'only-on-failure',

    // Video recording
    video: 'on-first-retry',

    // Default timeout for actions (30s)
    actionTimeout: 30000,

    // Default timeout for navigation
    navigationTimeout: 30000,
  },

  // Test projects = matrix of browser + config combinations
  projects: [
    // Run setup project first (e.g., global login)
    {
      name: 'setup',
      testMatch: '**/*.setup.ts',
    },

    // Desktop browsers
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['setup'],
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },

    // Mobile emulation
    {
      name: 'mobile-chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'mobile-safari',
      use: { ...devices['iPhone 13'] },
    },
  ],

  // Start dev server before running tests (optional)
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

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

// Group related tests
test.describe('Shopping Cart', () => {

  // Runs ONCE before all tests in this describe block
  test.beforeAll(async ({ browser }) => {
    // Create shared resources (e.g., database setup)
  });

  // Runs before EACH test — most common hook
  test.beforeEach(async ({ page }) => {
    await page.goto('/cart');
    // Set up a known state before each test
  });

  // Runs after EACH test
  test.afterEach(async ({ page }, testInfo) => {
    if (testInfo.status !== 'passed') {
      await page.screenshot({ path: `failure-${testInfo.title}.png` });
    }
  });

  // Runs ONCE after all tests
  test.afterAll(async () => {
    // Cleanup shared resources (e.g., delete test data)
  });

  test('can add item to cart', async ({ page }) => { /* ... */ });
  test('can remove item from cart', async ({ page }) => { /* ... */ });
});

// ── Test control ───────────────────────────────────────────────
test.only('run only this test', async ({ page }) => { /* ... */ });
test.skip('skip this test', async ({ page }) => { /* ... */ });
test.fixme('known broken test', async ({ page }) => { /* ... */ });
test.fail('expected to fail', async ({ page }) => { /* ... */ });

// Conditional skip
test.skip(process.platform === 'win32', 'Not supported on Windows');

// ── Test tags (for filtering) ─────────────────────────────────
// Old approach: embed @tag in test name
test('checkout flow @smoke @critical', async ({ page }) => { /* ... */ });
// New approach (v1.42+): use the tag option — preferred
test('checkout flow', { tag: ['@smoke', '@critical'] }, async ({ page }) => { /* ... */ });
// Run: npx playwright test --grep @smoke
// Skip: npx playwright test --grep-invert @slow

// ── test.step() — group actions into labeled steps ─────────────
// Steps appear as collapsible sections in the Trace Viewer
test('complete checkout', async ({ page }) => {
  await test.step('Add product to cart', async () => {
    await page.goto('/products');
    await page.getByRole('button', { name: 'Add to cart' }).click();
  });

  await test.step('Proceed to checkout', async () => {
    await page.getByRole('link', { name: 'Checkout' }).click();
    await expect(page).toHaveURL(/checkout/);
  });

  await test.step('Fill shipping details', async () => {
    await page.getByLabel('Address').fill('123 Main St');
    await page.getByRole('button', { name: 'Place Order' }).click();
  });

  await expect(page.getByText('Order confirmed')).toBeVisible();
});

import { Page, Locator } from '@playwright/test';

export class LoginPage {
  readonly page: Page;

  // Define locators as class properties
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;
  readonly errorMessage: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByLabel('Email');
    this.passwordInput = page.getByLabel('Password');
    this.submitButton = page.getByRole('button', { name: 'Sign in' });
    this.errorMessage = page.getByRole('alert');
  }

  async goto() {
    await this.page.goto('/login');
  }

  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }

  async getErrorText(): Promise<string> {
    return await this.errorMessage.innerText();
  }
}

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

test('successful login', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('user@example.com', 'password123');
  await expect(page).toHaveURL('/dashboard');
});

import { test as base } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';
import { DashboardPage } from './pages/DashboardPage';

// Define the type for our custom fixtures
type MyFixtures = {
  loginPage: LoginPage;
  dashboardPage: DashboardPage;
  loggedInPage: DashboardPage;  // already logged-in state
};

export const test = base.extend<MyFixtures>({

  // Auto-create LoginPage for every test that requests it
  loginPage: async ({ page }, use) => {
    await use(new LoginPage(page));
  },

  dashboardPage: async ({ page }, use) => {
    await use(new DashboardPage(page));
  },

  // A fixture that logs in before the test, tears down after
  loggedInPage: async ({ page }, use) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('user@test.com', 'password');
    // ↑ Setup  ← the 'use' call is where the test body runs →  Teardown ↓
    await use(new DashboardPage(page));
    // Cleanup happens here after test completes
    await page.evaluate(() => localStorage.clear());
  },
});

// Re-export expect so tests only import from this file
export { expect } from '@playwright/test';

import { test, expect } from '../fixtures';  // your custom test object

// No login code needed — fixture handles it!
test('dashboard shows user name', async ({ loggedInPage }) => {
  await expect(loggedInPage.userGreeting).toBeVisible();
});

test('login form validates email', async ({ loginPage }) => {
  await loginPage.goto();
  await loginPage.login('notanemail', 'pass');
  // assertions...
});

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

// ── Standalone API test (no browser) ──────────────────────────
test('GET /api/users returns list', async ({ request }) => {
  const response = await request.get('https://api.example.com/users');

  expect(response.status()).toBe(200);
  expect(response.headers()['content-type']).toContain('application/json');

  const body = await response.json();
  expect(body.users).toHaveLength(10);
  expect(body.users[0]).toMatchObject({
    id: expect.any(Number),
    email: expect.stringContaining('@'),
  });
});

test('POST /api/users creates a user', async ({ request }) => {
  const response = await request.post('/api/users', {
    data: { name: 'Jane Doe', email: 'jane@example.com' },
    headers: { 'Authorization': 'Bearer token123' },
  });

  expect(response.status()).toBe(201);
  const user = await response.json();
  expect(user.id).toBeDefined();
});

// ── Hybrid: API setup + UI verification ───────────────────────
test('created product appears in product list', async ({ request, page }) => {
  // 1. Create data via API (fast, no UI needed)
  const apiResponse = await request.post('/api/products', {
    data: { name: 'Test Widget', price: 9.99 }
  });
  const { id } = await apiResponse.json();

  // 2. Verify it shows in the UI
  await page.goto('/products');
  await expect(page.getByText('Test Widget')).toBeVisible();

  // 3. Cleanup via API
  await request.delete(`/api/products/${id}`);
});

import { request } from '@playwright/test';

// Create a reusable authenticated API context
const apiContext = await request.newContext({
  baseURL: 'https://api.example.com',
  extraHTTPHeaders: {
    'Accept': 'application/json',
    'Authorization': `Bearer ${process.env.API_TOKEN}`,
  },
});

// Now use relative URLs
await apiContext.get('/users');      // → https://api.example.com/users
await apiContext.post('/orders', { data: { /* ... */ } });

// Always dispose when done
await apiContext.dispose();

// ── Mock an API response ────────────────────────────────────────
await page.route('**/api/products', async route => {
  await route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify([
      { id: 1, name: 'Mocked Product', price: 19.99 }
    ]),
  });
});

// ── Test error states (500, 404, network failure) ──────────────
await page.route('**/api/orders', async route => {
  await route.fulfill({ status: 500, body: 'Internal Server Error' });
});

// ── Abort a request (simulate network offline) ─────────────────
await page.route('**/*.png', route => route.abort());

// ── Modify a real request (add headers, change body) ──────────
await page.route('**/api/**', async route => {
  const headers = { ...route.request().headers(), 'x-test-header': 'true' };
  await route.continue({ headers });      // continue with modified request
});

// ── Load response from file (fixtures) ────────────────────────
await page.route('**/api/products', route => route.fulfill({
  path: 'tests/fixtures/products.json'  // serve from local file
}));

// ── Remove route when done ─────────────────────────────────────
await page.unroute('**/api/products');

// ── Intercept and inspect a request ───────────────────────────
page.on('request', req => {
  if (req.url().includes('/api/')) {
    console.log(`➜ ${req.method()} ${req.url()}`);
  }
});

// ── Fetch the real response, then modify it ───────────────────
await page.route('**/api/products', async route => {
  // 1. Make the REAL request
  const response = await route.fetch();
  const json = await response.json();

  // 2. Modify a single field (e.g. inject an out-of-stock item)
  json[0].stock = 0;

  // 3. Return the modified response to the browser
  await route.fulfill({ response, json });
});

// ── Add latency to test loading/skeleton states ────────────────
await page.route('**/api/heavy-report', async route => {
  await page.waitForTimeout(2000);   // simulate 2s delay
  await route.continue();
});

// ── Remove a field to test missing-data UI states ─────────────
await page.route('**/api/user', async route => {
  const response = await route.fetch();
  const json = await response.json();
  delete json.avatar;       // test "no profile photo" UI state
  await route.fulfill({ response, json });
});