Playwright POC

A proof of concept to showcase the implementation of Playwright as a test framework and multiple test reporters (Monocart and Allure) to test the checkout flow for the "Test Automation - Big Cartel E-commerce Test store".

---

Table of contents

• Overview
• Project information
• Pre requisites
• Setup
• Run tests and generate the test run report to view test results
  • Test run with Playwright HTML report generation
  • Test run with Monocart report generation
  • Test run with Allure report generation
• Gotcha's
• TODO

---

Overview

This repository demonstrates:

• The Playwright Testing Framework to run tests locally.

• Test run reporting generated with:

  • Built-in/Default Playwright HTML reporter
  • Monocart reporter
  • Allure reporter

• CI/CD Integration for GitHub workflow support executing tests in Docker with GitHub Actions triggered on push/pull requests to main and for daily scheduled runs:

  • 
  • 

  • The passing workflow for "Playwright Tests with Allure Report" is currently a false positive (failing issues listed below), the workflow has been disabled in GitHub Actions until the issue can be resolved!
  • Current Issues:
    • Workflow runs without error in the workspace, generates the artefact, but it doesn't load the report data objects when the index.html is viewed in the downloaded artefact due to a blocked by CORS policy issue.
    • Using the allure command line tool to open and serve the report from the downloaded artefact root is failing as well, and will be investigated at a later stage.
    • TODO: Will be updated at some stage to use GitHub Pages instead to resolve the issue.

---

Project information

This project repo contains a functional journey test to verify multiple areas of the e-commerce checkout flow

• Search for an item in the store.
• View a product from the search results.
• Select colour and age options from the dropdowns.
• Increase item quantity.
• Proceed to the cart.
• Verify cart details, including:
  • Correct items.
  • Selected options.
  • Quantities.
  • Item prices and cart totals.

---

Pre-requisites

1. Node.js (LTS version recommended)
2. npm (Included with Node.js)

---

Setup

1. Clone or Download
   • Clone this repository: git clone https://github.com/badj/playwright-poc.git
   • Alternatively, download the ZIP file and extract it.
2. Navigate to Project Directory:

   cd playwright-poc

3. Initialise a Node.js project

   npm init -y

4. Install Playwright

   npm i -D @playwright/test

5. Install browsers

   npx playwright install

---

Run tests and generate the test run report to view the test results

Test run with Playwright HTML report generation

1. Execute the test

   npx playwright test

2. OR Execute the test with the UI

   npx playwright test --ui

3. View the HTML report when test execution completes - Command will print to the terminal

   npx playwright show-report

• A hyperlink to the web server will be printed to the terminal that links through to the generated report - sample output:

  Serving HTML report at http://localhost:9323. Press Ctrl+C to quit.
  

Test run with Monocart report generation

1. Execute the test

   npx playwright test

2. Generate and view the HTML report when test execution completes - The Report opens automatically and is generated in monocart-report/index.html

   npx monocart show-report monocart-report/index.html

• A hyperlink to the web server will be printed to the terminal that links through to the generated report - sample output:

  serve dirs [ 'monocart-report', './' ]
  7/8/2025, 10:26:33 PM server listening on http://localhost:8090/index.html
  

Test run with Allure report generation

1. Execute the test

   npx playwright test

2. Generate and view the HTML report when test execution completes - Report will be generated in allure-report/index.html

   allure generate allure-results -o allure-report --clean 

3. OR Generate the report and open it automatically on the web server - Report will be generated in allure-report/index.html

   allure generate allure-results -o allure-report --clean && allure open allure-report && echo "file://$(pwd)/allure-report/index.html" 

• A hyperlink to the web server will be printed to the terminal that links through to the generated report - sample output:

  Server started at <http://127.0.0.1:56217>. Press <Ctrl+C> to exit
  

---

Gotcha's

1. Installing Playwright using npm i -D @playwright/test failing due to an unsupported Node.js version

Your current Node.js version is older than the recommended LTS version. Playwright requires a more recent version of Node.js. As of Playwright v1.54.1, the minimum supported Node.js version is typically Node.js 16 or higher.

To resolve the issue:

1. Update Node.js using nvm (Node Version Manager) - Install Node.js 18 (LTS) or a newer version like 20

  nvm install 18

2. Switch to the new version

  nvm use 18

3. Set it as the default version

  nvm alias default 18

4. Verify the Node.js version - Ensure it’s at least v16 or higher.

  node -v

5. Verify npm version:

  npm -v

Additional steps if the steps above do not resolve it:

6. Clear npm Cache and Reinstall Dependencies → The error may be caused by a corrupted npm cache or incomplete dependency installation

This ensures a clean slate for dependency installation, avoiding issues from cached or corrupted files.

  npm cache clean --force

7. Remove the node_modules directory and package-lock.json → Navigate to the project directory

Change to the playwright-poc project directory (example for macOS)*:

  cd [path to your repo]/playwright-poc

8. Remove the node_modules directory and package-lock.json file:

  rm -rf node_modules package-lock.json

9. Reinstall dependencies:

  npm install

---

TODO

---