> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/microsoft/playwright/llms.txt
> Use this file to discover all available pages before exploring further.

# Welcome to Playwright

> A framework for Web Testing and Automation that enables cross-browser testing with a single API

<div className="relative overflow-hidden bg-gradient-to-br from-[#31654c] via-[#2b3035] to-[#1a1d27] dark:from-[#31654c] dark:via-[#2b3035] dark:to-[#0f1117] py-20">
  <div className="max-w-7xl mx-auto px-6 lg:px-8">
    <div className="lg:grid lg:grid-cols-12 lg:gap-12 items-center">
      <div className="lg:col-span-7">
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6">
          Web Testing and Automation
        </h1>

        <p className="text-lg sm:text-xl text-gray-300 dark:text-gray-300 max-w-2xl mb-8">
          Playwright enables reliable end-to-end testing for modern web applications. Test across Chromium, Firefox, and WebKit with a single API.
        </p>

        <div className="flex flex-wrap gap-4">
          <a href="/quickstart" className="inline-flex items-center px-6 py-3 rounded-lg bg-[#d88982] hover:bg-[#c67972] text-white font-semibold transition-colors no-underline">
            Get Started
          </a>

          <a href="/api/overview" className="inline-flex items-center px-6 py-3 rounded-lg border border-white/30 bg-white/10 hover:bg-white/20 text-white font-semibold transition-colors no-underline">
            API Reference
          </a>
        </div>
      </div>

      <div className="hidden lg:block lg:col-span-5 mt-12 lg:mt-0">
        <div className="relative">
          <img src="https://media.brand.dev/d2941a6c-8988-4d56-9cd3-3d73f763557f.png" alt="Playwright logo" noZoom className="w-full h-auto max-w-md mx-auto" />
        </div>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="text-center mb-12">
    <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
      Quick start
    </h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
      Get up and running with Playwright in minutes
    </p>
  </div>

  <Steps>
    <Step title="Install Playwright">
      Install Playwright using npm, yarn, or pnpm. The installation includes browser binaries for Chromium, Firefox, and WebKit.

      <CodeGroup>
        ```bash npm theme={null}
        npm init playwright@latest
        ```

        ```bash yarn theme={null}
        yarn create playwright
        ```

        ```bash pnpm theme={null}
        pnpm create playwright
        ```
      </CodeGroup>

      <Note>
        The init command will create a configuration file, add example tests, and optionally set up a GitHub Actions workflow.
      </Note>
    </Step>

    <Step title="Write your first test">
      Create a test file that navigates to a page and performs an action.

      ```typescript example.spec.ts theme={null}
      import { test, expect } from '@playwright/test';

      test('basic test', async ({ page }) => {
        await page.goto('https://playwright.dev/');
        
        // Expect a title "to contain" a substring.
        await expect(page).toHaveTitle(/Playwright/);
        
        // Click the get started link.
        await page.getByRole('link', { name: 'Get started' }).click();
        
        // Expects the URL to contain intro.
        await expect(page).toHaveURL(/.*intro/);
      });
      ```
    </Step>

    <Step title="Run your tests">
      Execute tests using the Playwright Test runner. Tests run in parallel by default.

      ```bash theme={null}
      npx playwright test
      ```

      <Accordion title="Example test output">
        ```
        Running 3 tests using 3 workers

          ✓  [chromium] › example.spec.ts:3:1 › basic test (2s)
          ✓  [firefox] › example.spec.ts:3:1 › basic test (2s)
          ✓  [webkit] › example.spec.ts:3:1 › basic test (2s)

        3 passed (6s)
        ```
      </Accordion>
    </Step>

    <Step title="View test results">
      Open the HTML test report to see detailed results, screenshots, and traces.

      ```bash theme={null}
      npx playwright show-report
      ```

      The report includes screenshots on failure, execution traces, and the ability to inspect each test step.
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="text-center mb-12">
    <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
      Key features
    </h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
      Everything you need for modern web testing
    </p>
  </div>

  <CardGroup cols={3}>
    <Card title="Cross-browser testing" icon="globe" href="/core-concepts/browsers">
      Test across Chromium, Firefox, and WebKit with a single API. Run tests on Windows, Linux, and macOS.
    </Card>

    <Card title="Auto-waiting" icon="clock" href="/core-concepts/auto-waiting">
      Playwright automatically waits for elements to be actionable before performing actions, eliminating flaky tests.
    </Card>

    <Card title="Test isolation" icon="shield" href="/core-concepts/test-isolation">
      Each test runs in a fresh browser context, providing full isolation with zero overhead.
    </Card>

    <Card title="Powerful tooling" icon="screwdriver-wrench" href="/tools/codegen">
      Code generation, trace viewer, and inspector help you write and debug tests faster.
    </Card>

    <Card title="Network control" icon="network-wired" href="/guides/network-mocking">
      Intercept, mock, and modify network requests to test edge cases and failure scenarios.
    </Card>

    <Card title="Mobile emulation" icon="mobile" href="/guides/mobile-emulation">
      Emulate mobile devices with custom viewports, user agents, and geolocation.
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="text-center mb-12">
    <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
      Explore by topic
    </h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
      Deep dive into Playwright's capabilities
    </p>
  </div>

  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
    <a href="/core-concepts/architecture" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#d88982] dark:hover:border-[#d88982] overflow-hidden transition-colors no-underline">
      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 mb-2">
          Core Concepts
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Understand Playwright's architecture, browser contexts, and how auto-waiting eliminates flaky tests.
        </p>

        <div className="flex items-center text-sm text-[#d88982] group-hover:text-[#c67972]">
          Learn more

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/test-runner/overview" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#d88982] dark:hover:border-[#d88982] overflow-hidden transition-colors no-underline">
      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 mb-2">
          Test Runner
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Configure test execution, use fixtures, write assertions, and run tests in parallel with retries.
        </p>

        <div className="flex items-center text-sm text-[#d88982] group-hover:text-[#c67972]">
          Learn more

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/guides/authentication" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#d88982] dark:hover:border-[#d88982] overflow-hidden transition-colors no-underline">
      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 mb-2">
          Guides
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Learn to handle authentication, mock networks, capture screenshots, and set up CI/CD pipelines.
        </p>

        <div className="flex items-center text-sm text-[#d88982] group-hover:text-[#c67972]">
          Learn more

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/tools/codegen" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#d88982] dark:hover:border-[#d88982] overflow-hidden transition-colors no-underline">
      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 mb-2">
          Developer Tools
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Generate tests with Codegen, debug with Inspector, and analyze failures with Trace Viewer.
        </p>

        <div className="flex items-center text-sm text-[#d88982] group-hover:text-[#c67972]">
          Learn more

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="rounded-2xl bg-gradient-to-br from-[#31654c] to-[#2b3035] dark:from-[#31654c] dark:to-[#1a1d27] p-8 sm:p-12 text-center">
    <h2 className="text-2xl sm:text-3xl font-bold text-white mb-4">
      Ready to get started?
    </h2>

    <p className="text-base sm:text-lg text-gray-200 dark:text-gray-300 max-w-2xl mx-auto mb-8">
      Install Playwright and write your first test in under 5 minutes.
    </p>

    <a href="/quickstart" className="inline-flex items-center px-6 py-3 rounded-lg bg-[#d88982] hover:bg-[#c67972] text-white font-semibold transition-colors no-underline">
      Get Started
    </a>
  </div>
</div>