⚠️ Disclaimer:This project is inspired by a real production testing scenario in a live environment. All business logic, routes, identifiers, and sensitive data were adapted to preserve confidentiality.
The URLs used in this code (e.g.,
api.menugo.demo) are sanitized placeholders. Therefore, this framework is intended to be viewed as a Technical Showcase of architecture and coding standards, rather than an executable repository against a live target.
To demonstrate advanced End-to-End (E2E) testing techniques for MenuGo, a self-service web app designed for bars, restaurants, and events.
The platform allows customers to order and pay directly via their mobile devices on-site to skip the line (Queue busting). The tests focus on ensuring high reliability for critical flows like instantaneous payments and order processing in high-traffic scenarios.
If you are reviewing this code, I recommend looking at these specific files to understand the depth of the framework:
To speed up testing in a "fast-paced" ordering environment, I inject the cart state directly into LocalStorage. This bypasses the UI selection steps and jumps straight to the critical checkout phase.
- File:
fixtures/index.ts - Method:
customerWithCart
Testing instant payments in production is risky. I used Playwright's network interception to mock backend responses for PIX (Brazilian Instant Payment) and Credit Card approvals, simulating the real-time feedback required in a physical venue.
- File:
tests/customer/customer-checkout.spec.ts - Technique:
page.route()to intercept/api/payments.
To avoid circular dependencies and keep imports clean, a PageManager class acts as the single point of entry for all Page Objects.
- File:
pages/PageManager.ts
Beyond standard visibility checks, the framework validates if dynamic images (like the Payment QR Code) are actually rendered by the browser engine using evaluate to check naturalWidth.
The project follows a modular architecture designed for maintainability:
├── fixtures/
│ ├── data/ # Static data and Mock factories
│ └── index.ts # Custom test extensions (State Injection)
├── pages/
│ ├── customer/ # Customer-facing Page Objects
│ └── PageManager.ts # Centralized Page Hub
├── tests/
│ └── customer/ # E2E Specs (Login, Menu, Cart, Checkout)
├── playwright.config.ts # Main configuration (Retries, Workers, Reporters)
└── package.json
Core: Playwright Test
Language: TypeScript
Pattern: Page Object Model (POM)
Data Handling: dotenv for environment variables
CI/CD Ready: Configured for parallel execution and HTML reporting.
The project includes a GitHub Actions workflow (.github/workflows/playwright.yml) designed to simulate a production pipeline.
It is currently configured with a Manual Trigger (workflow_dispatch) to allow on-demand execution without generating "false negative" build failures due to the unreachable demo URLs.
The pipeline performs the following steps:
- Environment Setup: Installs Node.js, dependencies, and Playwright browsers.
- Security: Injects sensitive data (like passwords and tokens) securely via GitHub Secrets.
- Execution: Runs the test suite using the sanitized environment variables.
- Reporting: Uploads the HTML test report as a build artifact for debugging.
Note: Automatic triggers (
on: push) are implemented in the code but commented out to preserve the repository's build status health in this showcase environment.
Although the URLs are sanitized, in a real environment with valid .env variables, the execution would be:
npm installnpx playwright testnpx playwright test customer-checkout.spec.ts --headedBuilt with 💙 by a QA Engineer passionate about automation framework design.