Add visual testing

Author: Taucher2003

.gitignore

@@ -261,4 +261,6 @@ sketch
 .history
 .ionide
 
-# End of https://www.toptal.com/developers/gitignore/api/jetbrains+all,visualstudiocode,node,react
+# End of https://www.toptal.com/developers/gitignore/api/jetbrains+all,visualstudiocode,node,react
+
+__snapshots__/__diff_output__/

.gitlab-ci.yml

@@ -25,4 +25,8 @@ storybook:test:
     - npm ci
     - npm run storybook:dev &
     - curl --fail -sv --retry 30 --retry-delay 3 --head --retry-all-errors http://127.0.0.1:6006
-    - npm run storybook:test -- --ci --browsers chromium firefox webkit
+    - npm run storybook:test:all -- --ci
+  artifacts:
+    paths:
+      - __snapshots__/__diff_output__
+    expire_in: 7 days

.storybook/test-runner.ts

@@ -1,6 +1,9 @@
 import type { TestRunnerConfig } from '@storybook/test-runner';
 import { getStoryContext, waitForPageReady } from '@storybook/test-runner'
 import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+
+const customSnapshotsDir = `${process.cwd()}/__snapshots__`;
 
 const prepareA11y = async (page) => await injectAxe(page);
 
@@ -27,11 +30,23 @@ const executeA11y = async (page, context) => {
   });
 }
 
+const executeVisualTest = async (page, context) => {
+  const image = await page.locator('#storybook-root').screenshot();
+  expect(image).toMatchImageSnapshot({
+    customSnapshotsDir,
+    customSnapshotIdentifier: `${context.id}-${page.context().browser().browserType().name()}`,
+  });
+}
+
 const config: TestRunnerConfig = {
+  setup() {
+    expect.extend({ toMatchImageSnapshot });
+  },
   async postVisit(page, context) {
     await waitForPageReady(page);
     await prepareA11y(page);
     await executeA11y(page, context);
+    await executeVisualTest(page, context);
   },
 };