diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 664f7956..546ab9d5 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -47,6 +47,9 @@ jobs: - name: Accessibility tests run: pnpm test:accessibility + - name: Visual regression tests + run: pnpm test:visual + - name: Upload Playwright report if: failure() uses: actions/upload-artifact@v4 diff --git a/apps/docs/playwright.config.ts b/apps/docs/playwright.config.ts index ced009fe..b6ee86a4 100644 --- a/apps/docs/playwright.config.ts +++ b/apps/docs/playwright.config.ts @@ -10,7 +10,7 @@ export default defineConfig({ reporter: process.env.CI ? [['html'], ['list']] : 'list', expect: { toHaveScreenshot: { - maxDiffPixels: 100, + maxDiffPixelRatio: 0.03, }, }, webServer: { diff --git a/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/button-types.png b/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/button-types.png index 189c36fc..84c3571f 100644 Binary files a/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/button-types.png and b/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/button-types.png differ diff --git a/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/table-basic.png b/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/table-basic.png index 8e129b23..2d8d609f 100644 Binary files a/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/table-basic.png and b/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/table-basic.png differ diff --git a/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/transfer-search.png b/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/transfer-search.png index cdeb26f0..ee58b800 100644 Binary files a/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/transfer-search.png and b/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/transfer-search.png differ diff --git a/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/upload-list.png b/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/upload-list.png index d349d2df..2b233c65 100644 Binary files a/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/upload-list.png and b/apps/docs/tests/visual/__screenshots__/feedback.visual.spec.ts/upload-list.png differ diff --git a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/button-disabled.png b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/button-disabled.png index ca3d6c66..540796e2 100644 Binary files a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/button-disabled.png and b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/button-disabled.png differ diff --git a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/button-more-types.png b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/button-more-types.png index abb53a29..06b13d42 100644 Binary files a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/button-more-types.png and b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/button-more-types.png differ diff --git a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/cascader-default-value.png b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/cascader-default-value.png index e8b9e716..30450388 100644 Binary files a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/cascader-default-value.png and b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/cascader-default-value.png differ diff --git a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/cascader-disabled-options.png b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/cascader-disabled-options.png index 08871424..5a66327f 100644 Binary files a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/cascader-disabled-options.png and b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/cascader-disabled-options.png differ diff --git a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/date-picker-disabled.png b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/date-picker-disabled.png index 17f56664..500e5ea5 100644 Binary files a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/date-picker-disabled.png and b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/date-picker-disabled.png differ diff --git a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/form-size-alignment.png b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/form-size-alignment.png index 86d6d15e..fca7f51f 100644 Binary files a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/form-size-alignment.png and b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/form-size-alignment.png differ diff --git a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/table-row-selection.png b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/table-row-selection.png index fb2fccfb..28c0859a 100644 Binary files a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/table-row-selection.png and b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/table-row-selection.png differ diff --git a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/time-picker-controlled.png b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/time-picker-controlled.png index e7ce3eaa..0ff7f1bf 100644 Binary files a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/time-picker-controlled.png and b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/time-picker-controlled.png differ diff --git a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/tree-selectable.png b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/tree-selectable.png index 604c906a..a359a571 100644 Binary files a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/tree-selectable.png and b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/tree-selectable.png differ diff --git a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/upload-dragger.png b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/upload-dragger.png index 0614b360..a42d048b 100644 Binary files a/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/upload-dragger.png and b/apps/docs/tests/visual/__screenshots__/interaction.visual.spec.ts/upload-dragger.png differ diff --git a/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-inline-navigation.png b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-inline-navigation.png index b707a520..e359b7da 100644 Binary files a/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-inline-navigation.png and b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-inline-navigation.png differ diff --git a/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-local-contrast-theme.png b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-local-contrast-theme.png index f78c43f7..34f82b5f 100644 Binary files a/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-local-contrast-theme.png and b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-local-contrast-theme.png differ diff --git a/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-variants-default.png b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-variants-default.png index 2207d861..e5337ff9 100644 Binary files a/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-variants-default.png and b/apps/docs/tests/visual/__screenshots__/menu.visual.spec.ts/menu-variants-default.png differ diff --git a/apps/docs/tests/visual/__screenshots__/selectors.visual.spec.ts/select-multiple.png b/apps/docs/tests/visual/__screenshots__/selectors.visual.spec.ts/select-multiple.png index cd6908ba..9bb8f442 100644 Binary files a/apps/docs/tests/visual/__screenshots__/selectors.visual.spec.ts/select-multiple.png and b/apps/docs/tests/visual/__screenshots__/selectors.visual.spec.ts/select-multiple.png differ diff --git a/apps/docs/tests/visual/feedback.visual.spec.ts b/apps/docs/tests/visual/feedback.visual.spec.ts index 134f8cf9..58de19d6 100644 --- a/apps/docs/tests/visual/feedback.visual.spec.ts +++ b/apps/docs/tests/visual/feedback.visual.spec.ts @@ -4,8 +4,8 @@ import { gotoComponent, openFromDemo, previewByTitle, scrollDemoIntoView } from test.describe('feedback and data visuals', () => { test('button types', async ({ page }) => { await gotoComponent(page, 'button'); - await scrollDemoIntoView(page, 'Type'); - await expect(previewByTitle(page, 'Type')).toHaveScreenshot('button-types.png'); + await scrollDemoIntoView(page, 'Variant'); + await expect(previewByTitle(page, 'Variant')).toHaveScreenshot('button-types.png'); }); test('modal open state', async ({ page }) => { diff --git a/apps/docs/tests/visual/interaction.visual.spec.ts b/apps/docs/tests/visual/interaction.visual.spec.ts index b87009dc..06ca86f2 100644 --- a/apps/docs/tests/visual/interaction.visual.spec.ts +++ b/apps/docs/tests/visual/interaction.visual.spec.ts @@ -4,8 +4,8 @@ import { gotoComponent, openFromDemo, previewByTitle, scrollDemoIntoView } from test.describe('popup and interaction visuals', () => { test('button more types', async ({ page }) => { await gotoComponent(page, 'button'); - await scrollDemoIntoView(page, 'More Types'); - await expect(previewByTitle(page, 'More Types')).toHaveScreenshot('button-more-types.png'); + await scrollDemoIntoView(page, 'Semantic Colors'); + await expect(previewByTitle(page, 'Semantic Colors')).toHaveScreenshot('button-more-types.png'); }); test('button disabled states', async ({ page }) => { @@ -81,19 +81,25 @@ test.describe('popup and interaction visuals', () => { test('form size alignment', async ({ page }) => { await gotoComponent(page, 'form'); await scrollDemoIntoView(page, 'Size Alignment'); - await expect(previewByTitle(page, 'Size Alignment')).toHaveScreenshot('form-size-alignment.png'); + await expect(previewByTitle(page, 'Size Alignment')).toHaveScreenshot( + 'form-size-alignment.png' + ); }); test('cascader default value', async ({ page }) => { await gotoComponent(page, 'cascader'); await scrollDemoIntoView(page, 'Default Value'); - await expect(previewByTitle(page, 'Default Value')).toHaveScreenshot('cascader-default-value.png'); + await expect(previewByTitle(page, 'Default Value')).toHaveScreenshot( + 'cascader-default-value.png' + ); }); test('cascader disabled options', async ({ page }) => { await gotoComponent(page, 'cascader'); await scrollDemoIntoView(page, 'Disabled Options'); - await expect(previewByTitle(page, 'Disabled Options')).toHaveScreenshot('cascader-disabled-options.png'); + await expect(previewByTitle(page, 'Disabled Options')).toHaveScreenshot( + 'cascader-disabled-options.png' + ); }); test('time picker controlled', async ({ page }) => {