{"id":51314721,"url":"https://github.com/checkly/playwright-reporter-demo","last_synced_at":"2026-07-01T06:30:39.368Z","repository":{"id":343559461,"uuid":"1162658863","full_name":"checkly/playwright-reporter-demo","owner":"checkly","description":"Raccoon Records store using Checkly's Playwright Reporter","archived":false,"fork":false,"pushed_at":"2026-03-27T15:36:52.000Z","size":2648,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-01T08:44:03.256Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://raccoon-records.vercel.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/checkly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-20T14:37:10.000Z","updated_at":"2026-03-12T13:00:30.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/checkly/playwright-reporter-demo","commit_stats":null,"previous_names":["checkly/playwright-reporter-demo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/checkly/playwright-reporter-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkly%2Fplaywright-reporter-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkly%2Fplaywright-reporter-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkly%2Fplaywright-reporter-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkly%2Fplaywright-reporter-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/checkly","download_url":"https://codeload.github.com/checkly/playwright-reporter-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkly%2Fplaywright-reporter-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34995774,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-01T02:00:05.325Z","response_time":130,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-01T06:30:38.633Z","updated_at":"2026-07-01T06:30:39.359Z","avatar_url":"https://github.com/checkly.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Checkly Playwright Reporter + Playwright Check Suites\n\n\u003e Run `npx playwright test` and get a shareable dashboard with every screenshot, video, trace, console log, and network request from your test suite — automatically.\n\nThis repo is a **complete, self-contained example** of two Checkly features:\n\n1. **[Playwright Reporter](https://www.npmjs.com/package/@checkly/playwright-reporter)** — uploads test results (assets, traces, network data) to [Checkly Test Sessions](https://www.checklyhq.com/docs/detect/testing/playwright-reporter/).\n2. **[Playwright Check Suites](https://www.checklyhq.com/docs/detect/synthetic-monitoring/playwright-checks/)** — runs a subset of the same tests as continuous synthetic monitoring from multiple global locations.\n\nIt ships with its own demo app (**Raccoon Records**, a vinyl shop) and a full Playwright test suite. Fork it, add your Checkly credentials, and see your results in the [Checkly dashboard](https://app.checklyhq.com).\n\n---\n\n## What you get\n\n| Feature | Description |\n|---|---|\n| **Test Sessions dashboard** | Pass/fail results, screenshots, videos, and Playwright traces uploaded after every run |\n| **Synthetic monitoring** | Three Playwright Check Suites run production-safe `@monitor` tests every 10 minutes from two regions |\n| **Console and network data** | Extracted from Playwright traces automatically — no extra configuration |\n| **Git context** | Branch, commit SHA, and author auto-detected from CI or local repo |\n| **Secret scrubbing** | API keys and tokens redacted before upload |\n| **Tag-based test selection** | `@monitor`, `@stateful`, `@destructive`, and `@visual` tags separate monitoring from full E2E |\n\n## Quick start\n\n### 1. Clone and install\n\n```bash\ngit clone https://github.com/checkly/checkly-playwright-reporter-example.git\ncd checkly-playwright-reporter-example\nnpm install\nnpx playwright install --with-deps chromium\n```\n\n### 2. Run the tests\n\n```bash\nnpx playwright test --project=chromium\n```\n\nPlaywright auto-starts the demo app through the [`webServer`](https://playwright.dev/docs/test-webserver) config. No separate server process needed.\n\n### 3. Upload results to Checkly\n\n```bash\nexport CHECKLY_API_KEY=cu_xxx\nexport CHECKLY_ACCOUNT_ID=your-account-id\nnpx playwright test --project=chromium\n```\n\nOpen the session URL printed in your terminal to view results in the [Checkly Test Sessions dashboard](https://app.checklyhq.com/test-sessions).\n\n---\n\n## What's in this repo\n\n```\n.\n├── server.js                      # Express API (records, cart, checkout, search)\n├── db.js                          # Database adapter (SQLite local, Turso production)\n├── index.html                     # Raccoon Records — vinyl shop frontend\n├── tests/\n│   ├── api-health.spec.ts         # API endpoint validation\n│   ├── homepage.spec.ts           # Page load, catalog, filters, cart button\n│   ├── product-detail.spec.ts     # Modal open/close, detail display\n│   ├── search-filters.spec.ts     # Search input, genre filters, empty states\n│   ├── cart.spec.ts               # Add to cart, clear, badge updates\n│   ├── checkout.spec.ts           # Order creation, stock decrement\n│   └── visual-regression.spec.ts  # Screenshot comparison baselines\n├── playwright.config.ts           # Playwright config with reporter and projects\n├── checkly.config.ts              # Checkly Check Suite definitions\n├── vercel.json                    # Vercel deployment config\n└── package.json\n```\n\n### The demo app: Raccoon Records\n\nA dark, editorial vinyl shop built with Express and vanilla HTML/CSS/JS. Features:\n\n- **Product catalog** with 8 hand-curated records across genres\n- **Search** by title, artist, or genre with debounced input\n- **Genre filters** as pill buttons\n- **Product detail modal** with descriptions, ratings, and stock levels\n- **Shopping cart** drawer with add, clear, and total\n- **REST API** at `/api/records`, `/api/cart`, `/api/genres`, `/api/checkout`, `/api/health`\n\nRun it standalone with `npm run dev` and visit `http://localhost:3000`.\n\n---\n\n## The test suite\n\n| Test file | Tag | Tests | What it covers |\n|---|---|---|---|\n| `tests/api-health.spec.ts` | `@monitor @api`, `@stateful` | 9 | API health, catalog, search, genres, cart round-trip, latency |\n| `tests/homepage.spec.ts` | `@monitor @core` | 5 | Page load, title, catalog grid, genre filters, cart button |\n| `tests/product-detail.spec.ts` | `@monitor @core` | 5 | Modal open/close, record details, add-to-cart from modal |\n| `tests/search-filters.spec.ts` | `@monitor @search` | 5 | Title search, artist search, empty state, genre filter, reset |\n| `tests/cart.spec.ts` | `@stateful` | 5 | Add to cart, drawer, clear cart, badge updates, close button |\n| `tests/checkout.spec.ts` | `@destructive` | 9 | Order creation, stock changes, validation, full UI checkout |\n| `tests/visual-regression.spec.ts` | `@visual` | 3 | Full-page and component screenshot comparisons |\n\n**Total:** 41 tests across 7 files. Playwright projects represent runtime coverage only: `chromium`, `firefox`, and `mobile-chrome`.\n\n### Monitoring vs. E2E strategy\n\nTest intent tags separate monitoring-safe tests from full E2E flows. Both share the same codebase without runtime conditionals.\n\n| Tag | Purpose | Included in monitoring |\n|---|---|---|\n| `@monitor` | Stable, non-destructive checks | Yes |\n| `@api` | API health and contract checks | Yes, in the API Health suite |\n| `@core` | Critical homepage and product-detail UX | Yes, in the Core UI suite |\n| `@search` | Search and filtering UX | Yes, in the Search \u0026 Filters suite |\n| `@stateful` | Mutates shared app state (cart operations) | No |\n| `@destructive` | Creates irreversible state (orders, stock changes) | No |\n| `@visual` | Screenshot comparison baselines | No |\n\nPlaywright projects stay focused on runtime coverage. Local monitoring runs use `--grep @monitor`, while deployed Checkly suites use `pwTags` to select `@api`, `@core`, or `@search` from the same test files.\n\n---\n\n## Checkly Playwright Check Suites\n\nThis repo defines three [Playwright Check Suites](https://www.checklyhq.com/docs/detect/synthetic-monitoring/playwright-checks/) in `checkly.config.ts`. Each suite runs a tagged subset of production-safe tests as continuous synthetic monitoring.\n\n| Check Suite | Test file | Tests | Description |\n|---|---|---|---|\n| **API Health** | `@api` | 8 | API endpoints, response schemas, latency |\n| **Core UI — Homepage \u0026 Product Detail** | `@core` | 10 | Page load, catalog rendering, modal interactions |\n| **Search \u0026 Filters** | `@search` | 5 | Search input, genre filtering, empty states |\n\n**Schedule:** Every 10 minutes from `eu-west-1` and `us-east-1`.\n\nAll suites reuse the regular `chromium` Playwright project and select their test group with `pwTags`. This keeps browser/device concerns in Playwright and monitoring grouping in Checkly.\n\n### How it works\n\nThe [`checkly`](https://www.npmjs.com/package/checkly) CLI reads `checkly.config.ts`, bundles your Playwright tests, and runs them on Checkly's infrastructure. The config points to your existing `playwright.config.ts` — no separate test files or check definitions needed.\n\n```typescript\n// checkly.config.ts (simplified)\nimport { defineConfig } from 'checkly'\nimport { Frequency } from 'checkly/constructs'\n\nexport default defineConfig({\n  projectName: 'Raccoon Records',\n  logicalId: 'raccoon-records',\n  checks: {\n    playwrightConfigPath: './playwright.config.ts',\n    locations: ['eu-west-1', 'us-east-1'],\n    playwrightChecks: [\n      {\n        name: 'Core UI — Homepage \u0026 Product Detail',\n        logicalId: 'core-ui',\n        pwProjects: ['chromium'],\n        pwTags: ['@core'],\n        frequency: Frequency.EVERY_10M,\n      },\n      // ... more check suites\n    ],\n  },\n})\n```\n\n### Environment variables\n\nThe `ENVIRONMENT_URL` variable controls the base URL for all tests. Set it in the [Checkly environment variables dashboard](https://app.checklyhq.com) to point to your deployed instance. Locally, tests default to `http://localhost:3000`.\n\nWhen Checkly runs the tests, the `CHECKLY` environment variable is set automatically. The Playwright config uses this to skip the `webServer` (tests hit the deployed URL instead) and the reporter (not needed in the monitoring runtime).\n\n### Validate and deploy\n\n```bash\n# Validate checks against your deployed app\nnpx checkly test --record -e ENVIRONMENT_URL=https://your-app.vercel.app\n\n# Deploy to Checkly\nnpx checkly deploy\n```\n\nFor more details, see the [Playwright Check Suite quickstart](https://www.checklyhq.com/docs/quickstarts/playwright-check/) and [configuration reference](https://www.checklyhq.com/docs/detect/synthetic-monitoring/playwright-checks/configuration/).\n\n---\n\n## Reporter configuration\n\nThe Playwright config conditionally loads the [`@checkly/playwright-reporter`](https://www.npmjs.com/package/@checkly/playwright-reporter) to upload test results to [Checkly Test Sessions](https://www.checklyhq.com/docs/detect/testing/playwright-reporter/).\n\n```typescript\n// playwright.config.ts (reporter section)\ncreateChecklyReporter({\n  // Dynamic name — searchable in the Checkly dashboard\n  sessionName: process.env.CI\n    ? `CI — ${process.env.GITHUB_REF_NAME} @ ${process.env.GITHUB_SHA?.slice(0, 7)}`\n    : `Local — ${new Date().toISOString().slice(0, 16)}`,\n\n  // Auto-redact env vars matching SECRET, KEY, TOKEN, PASSWORD\n  scrubbing: { autoDetect: true },\n})\n```\n\n### Asset capture\n\nThe reporter uploads whatever Playwright produces. Enable traces to get console and network data in the dashboard.\n\n```typescript\nuse: {\n  screenshot: 'only-on-failure',  // uploaded on failure\n  video: 'retain-on-failure',     // uploaded on failure\n  trace: 'on',                    // console + network data always captured\n}\n```\n\n---\n\n## CI/CD\n\nAdd these secrets to your CI provider before running Playwright with the Checkly reporter or deploying checks:\n\n| Secret | Purpose |\n|---|---|\n| `CHECKLY_API_KEY` | Authenticates with the Checkly API |\n| `CHECKLY_ACCOUNT_ID` | Identifies the Checkly account |\n\nUse `ENVIRONMENT_URL` in CI or Checkly environments to point tests at the deployed app.\n\n---\n\n## Commands\n\n| Command | Description |\n|---|---|\n| `npm run dev` | Start the demo app at `http://localhost:3000` |\n| `npm test` | Run all Playwright tests (all projects) |\n| `npm run test:monitor` | Run production-safe `@monitor` tests in Chromium |\n| `npm run test:chromium` | Run tests in Chromium only |\n| `npm run test:visual` | Run visual regression tests in Chromium |\n| `npm run test:headed` | Run Chromium tests in headed mode |\n| `npm run test:debug` | Open Playwright Inspector for debugging |\n| `npm run test:ui` | Open Playwright UI mode |\n| `npm run report` | Open the Playwright HTML report |\n| `npm run checkly` | Validate Check Suites with `checkly test` |\n| `npm run checkly:deploy` | Deploy Check Suites to Checkly |\n| `npm run checkly:destroy` | Remove deployed checks from Checkly |\n| `npm run checkly:trigger` | Trigger deployed checks on demand |\n\n---\n\n## Resources\n\n- [`@checkly/playwright-reporter` on npm](https://www.npmjs.com/package/@checkly/playwright-reporter)\n- [`checkly` CLI on npm](https://www.npmjs.com/package/checkly)\n- [Playwright Reporter docs](https://www.checklyhq.com/docs/detect/testing/playwright-reporter/)\n- [Playwright Reporter changelog](https://www.checklyhq.com/docs/detect/testing/playwright-reporter-changelog/)\n- [Playwright Check Suites docs](https://www.checklyhq.com/docs/detect/synthetic-monitoring/playwright-checks/)\n- [Check Suite configuration reference](https://www.checklyhq.com/docs/detect/synthetic-monitoring/playwright-checks/configuration/)\n- [Check Suite environment variables](https://www.checklyhq.com/docs/detect/synthetic-monitoring/playwright-checks/environment-variables/)\n- [Checkly Test Sessions dashboard](https://app.checklyhq.com/test-sessions)\n\n---\n\nBuilt by the [Checkly](https://www.checklyhq.com) team.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheckly%2Fplaywright-reporter-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcheckly%2Fplaywright-reporter-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheckly%2Fplaywright-reporter-demo/lists"}