playwright-web-app

Playwright Web App

This project is a simple web application designed to demonstrate integration with Dev Proxy and end-to-end testing using Playwright.

Features

• Static web app served from the public/ directory
• End-to-end tests written with Playwright (tests/ directory)
• Example Playwright configuration and test scripts
• Easily runnable with minimal setup
• Dev Proxy integration for API mocking and network simulation

Run locally

1. Install dependencies

   npm install

2. Install Dev Proxy

3. Start Dev Proxy

   devproxy

   The .devproxy folder contains configuration files for Dev Proxy, enabling API mocking and network simulation during development and testing.

   • devproxyrc.json: Main configuration file specifying plugins and settings.
     • MockResponsePlugin: Mocks API responses using rules defined in mocks.json.
     • LatencyPlugin: Simulates network latency with configurable delay.
     • urlsToWatch: Only requests to https://api.blog.com/* are intercepted.
     • mockResponsePlugin.mocksFile: Points to the mocks.json file for mock data.
     • latencyPlugin: Sets minimum and maximum delay (200–800ms) for responses.
   • mocks.json: Contains mock API responses. For example, a GET request to https://api.blog.com/posts returns a list of blog posts with sample data.

   This setup allows you to run the web app and Playwright tests against consistent, controlled API responses and network conditions, making it ideal for local development and CI environments.

4. Run the web app

   npm start

Test locally

[!NOTE] Ensure Dev Proxy is running before executing tests.

1. Install Microsoft Edge for Playwright

   npm run install:msedge

2. Run Playwright Tests

   npm test

Test worfklow locally

This project includes a GitHub Actions workflow (.github/workflows/test.yml) to demonstrate testing of Dev Proxy integration with Playwright in CI environments.

Workflow highlights:

• Checks out the repository and sets up Node.js 20
• Installs dependencies and Microsoft Edge for Playwright
• Installs and starts Dev Proxy
• Installs the Dev Proxy root certificate for Chromium-based browsers
• Runs Playwright end-to-end tests
• Outputs Dev Proxy logs for troubleshooting

This workflow ensures that your application and tests run in a controlled environment with Dev Proxy, simulating real-world API and network conditions automatically on every run.

To test the workflow locally:

1. Install the GitHub Local Actions extension in VS Code.
2. If running on macOS with Apple Silicon, set the container-architecture option to linux/amd64 and enable it. Learn more.
3. Execute the Test Dev Proxy integration with Playwright workflow. Learn more