Skip to content

[Improve] Keep rendered content legible across IDE themes #1082

[Improve] Keep rendered content legible across IDE themes

[Improve] Keep rendered content legible across IDE themes #1082

Triggered via pull request August 22, 2026 22:27
Status Failure
Total duration 2m 49s
Artifacts 1

visual-regression.yml

on: pull_request
Fit to window
Zoom out
Zoom in

Annotations

10 errors, 2 warnings, and 1 notice
[chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:10:2 › renders the full welcome screen in the VS Code dark theme: webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx#L39
10) [chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:10:2 › renders the full welcome screen in the VS Code dark theme Error: A snapshot doesn't exist at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-dark.png, writing actual. 37 | } 38 | > 39 | await expect(screen).toHaveScreenshot(`welcome-screen-${theme.name}.png`) | ^ 40 | }) 41 | } 42 | at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:39:3
[chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:10:2 › renders the full welcome screen in the VS Code light theme: webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx#L39
9) [chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:10:2 › renders the full welcome screen in the VS Code light theme Error: A snapshot doesn't exist at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-light.png, writing actual. 37 | } 38 | > 39 | await expect(screen).toHaveScreenshot(`welcome-screen-${theme.name}.png`) | ^ 40 | }) 41 | } 42 | at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:39:3
[chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code high-contrast-light theme: webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx#L124
8) [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code high-contrast-light theme Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('#root').locator('internal:control=component') 551 pixels (ratio 0.01 of all image pixels) are different. Snapshot: accessibility-gallery-resting-high-contrast-light.png Call log: - Expect "toHaveScreenshot(accessibility-gallery-resting-high-contrast-light.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('#root').locator('internal:control=component') - locator resolved to <main data-testid="contrast-gallery" class="w-[488px] space-y-4 rounded-lg border border-vscode-panel-border bg-vscode-editor-background p-4 text-vscode-editor-foreground">…</main> - 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 - 551 pixels (ratio 0.01 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#root').locator('internal:control=component') - locator resolved to <main data-testid="contrast-gallery" class="w-[488px] space-y-4 rounded-lg border border-vscode-panel-border bg-vscode-editor-background p-4 text-vscode-editor-foreground">…</main> - 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 - 551 pixels (ratio 0.01 of all image pixels) are different. 122 | ).rejects.toThrow("Unsupported background image") 123 | > 124 | await expect(component).toHaveScreenshot(`accessibility-gallery-resting-${theme.name}.png`) | ^ 125 | 126 | await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur()) 127 | for ( at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx:124:27
[chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code high-contrast theme: webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx#L124
7) [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code high-contrast theme Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('#root').locator('internal:control=component') 895 pixels (ratio 0.01 of all image pixels) are different. Snapshot: accessibility-gallery-resting-high-contrast.png Call log: - Expect "toHaveScreenshot(accessibility-gallery-resting-high-contrast.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('#root').locator('internal:control=component') - locator resolved to <main data-testid="contrast-gallery" class="w-[488px] space-y-4 rounded-lg border border-vscode-panel-border bg-vscode-editor-background p-4 text-vscode-editor-foreground">…</main> - 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 - 895 pixels (ratio 0.01 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#root').locator('internal:control=component') - locator resolved to <main data-testid="contrast-gallery" class="w-[488px] space-y-4 rounded-lg border border-vscode-panel-border bg-vscode-editor-background p-4 text-vscode-editor-foreground">…</main> - 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 - 895 pixels (ratio 0.01 of all image pixels) are different. 122 | ).rejects.toThrow("Unsupported background image") 123 | > 124 | await expect(component).toHaveScreenshot(`accessibility-gallery-resting-${theme.name}.png`) | ^ 125 | 126 | await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur()) 127 | for ( at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx:124:27
[chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code light theme: webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx#L124
6) [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code light theme Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('#root').locator('internal:control=component') 561 pixels (ratio 0.01 of all image pixels) are different. Snapshot: accessibility-gallery-resting-light.png Call log: - Expect "toHaveScreenshot(accessibility-gallery-resting-light.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('#root').locator('internal:control=component') - locator resolved to <main data-testid="contrast-gallery" class="w-[488px] space-y-4 rounded-lg border border-vscode-panel-border bg-vscode-editor-background p-4 text-vscode-editor-foreground">…</main> - 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 - 561 pixels (ratio 0.01 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#root').locator('internal:control=component') - locator resolved to <main data-testid="contrast-gallery" class="w-[488px] space-y-4 rounded-lg border border-vscode-panel-border bg-vscode-editor-background p-4 text-vscode-editor-foreground">…</main> - 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 - 561 pixels (ratio 0.01 of all image pixels) are different. 122 | ).rejects.toThrow("Unsupported background image") 123 | > 124 | await expect(component).toHaveScreenshot(`accessibility-gallery-resting-${theme.name}.png`) | ^ 125 | 126 | await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur()) 127 | for ( at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx:124:27
[chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code dark theme: webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx#L124
5) [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code dark theme Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('#root').locator('internal:control=component') 552 pixels (ratio 0.01 of all image pixels) are different. Snapshot: accessibility-gallery-resting-dark.png Call log: - Expect "toHaveScreenshot(accessibility-gallery-resting-dark.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('#root').locator('internal:control=component') - locator resolved to <main data-testid="contrast-gallery" class="w-[488px] space-y-4 rounded-lg border border-vscode-panel-border bg-vscode-editor-background p-4 text-vscode-editor-foreground">…</main> - 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 - 552 pixels (ratio 0.01 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('#root').locator('internal:control=component') - locator resolved to <main data-testid="contrast-gallery" class="w-[488px] space-y-4 rounded-lg border border-vscode-panel-border bg-vscode-editor-background p-4 text-vscode-editor-foreground">…</main> - 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 - 552 pixels (ratio 0.01 of all image pixels) are different. 122 | ).rejects.toThrow("Unsupported background image") 123 | > 124 | await expect(component).toHaveScreenshot(`accessibility-gallery-resting-${theme.name}.png`) | ^ 125 | 126 | await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur()) 127 | for ( at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx:124:27
[chromium] › src/components/common/__tests__/RenderedContentContrast.visual.tsx:10:2 › audits rendered content in the VS Code high-contrast-light theme: webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx#L51
4) [chromium] › src/components/common/__tests__/RenderedContentContrast.visual.tsx:10:2 › audits rendered content in the VS Code high-contrast-light theme Error: A snapshot doesn't exist at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast-light.png, writing actual. 49 | await expectContrast(terminal, { background: terminal, label: `${theme.name} terminal text` }) 50 | > 51 | await expect(component).toHaveScreenshot(`rendered-content-${theme.name}.png`) | ^ 52 | }) 53 | } 54 | at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx:51:3
[chromium] › src/components/common/__tests__/RenderedContentContrast.visual.tsx:10:2 › audits rendered content in the VS Code high-contrast theme: webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx#L51
3) [chromium] › src/components/common/__tests__/RenderedContentContrast.visual.tsx:10:2 › audits rendered content in the VS Code high-contrast theme Error: A snapshot doesn't exist at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast.png, writing actual. 49 | await expectContrast(terminal, { background: terminal, label: `${theme.name} terminal text` }) 50 | > 51 | await expect(component).toHaveScreenshot(`rendered-content-${theme.name}.png`) | ^ 52 | }) 53 | } 54 | at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx:51:3
[chromium] › src/components/common/__tests__/RenderedContentContrast.visual.tsx:10:2 › audits rendered content in the VS Code light theme: webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx#L51
2) [chromium] › src/components/common/__tests__/RenderedContentContrast.visual.tsx:10:2 › audits rendered content in the VS Code light theme Error: A snapshot doesn't exist at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-light.png, writing actual. 49 | await expectContrast(terminal, { background: terminal, label: `${theme.name} terminal text` }) 50 | > 51 | await expect(component).toHaveScreenshot(`rendered-content-${theme.name}.png`) | ^ 52 | }) 53 | } 54 | at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx:51:3
[chromium] › src/components/common/__tests__/RenderedContentContrast.visual.tsx:10:2 › audits rendered content in the VS Code dark theme: webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx#L51
1) [chromium] › src/components/common/__tests__/RenderedContentContrast.visual.tsx:10:2 › audits rendered content in the VS Code dark theme Error: A snapshot doesn't exist at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-dark.png, writing actual. 49 | await expectContrast(terminal, { background: terminal, label: `${theme.name} terminal text` }) 50 | > 51 | await expect(component).toHaveScreenshot(`rendered-content-${theme.name}.png`) | ^ 52 | }) 53 | } 54 | at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx:51:3
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/
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/
🎭 Playwright Run Summary
12 failed [chromium] › src/components/common/__tests__/RenderedContentContrast.visual.tsx:10:2 › audits rendered content in the VS Code dark theme [chromium] › src/components/common/__tests__/RenderedContentContrast.visual.tsx:10:2 › audits rendered content in the VS Code light theme [chromium] › src/components/common/__tests__/RenderedContentContrast.visual.tsx:10:2 › audits rendered content in the VS Code high-contrast theme [chromium] › src/components/common/__tests__/RenderedContentContrast.visual.tsx:10:2 › audits rendered content in the VS Code high-contrast-light theme [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code dark theme [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code light theme [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code high-contrast theme [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code high-contrast-light theme [chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:10:2 › renders the full welcome screen in the VS Code dark theme [chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:10:2 › renders the full welcome screen in the VS Code light theme [chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:10:2 › renders the full welcome screen in the VS Code high-contrast theme [chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:10:2 › renders the full welcome screen in the VS Code high-contrast-light theme 30 passed (1.0m)

Artifacts

Produced during runtime
Name Size Digest
webview-visual-regression
1.24 MB
sha256:aa794738afa02cbf4618de2a1bc1f99e0b23e362130c4c6b82ce5646dd3ff1d6