Playwright Test Results

View Playwright test results from GitHub, AWS, or any direct URL

Overview ======= Playwright Test Results Badge is a lightweight Chrome extension that helps you quickly see your Playwright test status directly from your browser toolbar. Version 1.4 introduces full AWS S3 support with comprehensive setup instructions, alongside existing GitHub Pages support, giving you complete flexibility in where you store your test results. Instead of opening CI dashboards or scrolling through logs, you get an instant visual summary of your test results that stays visible and automatically updated. This extension is ideal for: • 👨‍💻 Developers & QA engineers • 🧪 Teams monitoring private CI/CD pipelines • 🎓 Students learning testing or DevOps • 📄 Anyone using Playwright with automated tests Why install this extension? • ✅ Instantly know if your tests passed or failed • ⏱️ Saves time by avoiding CI dashboards and logs • 🔄 Automatically refreshes every 1 minute • 🔒 Private Repo Support: Monitor secure projects using GitHub Pages • 🛡️ Privacy-first: no accounts, no tracking, no external servers What the extension does Live badge on the Chrome toolbar: • 🟩 Green 42 / 0 means all tests passed • 🟥 Red 41 / 1 means one or more tests failed • ⬜ Gray ? means no tests detected (crash, sync error, or empty summary file) This lets you see project health at a glance, even while browsing other sites. Detailed popup view: • 📊 Total number of tests executed • ✅ Passed / ❌ Failed / ⚠️ Flaky counts • 🕒 Last updated timestamp • 🔄 Manual refresh button Quick Setup Guide ============================== Step 1: Create the Summary Reporter ------------------------------ Create "summary-reporter.js" in your project root: const fs = require('fs'); class SummaryReporter { onBegin(config, suite) { this.rootSuite = suite; } onEnd(result) { const summary = { schemaVersion: 1, passed: 0, failed: 0, flaky: 0, total: 0, startTime: new Date().toISOString(), isSummary: true }; if (this.rootSuite) { for (const test of this.rootSuite.allTests()) { const out = test.outcome(); if (out === 'expected') summary.passed++; if (out === 'unexpected') summary.failed++; if (out === 'flaky') summary.flaky++; } } summary.total = summary.passed + summary.failed + summary.flaky; fs.writeFileSync('test-summary.json', JSON.stringify(summary, null, 2)); } } module.exports = SummaryReporter; Step 2: Configure Playwright ------------------------------ Update "playwright.config.ts" to include the reporter: reporters: [ ['./summary-reporter.js'], ['html'], ['list'] ], Step 3: Create CI Workflow (Supports Private Repos) -------------------------------------------- Create ".github/workflows/playwright.yml" with this content: name: Deploy results.json to GitHub Pages on: push: branches: [main] workflow_dispatch: permissions: contents: write pages: write id-token: write jobs: deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Install dependencies run: npm ci - name: Install Playwright run: npx playwright install --with-deps - name: Run Playwright tests run: npx playwright test - name: Commit updated results if: always() run: | git config user.name "github-actions[bot]" git config user.email "github-actions[bot]@users.noreply.github.com" git add test-summary.json git commit -m "Update test summary [skip ci]" || echo "No changes" git push - name: Prepare Pages artifact if: always() run: | mkdir -p public cp test-summary.json public/results.json touch public/.nojekyll - name: Upload artifact if: always() uses: actions/upload-pages-artifact@v3 with: path: public - name: Deploy to Pages id: deployment if: always() uses: actions/deploy-pages@v4 Step 4: Alternative - Deploy to AWS S3 -------------------------------------------- If you prefer AWS, you can deploy the results to an S3 bucket: 1. Create an S3 bucket (e.g., "my-test-results") 2. Configure S3 Bucket Permissions: a) Go to your bucket → Permissions tab b) Block public access → Edit → Uncheck all boxes → Save → Confirm c) Bucket policy → Edit → Paste this policy (replace YOUR-BUCKET-NAME): { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*" } ] } d) CORS configuration → Edit → Paste: [ { "AllowedHeaders": ["*"], "AllowedMethods": ["GET", "HEAD"], "AllowedOrigins": ["*"], "ExposeHeaders": [], "MaxAgeSeconds": 3000 } ] 3. Set up AWS credentials in GitHub Secrets: - AWS_ACCESS_KEY_ID - AWS_SECRET_ACCESS_KEY - AWS_DEFAULT_REGION (e.g., us-east-1) 4. Create `.github/workflows/playwright.yml` with this content: name: Deploy Test Results to AWS S3 on: push: branches: [main] workflow_dispatch: jobs: test-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Install dependencies run: npm ci - name: Install Playwright run: npx playwright install --with-deps - name: Run Playwright tests run: npx playwright test - name: Upload results to AWS S3 if: always() run: | aws s3 cp test-summary.json s3://YOUR-BUCKET-NAME/results.json --acl public-read --content-type application/json env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} AWS_DEFAULT_REGION: ${{ secrets.AWS_DEFAULT_REGION }} 5. Your S3 URL will be: https://YOUR-BUCKET-NAME.s3.REGION.amazonaws.com/results.json Example: https://my-test-results.s3.us-east-2.amazonaws.com/results.json Step 5: Connect & Monitor ---------------------- 1. In the extension popup, paste your deployment URL (GitHub Pages or AWS S3). 2. Click Save! Privacy and Security =================== • 🔐 No accounts or tracking • 🚫 No external analytics servers • 🌍 Data stays in your browser • 📁 Permissions: storage (save URL) and alarms (auto-refresh) License: MIT