Playwright

Installation

Introduction:

Playwright Test is an end-to-end test framework for modern web apps. It bundles test runner, assertions, isolation, parallelization and rich tooling. Playwright supports Chromium, WebKit and Firefox on Windows, Linux and macOS, locally or in CI, headless or headed, with native mobile emulation for Chrome (Android) and Mobile Safari.

Installing Playwright

Using npm, yarn or pnpm #

The command below either initializes a new project or adds Playwright to an existing one.

npm:

• npm init playwright@latest

yarn:

• yarn create playwright

pnpm:

• pnpm create playwright

When prompted, choose / confirm:

• TypeScript or JavaScript (default: TypeScript)
• Tests folder name (default: tests, or e2e if tests already exists)
• Add a GitHub Actions workflow (recommended for CI)
• Install Playwright browsers (default: yes)

You can re-run the command later; it does not overwrite existing tests.

What's Installed#

Playwright downloads required browser binaries and creates the scaffold below.

playwright.config.ts         # Test configuration

package.json

package-lock.json            # Or yarn.lock / pnpm-lock.yaml

tests/

example.spec.ts                # Minimal example test

The playwright.config centralizes configuration: target browsers, timeouts, retries, projects, reporters and more. In existing projects dependencies are added to your current package.json.

tests/ contains a minimal starter test.

Running the Example Test#

By default tests run headless in parallel across Chromium, Firefox and WebKit (configurable in playwright.config). Output and aggregated results display in the terminal.

npm:

• npx playwright test

yarn:

• yarn playwright test

pnpm:

• pnpm exec playwright test
  
  

Tips:

• See the browser window: add --headed.
• Run a single project/browser: --project=chromium.
• Run one file: npx playwright test tests/example.spec.ts.
• Open testing UI: --ui.

See Running Tests for details on filtering, headed mode, sharding and retries.

Locators:

Check: Check the input Checkbox

Ensure that checkbox or radio element checked.

syntax:

await page.getByRole('checkbox').check();

Ex: await page.getByRole('checkbox', { name: 'Accept Terms' }).check();