React Playwright Demo

This is the project to demo the playwright with the React App

The React Playwright Demo App is based on following instruction:

React Developer Guide: React Developer Guide

Playwright Developer Guide: Playwright Developer Guide

Sample Login/Register App Example: Sample Login/Register App Example

Demo Github Page: Demo

Prerequisites

• node 20.15.1
• npm 10.7.0
• typescript 4.9.5
• react 18.3.1
• @playwright/test 1.45.1

How to run the Demo Page

# install the dependencies
$ npm ci

# run the web server
$ npm run start

Execution Test:

Execute the Unit test

# run unit test
$ npm run test

Execute the Playwright test

# run playwright test
$ npm run test:e2e

Open the html test report

# run playwright report
$ npx playwright show-report

Useful Sample:

• Page Object Patterns

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

export class IndexPage {
  readonly page: Page;
  readonly loginButton: Locator;
  readonly email: Locator;

  constructor(page: Page) {
    this.page = page;
    this.email = page.locator('div[data-testid="email"] input');
    this.loginButton = page.locator('a[data-testid="loginButton"]');
  }

  async fillEmail() {
    await this.email.fill('[email protected]');
    await expect(this.email).toBeVisible();
  }

  async action() {
    await this.fillEmail();
    await this.loginButton.click();
  }
}

Documentation:

Blog: - Shift Left Testing

Author

Jersey Su – @jerseysu