feat: add per-project quality view with flakiness/failure trends by Copilot · Pull Request #54 · PhenX/playwright-dashboard

Copilot · 2026-05-26T07:32:28Z

Adds a Quality page (/projects/[id]/quality) focused on test reliability and stability metrics, complementing the existing Performance page (speed/duration).

Backend

GET /api/projects/[id]/quality — Returns per-run trend data (flaky count, failure count, rates) and a stability summary (overall pass/flaky/failure rates, failure-free streak)
GET /api/projects/[id]/flaky-tests — Returns top 20 flaky tests (passed after retries) and top 20 failing tests with stats, plus count of never-failing tests

Frontend

QualityTrendChart.vue — Dual-mode chart component (unovis) showing either flakiness or failure trends as stacked bars + rate line overlay
quality.vue page with:
- Stability summary cards (pass rate, flaky rate, failure rate, failure-free streak, never-failing count)
- Flakiness trend chart
- Failure trend chart
- Top flaky tests table (ranked by flaky count)
- Top failing tests table (ranked by failure count, with truncated last error)
Sidebar nav entry with i-lucide-shield-check icon between Performance and Edit

Types

Added QualityTrendPoint, QualitySummary, QualityData, FlakyTest, FailingTest, FlakyTestsData interfaces

Documentation & Tests

docs/api.md — Added full reference for both new endpoints with query parameters, response shapes, and flakiness definition
tests/quality-api.spec.ts — 10 new API tests covering trend data shape, chronological ordering, summary stats, flaky/failing test detection, query parameter handling, and 404 responses
Demo fixtures — Added quality.json and flaky-tests.json for all 3 demo projects (public/demo/api/projects/{1,2,3}/) with realistic data, and updated demo-fetch.client.ts to map the 6 new endpoints

No schema changes required — uses existing testRuns.flakyTests, testRunsCases.retries, and testRunsCases.status fields.

…tic tests Agent-Logs-Url: https://github.com/PhenX/playwright-dashboard/sessions/02d248ba-bcc3-42d9-9b14-a31bd1ade33c Co-authored-by: PhenX <42170+PhenX@users.noreply.github.com>

PhenX · 2026-05-26T12:46:02Z

@copilot update the docs, tests, demo, do it each time a new public facing feature is added or modified

Agent-Logs-Url: https://github.com/PhenX/playwright-dashboard/sessions/44454576-890c-4e4d-8479-b7e2d7ec8efc Co-authored-by: PhenX <42170+PhenX@users.noreply.github.com>

Copilot · 2026-05-26T12:52:58Z

@copilot update the docs, tests, demo, do it each time a new public facing feature is added or modified

Done in commit 7216585:

Docs (docs/api.md): added full reference for GET /api/projects/[id]/quality and GET /api/projects/[id]/flaky-tests with request params, response shapes, and flakiness definition
Tests (tests/quality-api.spec.ts): 10 new API tests covering trend data shape, chronological ordering, summary stats, flaky/failing test detection, the runs and limit query params, and 404 handling for non-existent projects
Demo (public/demo/api/projects/{1,2,3}/quality.json + flaky-tests.json): 6 fixture files with realistic data for all 3 demo projects, and the demo-fetch.client.ts plugin updated to map all 6 new endpoints

Copilot

Pull request overview

Adds a per-project Quality view to complement the existing performance insights, including new backend endpoints for stability/flakiness analytics, a new UI page and chart component, demo-mode fixtures/mapping, API types, docs, and Playwright API tests.

Changes:

Added two project-level API endpoints: /quality (trend + summary) and /flaky-tests (ranked flaky/failing tests + counts).
Added new Quality page (/projects/[id]/quality) with summary cards, trend charts, and top flaky/failing test tables, plus sidebar navigation entry.
Added API types, documentation, demo fixtures/mapping, and API test coverage for the new endpoints.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
docs/api.md	Documents the new `/quality` and `/flaky-tests` endpoints, query params, and response shapes.
application/types/api.ts	Adds shared TypeScript interfaces for the new quality/flakiness API responses.
application/tests/quality-api.spec.ts	Adds API-level tests for quality trend/summary and flaky/failing detection + query params + 404s.
application/tests/demo-generate.spec.ts	Extends demo-generation assertions to include the new endpoints and fixture files.
application/server/api/projects/[id]/quality.get.ts	Implements quality trend + aggregate summary endpoint based on recent runs.
application/server/api/projects/[id]/flaky-tests.get.ts	Implements flaky/failing test aggregation across recent runs.
application/public/demo/api/projects/1/quality.json	Adds demo fixture response for project 1 quality trend/summary.
application/public/demo/api/projects/1/flaky-tests.json	Adds demo fixture response for project 1 flaky/failing tests.
application/public/demo/api/projects/2/quality.json	Adds demo fixture response for project 2 quality trend/summary.
application/public/demo/api/projects/2/flaky-tests.json	Adds demo fixture response for project 2 flaky/failing tests.
application/public/demo/api/projects/3/quality.json	Adds demo fixture response for project 3 quality trend/summary.
application/public/demo/api/projects/3/flaky-tests.json	Adds demo fixture response for project 3 flaky/failing tests.
application/app/plugins/demo-fetch.client.ts	Maps the new API endpoints to the new demo JSON fixtures.
application/app/pages/projects/[id]/quality.vue	Adds the Quality page UI (summary cards, charts, and tables).
application/app/layouts/default.vue	Adds “Quality” navigation item in the project sidebar menu.
application/app/components/QualityTrendChart.vue	Adds the chart component for flakiness/failure trend visualization.

+
+  const runIds = recentRuns.map(r => r.id)
+  if (runIds.length === 0) {
+    return []


+    // Failed
+    if (row.status === 'failed' || row.status === 'timedOut') {
+      entry.failureCount++
+      if (row.error) {
+        entry.lastError = row.error
+      }


+  // Count tests that never failed
+  const neverFailed = Array.from(testCaseMap.values()).filter(t => t.failureCount === 0 && t.flakyCount === 0).length
+
+  return {
+    flakyTests,
+    failingTests,
+    neverFailed,
+    totalTestCases: testCaseMap.size


+  return props.data.map(point => ({
+    date: new Date(point.startTime),
+    flakyTests: point.flakyTests,
+    failedTests: point.failedTests,
+    totalTests: point.totalTests,
+    failureRate: point.failureRate,
+    flakyRate: point.flakyRate,
+    status: point.status
+  }))


PhenX · 2026-05-26T14:45:32Z

@copilot apply code suggestions

…dChart - Return consistent object shape when no runs found (instead of []) - Track lastFailureDate to ensure lastError is from the most recent failure - Fix neverFailed to only check failureCount === 0 (not also flakyCount) - Sort chartData by date in QualityTrendChart for consistent rendering

Copilot · 2026-05-26T14:48:38Z

@copilot apply code suggestions

Applied all 4 suggestions in the latest commit:

Empty runs → consistent shape: now returns { flakyTests: [], failingTests: [], neverFailed: 0, totalTestCases: 0 } instead of []
lastError from most recent failure: tracks lastFailureDate and only updates lastError when the current row's run is newer
neverFailed definition: now checks only failureCount === 0 (flaky tests are still "never failed")
Chart chronological sort: chartData is sorted by date ascending before rendering

feat: add quality view with flakiness/failure trends and top problema…

70f0e1f

…tic tests Agent-Logs-Url: https://github.com/PhenX/playwright-dashboard/sessions/02d248ba-bcc3-42d9-9b14-a31bd1ade33c Co-authored-by: PhenX <42170+PhenX@users.noreply.github.com>

Copilot AI assigned Copilot and PhenX May 26, 2026

Copilot created this pull request from a session on behalf of PhenX May 26, 2026 07:32 View session

Copilot started work on behalf of PhenX May 26, 2026 12:46 View session

docs/tests/demo: add quality endpoint docs, API tests, and demo fixtures

7216585

Agent-Logs-Url: https://github.com/PhenX/playwright-dashboard/sessions/44454576-890c-4e4d-8479-b7e2d7ec8efc Co-authored-by: PhenX <42170+PhenX@users.noreply.github.com>

Copilot AI requested a review from PhenX May 26, 2026 13:09

Copilot finished work on behalf of PhenX May 26, 2026 13:09

PhenX requested a review from Copilot May 26, 2026 14:38

Copilot started reviewing on behalf of PhenX May 26, 2026 14:38 View session

Copilot AI reviewed May 26, 2026

View reviewed changes

Copilot started work on behalf of PhenX May 26, 2026 14:45 View session

Copilot finished work on behalf of PhenX May 26, 2026 14:49

Copilot started work on behalf of PhenX May 26, 2026 14:56 View session

Copilot finished work on behalf of PhenX May 26, 2026 15:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add per-project quality view with flakiness/failure trends#54

feat: add per-project quality view with flakiness/failure trends#54
Copilot wants to merge 3 commits into
mainfrom
copilot/add-quality-view-trends

Copilot AI commented May 26, 2026 •

edited

Loading

Uh oh!

PhenX commented May 26, 2026

Uh oh!

Copilot AI commented May 26, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

PhenX commented May 26, 2026

Uh oh!

Copilot AI commented May 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

Copilot AI commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Backend

Frontend

Types

Documentation & Tests

Uh oh!

PhenX commented May 26, 2026

Uh oh!

Copilot AI commented May 26, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

PhenX commented May 26, 2026

Uh oh!

Copilot AI commented May 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented May 26, 2026 •

edited

Loading