diff --git a/.github/workflows/core.yml b/.github/workflows/core.yml
index 888d2803..c7c7e582 100644
--- a/.github/workflows/core.yml
+++ b/.github/workflows/core.yml
@@ -109,5 +109,13 @@ jobs:
working-directory: core
- name: Test
run: pnpm --filter @haiilo/catalyst run test
+ - name: Upload screenshot artifacts
+ if: failure()
+ uses: actions/upload-artifact@v4
+ with:
+ name: screenshot-diffs
+ path: core/.vitest-attachments/
+ if-no-files-found: ignore
+ include-hidden-files: true
- name: E2E Test
run: pnpm --filter @haiilo/catalyst run test:e2e
diff --git a/core/eslint.config.mjs b/core/eslint.config.mjs
index dd645e1e..5825d064 100644
--- a/core/eslint.config.mjs
+++ b/core/eslint.config.mjs
@@ -83,6 +83,7 @@ export default defineConfig([
'**/stencil.config.ts',
'**/playwright.config.ts',
'**/vitest-setup-plugin.ts',
- '**/vitest.config.ts'
+ '**/vitest.config.ts',
+ '**/vitest-setup-screenshots.ts'
])
]);
diff --git a/core/package.json b/core/package.json
index 39a18553..4461a252 100644
--- a/core/package.json
+++ b/core/package.json
@@ -73,6 +73,7 @@
"@types/toastify-js": "^1.12.3",
"@typescript-eslint/eslint-plugin": "8.52.0",
"@typescript-eslint/parser": "8.52.0",
+ "@vitest/browser-playwright": "4.1.5",
"eslint": "9.39.2",
"eslint-config-prettier": "9.1.2",
"prettier": "3.7.4",
diff --git a/core/src/components/cat-alert/__screenshots__/cat-alert.screenshot.tsx/cat-alert-screenshot-renders-with-success-color-1-chromium.png b/core/src/components/cat-alert/__screenshots__/cat-alert.screenshot.tsx/cat-alert-screenshot-renders-with-success-color-1-chromium.png
new file mode 100644
index 00000000..c1b153c4
Binary files /dev/null and b/core/src/components/cat-alert/__screenshots__/cat-alert.screenshot.tsx/cat-alert-screenshot-renders-with-success-color-1-chromium.png differ
diff --git a/core/src/components/cat-alert/cat-alert.screenshot.tsx b/core/src/components/cat-alert/cat-alert.screenshot.tsx
new file mode 100644
index 00000000..f4e5e0ff
--- /dev/null
+++ b/core/src/components/cat-alert/cat-alert.screenshot.tsx
@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+import { render, h } from '@stencil/vitest';
+
+describe('cat-alert screenshot', () => {
+ it('renders with success color', async () => {
+ const { root } = await render(
+
+
+ Lorem ipsum dolor dolore magna sit amet.
+
+
+ );
+ await expect(root).toMatchScreenshot();
+ });
+});
diff --git a/core/src/components/cat-button/__screenshots__/cat-button.screenshot.tsx/cat-button-matches-screenshot-1-chromium.png b/core/src/components/cat-button/__screenshots__/cat-button.screenshot.tsx/cat-button-matches-screenshot-1-chromium.png
new file mode 100644
index 00000000..79571163
Binary files /dev/null and b/core/src/components/cat-button/__screenshots__/cat-button.screenshot.tsx/cat-button-matches-screenshot-1-chromium.png differ
diff --git a/core/src/components/cat-button/cat-button.screenshot.tsx b/core/src/components/cat-button/cat-button.screenshot.tsx
new file mode 100644
index 00000000..56c4f3cc
--- /dev/null
+++ b/core/src/components/cat-button/cat-button.screenshot.tsx
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import { render, h } from '@stencil/vitest';
+
+describe('cat-button', () => {
+ it('matches screenshot', async () => {
+ const { root } = await render(Test);
+ await expect(root).toMatchScreenshot();
+ });
+});
diff --git a/core/vitest-setup-screenshots.ts b/core/vitest-setup-screenshots.ts
new file mode 100644
index 00000000..95421067
--- /dev/null
+++ b/core/vitest-setup-screenshots.ts
@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import './dist/catalyst/catalyst.css';
+
+beforeAll(async () => {
+ // Load the lazy-loader for this project
+ await import('./dist/catalyst/catalyst.esm.js');
+});
+
+export {};
diff --git a/core/vitest.config.mts b/core/vitest.config.mts
index 1d1e4450..2fd00ffc 100644
--- a/core/vitest.config.mts
+++ b/core/vitest.config.mts
@@ -1,5 +1,6 @@
import { defineVitestConfig } from '@stencil/vitest/config';
import { stencilVitestPlugin } from '@stencil/vitest/plugin';
+import { playwright } from '@vitest/browser-playwright';
export default defineVitestConfig({
stencilConfig: './stencil.config.ts',
@@ -14,6 +15,38 @@ export default defineVitestConfig({
include: ['src/**/*.spec.{ts,tsx}'],
setupFiles: ['./vitest-setup-plugin.ts']
}
+ },
+ // Browser tests
+ {
+ test: {
+ name: 'browser',
+ include: ['src/**/*.screenshot.{ts,tsx}'],
+ setupFiles: ['./vitest-setup-screenshots.ts'],
+ browser: {
+ enabled: true,
+ provider: playwright(),
+ headless: true,
+ instances: [{ browser: 'chromium' }],
+ expect: {
+ toMatchScreenshot: {
+ comparatorName: 'pixelmatch',
+ comparatorOptions: {
+ threshold: 0.5,
+ allowedMismatchedPixels: 100
+ },
+ resolveScreenshotPath: ({
+ arg,
+ browserName,
+ ext,
+ testFileName,
+ screenshotDirectory,
+ testFileDirectory,
+ root
+ }) => `${root}/${testFileDirectory}/${screenshotDirectory}/${testFileName}/${arg}-${browserName}${ext}`
+ }
+ }
+ }
+ }
}
]
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8e56d4d3..ae576022 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -259,6 +259,9 @@ importers:
'@typescript-eslint/parser':
specifier: 8.52.0
version: 8.52.0(eslint@9.39.2(jiti@2.7.0))(typescript@5.9.3)
+ '@vitest/browser-playwright':
+ specifier: 4.1.5
+ version: 4.1.5(playwright@1.59.1)(vite@7.3.2(@types/node@20.19.40)(jiti@2.7.0)(less@4.6.4)(sass-embedded@1.99.0)(sass@1.99.0))(vitest@4.1.5)
eslint:
specifier: 9.39.2
version: 9.39.2(jiti@2.7.0)
@@ -7293,7 +7296,6 @@ snapshots:
- msw
- utf-8-validate
- vite
- optional: true
'@vitest/browser@4.1.5(vite@7.3.2(@types/node@20.19.40)(jiti@2.7.0)(less@4.6.4)(sass-embedded@1.99.0)(sass@1.97.3))(vitest@4.1.5(@types/node@20.19.40)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(@vitest/ui@4.1.5)(jsdom@27.4.0)(vite@7.3.2(@types/node@20.19.40)(jiti@2.7.0)(less@4.6.4)(sass-embedded@1.99.0)(sass@1.97.3)))':
dependencies:
@@ -7328,7 +7330,6 @@ snapshots:
- msw
- utf-8-validate
- vite
- optional: true
'@vitest/coverage-v8@4.1.5(@vitest/browser@4.1.5)(vitest@4.1.5)':
dependencies: