[Improve] Keep rendered content legible across IDE themes #1108
zoomote[bot]visual-regression.yml
on: pull_request
webview-visual
2m 19s
theme-fixtures
2m 12s
Annotations
10 errors, 2 warnings, and 1 notice
|
[chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:105:2 › supports WCAG text spacing in the VS Code dark theme:
webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx#L115
6) [chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:105:2 › supports WCAG text spacing 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-text-spacing-dark.png, writing actual.
113 | await expect(component.getByRole("button", { name: /import/i })).toBeVisible()
114 | await expectScreenContentToFit(screen)
> 115 | await expect(screen).toHaveScreenshot(`welcome-screen-text-spacing-${theme.name}.png`)
| ^
116 | })
117 | }
118 |
at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:115:3
|
|
[chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:93:2 › reflows the welcome screen at 320px in the VS Code dark theme:
webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx#L102
5) [chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:93:2 › reflows the welcome screen at 320px 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-reflow-dark.png, writing actual.
100 | await expect(component.getByRole("button", { name: /import/i })).toBeVisible()
101 | await expectScreenContentToFit(screen)
> 102 | await expect(screen).toHaveScreenshot(`welcome-screen-reflow-${theme.name}.png`)
| ^
103 | })
104 |
105 | test(`supports WCAG text spacing in the VS Code ${theme.name} theme`, async ({ mount, page }) => {
at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:102: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#L207
4) [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code high-contrast-light theme
Error: A snapshot doesn't exist at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-high-contrast-light.png, writing actual.
205 | label: `${theme.name} input focus indicator against fill`,
206 | })
> 207 | await expect(component).toHaveScreenshot(`accessibility-gallery-focus-${theme.name}.png`)
| ^
208 | })
209 | }
210 |
at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx:207: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#L184
4) [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code high-contrast-light theme
Error: A snapshot doesn't exist at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-high-contrast-light.png, writing actual.
182 | ).rejects.toThrow("Unsupported background image")
183 |
> 184 | await expect(component).toHaveScreenshot(`accessibility-gallery-resting-${theme.name}.png`)
| ^
185 |
186 | await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur())
187 | for (
at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx:184:3
|
|
[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#L207
3) [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code high-contrast theme
Error: A snapshot doesn't exist at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-high-contrast.png, writing actual.
205 | label: `${theme.name} input focus indicator against fill`,
206 | })
> 207 | await expect(component).toHaveScreenshot(`accessibility-gallery-focus-${theme.name}.png`)
| ^
208 | })
209 | }
210 |
at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx:207:3
|
|
[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#L184
3) [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code high-contrast theme
Error: A snapshot doesn't exist at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-high-contrast.png, writing actual.
182 | ).rejects.toThrow("Unsupported background image")
183 |
> 184 | await expect(component).toHaveScreenshot(`accessibility-gallery-resting-${theme.name}.png`)
| ^
185 |
186 | await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur())
187 | for (
at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx:184:3
|
|
[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#L207
2) [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code light theme
Error: A snapshot doesn't exist at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-light.png, writing actual.
205 | label: `${theme.name} input focus indicator against fill`,
206 | })
> 207 | await expect(component).toHaveScreenshot(`accessibility-gallery-focus-${theme.name}.png`)
| ^
208 | })
209 | }
210 |
at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx:207:3
|
|
[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#L184
2) [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code light theme
Error: A snapshot doesn't exist at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-light.png, writing actual.
182 | ).rejects.toThrow("Unsupported background image")
183 |
> 184 | await expect(component).toHaveScreenshot(`accessibility-gallery-resting-${theme.name}.png`)
| ^
185 |
186 | await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur())
187 | for (
at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx:184:3
|
|
[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#L207
1) [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code dark theme
Error: A snapshot doesn't exist at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-dark.png, writing actual.
205 | label: `${theme.name} input focus indicator against fill`,
206 | })
> 207 | await expect(component).toHaveScreenshot(`accessibility-gallery-focus-${theme.name}.png`)
| ^
208 | })
209 | }
210 |
at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx:207:3
|
|
[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#L184
1) [chromium] › src/components/ui/__tests__/AccessibilityContrast.visual.tsx:9:2 › audits representative controls in the VS Code dark theme
Error: A snapshot doesn't exist at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-dark.png, writing actual.
182 | ).rejects.toThrow("Unsupported background image")
183 |
> 184 | await expect(component).toHaveScreenshot(`accessibility-gallery-resting-${theme.name}.png`)
| ^
185 |
186 | await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur())
187 | for (
at /__w/Zoo-Code/Zoo-Code/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx:184:3
|
|
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/
|
|
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
12 failed
[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:93:2 › reflows the welcome screen at 320px in the VS Code dark theme
[chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:105:2 › supports WCAG text spacing in the VS Code dark theme
[chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:93:2 › reflows the welcome screen at 320px in the VS Code light theme
[chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:105:2 › supports WCAG text spacing in the VS Code light theme
[chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:93:2 › reflows the welcome screen at 320px in the VS Code high-contrast theme
[chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:105:2 › supports WCAG text spacing in the VS Code high-contrast theme
[chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:93:2 › reflows the welcome screen at 320px in the VS Code high-contrast-light theme
[chromium] › src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx:105:2 › supports WCAG text spacing in the VS Code high-contrast-light theme
38 passed (1.1m)
|
Artifacts
Produced during runtime
| Name | Size | Digest | |
|---|---|---|---|
|
webview-visual-regression
|
1.05 MB |
sha256:ace8bae0f876b2e9885b4edd5414df1d430167f6536d26d088b7e154af503a0a
|
|