Project Setup with @playwright/test

📌 Definition:

📖 Detailed Explanation:

Unlike Selenium, where you assemble a runner (JUnit/TestNG/pytest/Mocha), an assertion library and a reporter yourself, Playwright ships them together. npm init playwright@latest generates playwright.config.ts, a tests/ folder, and optionally a CI workflow. The config defines projects (browser/device combinations), timeouts, retries, the base URL and reporters. Tests are written with the test() and expect() functions imported from @playwright/test, and run headless by default. You run everything with npx playwright test, target one browser with --project=firefox, open the interactive UI mode with --ui, and view the last run's report with npx playwright show-report.

🔑 Key Points:

• npm init playwright@latest scaffolds config, browsers, sample tests and a CI workflow
• Runner, assertions (expect), fixtures and reporters come bundled — no glue code
• playwright.config defines projects, timeouts, retries, baseURL and reporters
• Runs headless by default; add --headed, --ui or --debug when developing
• npx playwright install --with-deps fetches browsers and Linux system libraries on CI

🌍 Real-World Example:

📎 Code Example:

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

export default defineConfig({
  testDir: './tests',
  timeout: 30_000,
  retries: process.env.CI ? 2 : 0,
  reporter: [['html'], ['list']],
  use: {
    baseURL: 'https://www.qapractice.com',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
  ],
});