Playwright Login Test Repository

This repository contains a simple Playwright automated test framework testing Dave Haefner's project The-Internet: https://the-internet.herokuapp.com/login.

Project Overview

The test suite exercises the login flow and related authentication setup using Playwright.

How This Project Was Created

Created a new folder:

• mkdir practicing-playwright

Installed Node:

• npm install -D @types/node

Installed Playwright:

• npm init playwright@latest

Default Playwright Installation had problems: 'Process' not recognized

Problem with the playwright.config.ts file, May 2026:

• The "forbidOnly: !!process.env.CI" did not have "process" recognized

Initialized TypeScript creating a tsconfig.json file:

• npx tsc --init

New tsconfig.json file:

• Uncommented the "For nodejs" section
• "strict": false,

Butch Mayhew's suggested changes from his Learning Playwright Course

Changes of playwright.config.ts per suggestions from Butch Mayhew's Learning Playwright

• Local retries: 0 -> 1: retries: process.env.CI ? 2 : 1
• timeout: 30_000,
• globalTimeout: 10 * 60 * 1000,
• use changes:

    trace: 'on',
    actionTimeout: 0,
    ignoreHTTPSErrors: true,
    video: 'retain-on-failure',
    screenshot: 'only-on-failure',
    headless: true

  projects: [
    {
      name: "setup",
      testMatch: /.*\.setup.ts/,
    },
    {
      name: 'chromium',
      dependencies: ["setup"],
      use: { ...devices['Desktop Chrome'], permissions: ["clipboard-read"] },

Setup Scripts in Package.json

package.json

  "scripts": {
    "test": "npx playwright test",
    "test: chromium": "npx playwright test --project chromium",
    "test:smoke": "npx playwright test --grep @smoke",
    "test:report": "npx playwright test && npx playwright show-report",
    "test:ui": "npx playwright test --ui"
  },

Install VS Code Extenstions

VS Code Extensions:

• Playwright Test for VS Code

Setup Format for Test IDs

What does a testID look like? What is the prefix? Is it '[data-test="username-textbox"]'?

     baseURL: 'https://practicesoftwaretesting.com',
    // baseURL: 'https://the-internet.herokuapp.com/login',
    testIdAttribute: "data-test",

await page.getByTestID('username-textbox').click();

Project Structure

• package.json - npm metadata and test scripts.
• playwright.config.ts - Playwright configuration.
• tsconfig.json - TypeScript configuration.
• tests/ - test files.
  • auth.setup.ts - authentication setup utilities and fixtures.
  • login/login.spec.ts - login tests.
  • login/login.spec.ts-snapshots/ - snapshot test artifacts.
• lib/ - page object and helper layers.
  • pages/ - page object files.
    • login/loginPage.ts - login page model.
• playwright-report/ - generated HTML report output.
• data/ and trace/ - Playwright trace and support files.
• test-results/ - stored test result artifacts.

How to Install

1. Clone the repository:

   git clone <repository-url>
   cd practicing-playwright

2. Install dependencies:

   npm install

How To Run Tests

Run the full Playwright suite:

npm test

Run tests only in Chromium:

npm run "test: chromium"

Open the Playwright test report after a successful run:

npm run test:report

Open the interactive Playwright test runner UI:

npm run test:ui

Run Smoke Tests

This repository tags quick smoke tests with @smoke.

npm run test:smoke

Tools and Technologies

• Playwright - The primary test framework and browser automation library. It powers test execution, browser contexts, screenshot capture, tracing, reporting, and support for Chromium.
• Playwright Test Runner - Enables npx playwright test commands, test filtering, projects, retries, and the --grep @smoke smoke test convention.
• TypeScript - Provides typed test code, autocompletion, and compile-time validation for page objects and test fixtures.
• Node.js / npm - Used to install dependencies, run scripts, and manage the project lifecycle.
• Playwright configuration - playwright.config.ts controls browser projects, timeouts, trace capture, video, screenshot behavior, and test match rules.
• Page Object Model - Encapsulates page behavior in lib/pages/login/loginPage.ts, improving maintainability and readability of login tests.
• Test artifacts - test-results/, playwright-report/, and trace/ store generated result data, HTML reports, and diagnostic traces.
• VS Code Playwright extension - Recommended for running tests, exploring test structure, and debugging from the editor.
• Snapshot testing - Used for UI-related regression verification and stored under tests/login/login.spec.ts-snapshots/.

Notes

• tests/login/login.spec.ts contains the login scenarios.
• lib/pages/login/loginPage.ts encapsulates login page actions.
• test-results/ and playwright-report/ are generated by test runs and can be cleaned up as needed.