feat(dashboard): add local usage statistics dashboard with session detail #1579
visual-regression.yml
on: pull_request
webview-visual
4m 19s
theme-fixtures
2m 50s
extension-host-visual
3m 7s
Annotations
8 errors, 3 warnings, and 2 notices
|
extension-host-visual
Process completed with exit code 1.
|
|
src/visual/electron.visual.ts:212:6 › renders welcome-dark in the real VS Code Extension Host:
apps/vscode-e2e/src/visual/electron.visual.ts#L241
3) src/visual/electron.visual.ts:212:6 › renders welcome-dark in the real VS Code Extension Host ─
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('.part.sidebar')
341 pixels (ratio 0.01 of all image pixels) are different.
Snapshot: electron-welcome-dark-sidebar.png
Call log:
- Expect "toHaveScreenshot(electron-welcome-dark-sidebar.png)" with timeout 60000ms
- verifying given screenshot expectation
- waiting for locator('.part.sidebar')
- locator resolved to <div role="none" id="workbench.parts.sidebar" class="part sidebar left pane-composite-part">…</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- 341 pixels (ratio 0.01 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('.part.sidebar')
- locator resolved to <div role="none" id="workbench.parts.sidebar" class="part sidebar left pane-composite-part">…</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- 341 pixels (ratio 0.01 of all image pixels) are different.
239 | const sidebar = running.page.locator(".part.sidebar")
240 | await expect(sidebar).toBeVisible()
> 241 | await expect(sidebar).toHaveScreenshot(`electron-${scenario.name}-sidebar.png`)
| ^
242 |
243 | if (scenario.webviewSnapshot) {
244 | const webview = running.page.locator('iframe[src*="extensionId=ZooCodeOrganization.zoo-code"]')
at /__w/Zoo-Code/Zoo-Code/apps/vscode-e2e/src/visual/electron.visual.ts:241:26
|
|
src/visual/electron.visual.ts:212:6 › renders welcome-dark in the real VS Code Extension Host:
apps/vscode-e2e/src/visual/electron.visual.ts#L241
2) src/visual/electron.visual.ts:212:6 › renders welcome-dark in the real VS Code Extension Host ─
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('.part.sidebar')
341 pixels (ratio 0.01 of all image pixels) are different.
Snapshot: electron-welcome-dark-sidebar.png
Call log:
- Expect "toHaveScreenshot(electron-welcome-dark-sidebar.png)" with timeout 60000ms
- verifying given screenshot expectation
- waiting for locator('.part.sidebar')
- locator resolved to <div role="none" id="workbench.parts.sidebar" class="part sidebar left pane-composite-part">…</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- 341 pixels (ratio 0.01 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('.part.sidebar')
- locator resolved to <div role="none" id="workbench.parts.sidebar" class="part sidebar left pane-composite-part">…</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- 341 pixels (ratio 0.01 of all image pixels) are different.
239 | const sidebar = running.page.locator(".part.sidebar")
240 | await expect(sidebar).toBeVisible()
> 241 | await expect(sidebar).toHaveScreenshot(`electron-${scenario.name}-sidebar.png`)
| ^
242 |
243 | if (scenario.webviewSnapshot) {
244 | const webview = running.page.locator('iframe[src*="extensionId=ZooCodeOrganization.zoo-code"]')
at /__w/Zoo-Code/Zoo-Code/apps/vscode-e2e/src/visual/electron.visual.ts:241:26
|
|
src/visual/electron.visual.ts:212:6 › renders welcome-dark in the real VS Code Extension Host:
apps/vscode-e2e/src/visual/electron.visual.ts#L241
1) src/visual/electron.visual.ts:212:6 › renders welcome-dark in the real VS Code Extension Host ─
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('.part.sidebar')
341 pixels (ratio 0.01 of all image pixels) are different.
Snapshot: electron-welcome-dark-sidebar.png
Call log:
- Expect "toHaveScreenshot(electron-welcome-dark-sidebar.png)" with timeout 60000ms
- verifying given screenshot expectation
- waiting for locator('.part.sidebar')
- locator resolved to <div role="none" id="workbench.parts.sidebar" class="part sidebar left pane-composite-part">…</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- 341 pixels (ratio 0.01 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('.part.sidebar')
- locator resolved to <div role="none" id="workbench.parts.sidebar" class="part sidebar left pane-composite-part">…</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- 341 pixels (ratio 0.01 of all image pixels) are different.
239 | const sidebar = running.page.locator(".part.sidebar")
240 | await expect(sidebar).toBeVisible()
> 241 | await expect(sidebar).toHaveScreenshot(`electron-${scenario.name}-sidebar.png`)
| ^
242 |
243 | if (scenario.webviewSnapshot) {
244 | const webview = running.page.locator('iframe[src*="extensionId=ZooCodeOrganization.zoo-code"]')
at /__w/Zoo-Code/Zoo-Code/apps/vscode-e2e/src/visual/electron.visual.ts:241:26
|
|
webview-visual
Process completed with exit code 1.
|
|
[chromium] › src/components/dashboard/__tests__/UsageHeatmap.visual.tsx:7:1 › renders the 60-day usage heatmap in the VS Code dark theme:
webview-ui/src/components/dashboard/__tests__/UsageHeatmap.visual.tsx#L18
3) [chromium] › src/components/dashboard/__tests__/UsageHeatmap.visual.tsx:7:1 › renders the 60-day usage heatmap in the VS Code dark theme
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('#root')
Expected an image 520px by 191px, received 520px by 223px. 53654 pixels (ratio 0.47 of all image pixels) are different.
Snapshot: usage-heatmap-dark.png
Call log:
- Expect "toHaveScreenshot(usage-heatmap-dark.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('#root')
- locator resolved to <div id="root">…</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 520px by 191px, received 520px by 223px. 53654 pixels (ratio 0.47 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('#root')
- locator resolved to <div id="root">…</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 520px by 191px, received 520px by 223px. 53654 pixels (ratio 0.47 of all image pixels) are different.
16 | await expect(component.getByRole("img", { name: "Daily Activity" })).toBeVisible()
17 |
> 18 | await expect(component).toHaveScreenshot("usage-heatmap-dark.png")
| ^
19 | })
20 |
at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/dashboard/__tests__/UsageHeatmap.visual.tsx:18:26
|
|
[chromium] › src/components/dashboard/__tests__/DashboardView.visual.tsx:185:1 › renders the dashboard with summary:
webview-ui/src/components/dashboard/__tests__/DashboardView.visual.tsx#L234
2) [chromium] › src/components/dashboard/__tests__/DashboardView.visual.tsx:185:1 › renders the dashboard with summary, heatmap, breakdown, and tasks in the VS Code dark theme
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('#root')
Expected an image 520px by 360px, received 520px by 392px. 18469 pixels (ratio 0.10 of all image pixels) are different.
Snapshot: dashboard-view-dark.png
Call log:
- Expect "toHaveScreenshot(dashboard-view-dark.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('#root')
- locator resolved to <div id="root">…</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 520px by 360px, received 520px by 392px. 18469 pixels (ratio 0.10 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('#root')
- locator resolved to <div id="root">…</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 520px by 360px, received 520px by 392px. 18469 pixels (ratio 0.10 of all image pixels) are different.
232 | })
233 |
> 234 | await expect(component).toHaveScreenshot("dashboard-view-dark.png")
| ^
235 | })
236 |
at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/dashboard/__tests__/DashboardView.visual.tsx:234:26
|
|
[chromium] › src/components/dashboard/__tests__/DashboardSummary.visual.tsx:8:1 › renders the summary cards with token and cost totals in the VS Code dark theme:
webview-ui/src/components/dashboard/__tests__/DashboardSummary.visual.tsx#L25
1) [chromium] › src/components/dashboard/__tests__/DashboardSummary.visual.tsx:8:1 › renders the summary cards with token and cost totals in the VS Code dark theme
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('#root')
Expected an image 520px by 249px, received 520px by 281px. 18530 pixels (ratio 0.13 of all image pixels) are different.
Snapshot: dashboard-summary-dark.png
Call log:
- Expect "toHaveScreenshot(dashboard-summary-dark.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('#root')
- locator resolved to <div id="root">…</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 520px by 249px, received 520px by 281px. 18530 pixels (ratio 0.13 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('#root')
- locator resolved to <div id="root">…</div>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 520px by 249px, received 520px by 281px. 18530 pixels (ratio 0.13 of all image pixels) are different.
23 | await expect(component.getByText("Cost")).toBeVisible()
24 |
> 25 | await expect(component).toHaveScreenshot("dashboard-summary-dark.png")
| ^
26 | })
27 |
at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/dashboard/__tests__/DashboardSummary.visual.tsx:25:26
|
|
theme-fixtures
Node.js 20 is deprecated. The following actions target Node.js 20 but are being forced to run on Node.js 24: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830, actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5, actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020, pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/
|
|
extension-host-visual
Node.js 20 is deprecated. The following actions target Node.js 20 but are being forced to run on Node.js 24: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830, actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5, actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020, actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02, pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/
|
|
webview-visual
Node.js 20 is deprecated. The following actions target Node.js 20 but are being forced to run on Node.js 24: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830, actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5, actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020, actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02, codecov/codecov-action@b9fd7d16f6d7d1b5d2bec1a2887e65ceed900238, pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/
|
|
🎭 Playwright Run Summary
3 failed
src/visual/electron.visual.ts:212:6 › renders welcome-dark in the real VS Code Extension Host ──
src/visual/electron.visual.ts:212:6 › renders welcome-dark in the real VS Code Extension Host ──
src/visual/electron.visual.ts:212:6 › renders welcome-dark in the real VS Code Extension Host ──
6 did not run
|
|
🎭 Playwright Run Summary
3 failed
[chromium] › src/components/dashboard/__tests__/DashboardSummary.visual.tsx:8:1 › renders the summary cards with token and cost totals in the VS Code dark theme
[chromium] › src/components/dashboard/__tests__/DashboardView.visual.tsx:185:1 › renders the dashboard with summary, heatmap, breakdown, and tasks in the VS Code dark theme
[chromium] › src/components/dashboard/__tests__/UsageHeatmap.visual.tsx:7:1 › renders the 60-day usage heatmap in the VS Code dark theme
53 passed (3.1m)
|
Artifacts
Produced during runtime
| Name | Size | Digest | |
|---|---|---|---|
|
extension-host-visual-regression
|
1.47 MB |
sha256:2d178c4d8e222d0c2a98da2a0eef50563d6ee4dec8d3b4eb7104083f0022245c
|
|
|
webview-visual-regression
|
35.1 MB |
sha256:ff969d42adab4b2848e56e1362e9620bd09c154dd606fea1353b66a5706d6fbd
|
|