Skip to content
BranchesTags

Repository files navigation

Playwright POC

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

Table of contents

Overview

This repository demonstrates:

  • The Playwright Testing Framework to run tests locally.
  • Test run reporting generated with:
  • 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:
    • Playwright Tests in Docker
    • Playwright Tests with Allure Report
    • 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.
    • JMeter Performance Tests in Docker

⇡ Return to the Table of Contents

Project information

This project repo contains a functional journey test verifying 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.

⇡ Return to the Table of Contents

Pre-requisites

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

⇡ Return to the Table of Contents

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

⇡ Return to the Table of Contents

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.

⇡ Return to the Table of Contents

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

⇡ Return to the Table of Contents

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

⇡ Return to the Table of Contents

JMeter load test integration to measure performance

⚠️ Thread Group configurations were set to low values to reduce the impact of the load test on the e-commerce store where Cloudflare could potentially throttle the requests!

  • Thread Group configurations for the tests:
    • Thread Group number of threads: 3
    • Thread Group ramp time: 10 seconds
    • Thread Group same user on next iteration: true
    • Thread Group on sample error: continue
    • Loop Controller loops: 1
    • Loop Controller continue forever: false
    • ⚠️ Keep thread group configurations set to the original low values to reduce the impact of the load test on the e-commerce store to prevent Cloudflare new request throttling!
  • The workflow:
    • Runs daily at 10:30 am NZT (UTC+12).
    • "on push and pull_request" to branches "main" disabled (⚠️ Caused Cloudflare security check issues that made the Playwright tests fail - keep disabled!)
    • Installs JMeter.
    • Executes the JMeter load tests against the "Test Automation - Big Cartel E-commerce Test store" Landing page, Products page and Cart page.
    • Jmeter tests Generate a dashboard (HTML report) and .jtl results.
    • Uploads artifacts for review (view in GitHub Actions UI).
    • Prints a summary for quick analysis (e.g., avg response time, error rate).
  • ⚠️ Run the JMeter tests locally:

⇡ Return to the Table of Contents

Gotcha's

1. Installing Playwright failed due to an unsupported Node.js version

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
  1. Switch to the new version
  nvm use 18
  1. Set it as the default version
  nvm alias default 18
  1. Verify the Node.js version - Ensure it’s at least v16 or higher.
  node -v
  1. Verify npm version:
  npm -v

Additional steps if the steps above do not resolve it:

  1. 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
  1. 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
  1. Remove the node_modules directory and package-lock.json file:
  rm -rf node_modules package-lock.json
  1. Reinstall dependencies:
  npm install

⇡ Return to the Table of Contents

TO DO / Current Issues

1. Tests falling:

  1. 🚧 "Add to cart" AJAX/XHR blocked by Cloudflare - FIREFOX
  2. 🚧 Playwright tests for checkout and cart pages loading/triggering Cloudflare security checks - FIREFOX

⇡ Return to the Table of Contents

About

This repo contains a POC for Playwright as a test framework for checkout journey and performance tests on the "Test Automation - Big Cartel E-commerce Test store" to showcase the Playwright Test and Apache JMeter Load Test Frameworks with Monocart and Allure reporters to run locally or in Docker using GitHub Action workflows.

Resources

Readme
MIT license
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages