diff --git a/packages/web-react/scripts/entryPoints.js b/packages/web-react/scripts/entryPoints.js
index 49767f4e54..ac5baa692c 100644
--- a/packages/web-react/scripts/entryPoints.js
+++ b/packages/web-react/scripts/entryPoints.js
@@ -52,6 +52,7 @@ const entryPoints = [
   { dirs: ['components', 'UNSTABLE_PartnerLogo'] },
   { dirs: ['components', 'UNSTABLE_ProductLogo'] },
   { dirs: ['components', 'UNSTABLE_Slider'] },
+  { dirs: ['components', 'UNSTABLE_Truncate'] },
   { dirs: ['components', 'VisuallyHidden'] },
 ];
 
diff --git a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
index ce0acc444a..d7bce0026e 100644
--- a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
+++ b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
@@ -25,7 +25,7 @@ const ModalDefault = () => {
   const [footerAlign, setFooterAlign] = useState<AlignmentXDictionaryType>(AlignmentX.RIGHT);
   const [isDockedOnMobile, setIsDockedOnMobile] = useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [isExpandedOnMobile, setIsExpandedOnMobile] = useState(false);
+  const [isExpandedOnMobile, setIsExpandedOnMobile] = useState(true);
   const [isScrollable, setIsScrollable] = useState(false);
 
   const toggleModalBasic = () => setModalBasicOpen(!isModalBasicOpen);
@@ -53,7 +53,9 @@ const ModalDefault = () => {
 
   return (
     <>
-      <Button onClick={toggleModalBasic}>Open Modal</Button>
+      <Button onClick={toggleModalBasic} data-test-id="modal-basic">
+        Open Modal
+      </Button>
 
       <Modal alignmentY={modalAlign} id="example-basic" isOpen={isModalBasicOpen} onClose={handleModalBasicClose}>
         <ModalDialog
@@ -171,7 +173,9 @@ const ModalDefault = () => {
         </ModalDialog>
       </Modal>
 
-      <Button onClick={toggleModalForm}>Open Modal with Form</Button>
+      <Button onClick={toggleModalForm} data-test-id="modal-with-form">
+        Open Modal with Form
+      </Button>
 
       <Modal id="example-form" isOpen={isModalFormOpen} onClose={handleModalFormClose}>
         <ModalDialog elementType="form" method="dialog">
@@ -192,7 +196,9 @@ const ModalDefault = () => {
         </ModalDialog>
       </Modal>
 
-      <Button onClick={toggleModalWithDropdown}>Open Modal with Dropdown</Button>
+      <Button onClick={toggleModalWithDropdown} data-test-id="modal-with-dropdown">
+        Open Modal with Dropdown
+      </Button>
 
       <Modal id="example-dropdown" isOpen={isModalWithDropdownOpen} onClose={handleModalWithDropdownClose}>
         <ModalDialog>
diff --git a/packages/web-react/src/components/Modal/demo/ModalDisabledBackdropClick.tsx b/packages/web-react/src/components/Modal/demo/ModalDisabledBackdropClick.tsx
index 3748b74a09..ed0315f211 100644
--- a/packages/web-react/src/components/Modal/demo/ModalDisabledBackdropClick.tsx
+++ b/packages/web-react/src/components/Modal/demo/ModalDisabledBackdropClick.tsx
@@ -8,7 +8,9 @@ const ModalDisabledBackdropClick = () => {
 
   return (
     <>
-      <Button onClick={toggleModal}>Open Modal</Button>
+      <Button onClick={toggleModal} data-test-id="modal-with-disabled-backdrop-click">
+        Open Modal
+      </Button>
 
       <Modal id="example-disabled-backdrop-click" isOpen={isOpen} onClose={handleClose} closeOnBackdropClick={false}>
         <ModalDialog>
diff --git a/packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx b/packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx
index 3a171ff1ab..6bde7b1371 100644
--- a/packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx
+++ b/packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx
@@ -13,7 +13,9 @@ const ModalHiddenCloseButton = () => {
 
   return (
     <>
-      <Button onClick={isOpenToggle}>Open Modal</Button>
+      <Button onClick={isOpenToggle} data-test-id="modal-with-hidden-close-button">
+        Open Modal
+      </Button>
 
       <Modal
         id="example-hidden-close-button"
diff --git a/packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx b/packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx
index 137ff8bb72..285e0bd99f 100644
--- a/packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx
+++ b/packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx
@@ -94,7 +94,9 @@ const ModalScrollingLongContent = () => {
 
   return (
     <>
-      <Button onClick={toggleModalLongContent}>Open Modal with Long Content</Button>
+      <Button onClick={toggleModalLongContent} data-test-id="modal-with-long-content">
+        Open Modal with Long Content
+      </Button>
 
       <Modal id="example-long-content" isOpen={isModalLongContentOpen} onClose={handleModalLongContentClose}>
         <ModalDialog>
@@ -126,7 +128,9 @@ const ModalScrollingLongContent = () => {
         </ModalDialog>
       </Modal>
 
-      <Button onClick={toggleModalScrollingInside}>Open Modal with Scrolling Inside</Button>
+      <Button onClick={toggleModalScrollingInside} data-test-id="modal-with-scrolling-inside">
+        Open Modal with Scrolling Inside
+      </Button>
 
       <Modal id="example-scrolling-modal" isOpen={isModalScrollingInsideOpen} onClose={handleModalScrollingInsideClose}>
         <ModalDialog isScrollable>
@@ -165,7 +169,9 @@ const ModalScrollingLongContent = () => {
         </ModalDialog>
       </Modal>
 
-      <Button onClick={toggleModalScrollView}>Open Modal with ScrollView</Button>
+      <Button onClick={toggleModalScrollView} data-test-id="modal-with-scrollview">
+        Open Modal with ScrollView
+      </Button>
 
       <Modal id="example-scroll-view" isOpen={isModalScrollViewOpen} onClose={handleModalScrollViewClose}>
         <ModalDialog isScrollable>
@@ -194,7 +200,9 @@ const ModalScrollingLongContent = () => {
         </ModalDialog>
       </Modal>
 
-      <Button onClick={toggleModalCustomHeight}>Open Modal with Custom Height</Button>
+      <Button onClick={toggleModalCustomHeight} data-test-id="modal-with-custom-height">
+        Open Modal with Custom Height
+      </Button>
 
       <Modal id="example-custom-height" isOpen={isModalCustomHeightOpen} onClose={handleModalCustomHeightClose}>
         <ModalDialog
diff --git a/packages/web-react/src/components/Modal/demo/ModalStacking.tsx b/packages/web-react/src/components/Modal/demo/ModalStacking.tsx
index b27451c6c1..14df9096fd 100644
--- a/packages/web-react/src/components/Modal/demo/ModalStacking.tsx
+++ b/packages/web-react/src/components/Modal/demo/ModalStacking.tsx
@@ -13,7 +13,9 @@ const ModalStacking = () => {
 
   return (
     <>
-      <Button onClick={toggleFirstModal}>Open Modal</Button>
+      <Button onClick={toggleFirstModal} data-test-id="modal-stacking">
+        Open Modal
+      </Button>
 
       <Modal id="example-stacking-parent" isOpen={isFirstOpen} onClose={handleFirstClose}>
         <ModalDialog>
diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig
index 2bbf11979d..247661b735 100644
--- a/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig
+++ b/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig
@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-basic">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-basic" data-test-id="modal-basic">
     Open Modal
 </Button>
 
@@ -63,7 +63,7 @@
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example-form">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-form" data-test-id="modal-with-form">
     Open Modal with Form
 </Button>
 
@@ -97,7 +97,7 @@
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example-dropdown">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-dropdown" data-test-id="modal-with-dropdown">
     Open Modal with Dropdown
 </Button>
 
diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalDisabledBackdropClick.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalDisabledBackdropClick.twig
index 7dd8c64179..484526b35f 100644
--- a/packages/web-twig/src/Resources/components/Modal/stories/ModalDisabledBackdropClick.twig
+++ b/packages/web-twig/src/Resources/components/Modal/stories/ModalDisabledBackdropClick.twig
@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-disabled-backdrop-click">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-disabled-backdrop-click" data-test-id="modal-with-disabled-backdrop-click">
     Open Modal
 </Button>
 
diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig
index 3149b1412a..458fb75624 100644
--- a/packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig
+++ b/packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig
@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-hidden-close-button">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-hidden-close-button" data-test-id="modal-with-hidden-close-button">
     Open Modal
 </Button>
 
diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalScrollingLongContent.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalScrollingLongContent.twig
index 039a33f38b..0600f34555 100644
--- a/packages/web-twig/src/Resources/components/Modal/stories/ModalScrollingLongContent.twig
+++ b/packages/web-twig/src/Resources/components/Modal/stories/ModalScrollingLongContent.twig
@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-long-content">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-long-content" data-test-id="modal-with-long-content">
     Open Modal with Long Content
 </Button>
 
@@ -38,7 +38,7 @@
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example-scrolling-modal">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-scrolling-modal" data-test-id="modal-with-scrolling-inside">
     Open Modal with Scrolling Inside
 </Button>
 
@@ -92,7 +92,7 @@
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example-scroll-view">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-scroll-view" data-test-id="modal-with-scrollview">
     Open Modal with ScrollView
 </Button>
 
@@ -167,7 +167,7 @@
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example-custom-height">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-custom-height" data-test-id="modal-with-custom-height">
     Open Modal with Custom Height
 </Button>
 
diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig
index b0bf483807..5af3506fc3 100644
--- a/packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig
+++ b/packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig
@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-stacking-parent">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-stacking-parent" data-test-id="modal-stacking">
     Open Modal
 </Button>
 
diff --git a/packages/web/src/scss/components/Modal/index.html b/packages/web/src/scss/components/Modal/index.html
index d97cc72dac..fc75e39339 100644
--- a/packages/web/src/scss/components/Modal/index.html
+++ b/packages/web/src/scss/components/Modal/index.html
@@ -55,6 +55,7 @@ <h2 class="docs-Heading">Modal</h2>
       data-spirit-target="#example-basic"
       aria-controls="example-basic"
       aria-expanded="false"
+      data-test-id="modal-basic"
     >
       Open Modal
     </button>
@@ -191,6 +192,7 @@ <h2 id="example-basic-title" class="ModalHeader__title">Modal Title</h2>
       data-spirit-target="#example-form"
       aria-controls="example-form"
       aria-expanded="false"
+      data-test-id="modal-with-form"
     >
       Open Modal with Form
     </button>
@@ -265,6 +267,7 @@ <h2 id="example-form-title" class="ModalHeader__title">Modal with a Form</h2>
       data-spirit-target="#example-dropdown"
       aria-controls="example-dropdown"
       aria-expanded="false"
+      data-test-id="modal-with-dropdown"
     >
       Open Modal with Dropdown
     </button>
@@ -302,7 +305,7 @@ <h2 id="example-dropdown-title" class="ModalHeader__title">Modal Title</h2>
             perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
             provident unde. Eveniet, iste, molestiae?
           </p>
-          <div class="DropdownWrapper">
+          <div class="Dropdown">
             <button
               type="button"
               data-spirit-toggle="dropdown"
@@ -313,7 +316,7 @@ <h2 id="example-dropdown-title" class="ModalHeader__title">Modal Title</h2>
             >
               Dropdown
             </button>
-            <div class="Dropdown" data-spirit-placement="bottom-start" id="dropdown-in-modal">
+            <div class="DropdownPopover" data-spirit-placement="bottom-start" id="dropdown-in-modal">
               <a href="#" class="Item">
                 <span class="Item__label">Action</span>
               </a>
@@ -377,6 +380,7 @@ <h2 class="docs-Heading">Scrolling Long Content</h2>
       data-spirit-target="#example-long-content"
       aria-controls="example-long-content"
       aria-expanded="false"
+      data-test-id="modal-with-long-content"
     >
       Open Modal with Long Content
     </button>
@@ -461,6 +465,7 @@ <h2 id="example-long-content-title" class="ModalHeader__title">
       data-spirit-target="#example-scrolling-modal"
       aria-controls="example-scrolling-modal"
       aria-expanded="false"
+      data-test-id="modal-with-scrolling-inside"
     >
       Open Modal with Scrolling Inside
     </button>
@@ -555,6 +560,7 @@ <h2 id="example-scrolling-modal-title" class="ModalHeader__title">
       data-spirit-target="#example-scroll-view"
       aria-controls="example-scroll-view"
       aria-expanded="false"
+      data-test-id="modal-with-scrollview"
     >
       Open Modal with ScrollView
     </button>
@@ -680,6 +686,7 @@ <h2 id="example-scroll-view-title" class="ModalHeader__title">
       data-spirit-target="#example-custom-height"
       aria-controls="example-custom-height"
       aria-expanded="false"
+      data-test-id="modal-with-custom-height"
     >
       Open Modal with Custom Height
     </button>
@@ -986,6 +993,7 @@ <h2 class="docs-Heading">Stacking Modals</h2>
       data-spirit-target="#example-stacking-parent"
       aria-controls="example-stacking-parent"
       aria-expanded="false"
+      data-test-id="modal-stacking"
     >
       Open Modal
     </button>
@@ -1135,6 +1143,7 @@ <h2 class="docs-Heading">Disabled Backdrop Click</h2>
       data-spirit-target="#example-disabled-backdrop-click"
       aria-controls="example-disabled-backdrop-click"
       aria-expanded="false"
+      data-test-id="modal-with-disabled-backdrop-click"
     >
       Open Modal
     </button>
@@ -1209,6 +1218,7 @@ <h2 class="docs-Heading">Hidden Close Button and Disabled Escape Key</h2>
       data-spirit-target="#example-hide-close-button"
       aria-controls="example-hide-close-button"
       aria-expanded="false"
+      data-test-id="modal-with-hidden-close-button"
     >
       Open Modal
     </button>
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts b/tests/e2e/components/demo-modal-compare.spec.ts
new file mode 100644
index 0000000000..9f98616449
--- /dev/null
+++ b/tests/e2e/components/demo-modal-compare.spec.ts
@@ -0,0 +1,123 @@
+/* eslint-disable no-console -- we want to log when test fails */
+import { isTesting as isTestingEnvironment } from '@lmc-eu/spirit-common/constants/environments';
+import { test, Page } from '@playwright/test';
+import { formatPackageName, getServerUrl, waitForPageLoad, takeScreenshot } from '../../helpers';
+
+type TestConfig = {
+  componentsDir: string;
+  packageName: string;
+  componentName: string;
+};
+
+type ModalTestConfig = {
+  openSelector: string;
+  testName: string;
+};
+
+const runComponentCompareTests = ({ componentsDir, packageName, componentName }: TestConfig): void => {
+  if (!packageName) return;
+
+  const formattedPackageName = formatPackageName(packageName);
+
+  test.describe(`Test opened Modal`, () => {
+    test(`Test ${componentName} component in ${formattedPackageName} package`, async ({ page }: { page: Page }) => {
+      try {
+        const url = getServerUrl(packageName);
+        await page.goto(`${url}${componentsDir}/${componentName}/${packageName === 'web-twig' ? '?HIDE_TOOLBAR' : ''}`);
+        await waitForPageLoad(page);
+        await runModalTests(page, componentName);
+      } catch (error) {
+        console.error(`Test for demo ${formattedPackageName} component ${componentName} failed. ${error}`);
+        throw error;
+      }
+    });
+  });
+};
+
+const runModalTests = async (page: Page, componentName: string): Promise<void> => {
+  // open basic modal, close with backdrop click
+  await page.click('[data-test-id="modal-basic"]');
+  await takeScreenshot(page, `${componentName}-basic`);
+  await page.locator('body').click({ position: { x: 0, y: 0 } });
+
+  // open modal and dropdown inside, close with close button
+  await page.click('[data-test-id="modal-with-dropdown"]');
+  await page.click('dialog[open] .Dropdown button');
+  await takeScreenshot(page, `${componentName}-with-dropdown`);
+  await page.click('dialog[open] header button');
+
+  // open two stacking modals, close with escape keys
+  await page.click('[data-test-id="modal-stacking"]');
+  await page.click('dialog[open] footer button');
+  await takeScreenshot(page, `${componentName}-stacking`);
+  await page.keyboard.press('Escape');
+  await page.keyboard.press('Escape');
+
+  // open modal with hidden close button, close with action button
+  await page.click('button[data-test-id="modal-with-hidden-close-button"]');
+  await takeScreenshot(page, `${componentName}-hidden-close-button`);
+  await page.click('dialog[open] footer button');
+
+  // open rest of modals and take screenshots, close with close button
+  for (const config of modalTestConfigs) {
+    await page.click(`[data-test-id="${config.openSelector}"]`);
+    await takeScreenshot(page, `${componentName}-${config.testName}`);
+    await page.click('dialog[open] header button');
+  }
+
+  // screenshot of closed modals
+  await takeScreenshot(page, `${componentName}-closed-modals`, { fullPage: true });
+};
+
+const modalTestConfigs: ModalTestConfig[] = [
+  {
+    openSelector: 'modal-with-form',
+    testName: 'with-form',
+  },
+  {
+    openSelector: 'modal-with-long-content',
+    testName: 'with-long-content',
+  },
+  {
+    openSelector: 'modal-with-scrolling-inside',
+    testName: 'with-scrolling-inside',
+  },
+  {
+    openSelector: 'modal-with-scrollview',
+    testName: 'with-scrollview',
+  },
+  {
+    openSelector: 'modal-with-custom-height',
+    testName: 'with-custom-height',
+  },
+  {
+    openSelector: 'modal-with-disabled-backdrop-click',
+    testName: 'disabled-backdrop-click',
+  },
+];
+
+const componentName = 'Modal';
+
+const testConfigs: TestConfig[] = [
+  {
+    componentName,
+    componentsDir: '/src/scss/components',
+    packageName: 'web',
+  },
+  {
+    componentName,
+    componentsDir: '/src/components',
+    packageName: 'web-react',
+  },
+];
+
+// Disable web-twig tests for now on CI, because we don't have a way to run them in CI yet.
+if (!isTestingEnvironment()) {
+  testConfigs.push({
+    componentName,
+    componentsDir: '/components',
+    packageName: 'web-twig',
+  });
+}
+
+testConfigs.forEach(runComponentCompareTests);
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png
new file mode 100644
index 0000000000..c27d1f211c
Binary files /dev/null and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png
new file mode 100644
index 0000000000..56c131109d
Binary files /dev/null and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-disabled-backdrop-click-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-disabled-backdrop-click-chromium-linux.png
new file mode 100644
index 0000000000..e8913a1a87
Binary files /dev/null and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-disabled-backdrop-click-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png
new file mode 100644
index 0000000000..990c6dd7c9
Binary files /dev/null and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png
new file mode 100644
index 0000000000..4054a9e640
Binary files /dev/null and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-custom-height-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-custom-height-chromium-linux.png
new file mode 100644
index 0000000000..0064d3f279
Binary files /dev/null and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-custom-height-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png
new file mode 100644
index 0000000000..fb412ae490
Binary files /dev/null and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-form-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-form-chromium-linux.png
new file mode 100644
index 0000000000..fa24b068c2
Binary files /dev/null and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-form-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-long-content-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-long-content-chromium-linux.png
new file mode 100644
index 0000000000..80e808be8f
Binary files /dev/null and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-long-content-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrolling-inside-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrolling-inside-chromium-linux.png
new file mode 100644
index 0000000000..a65d49e25f
Binary files /dev/null and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrolling-inside-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrollview-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrollview-chromium-linux.png
new file mode 100644
index 0000000000..1b6dc42899
Binary files /dev/null and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrollview-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts
index a0c00e4a09..577f1ccaa4 100644
--- a/tests/e2e/demo-components-compare.spec.ts
+++ b/tests/e2e/demo-components-compare.spec.ts
@@ -1,19 +1,23 @@
 /* eslint-disable no-console -- we want to log when test fails */
 import { isTesting as isTestingEnvironment } from '@lmc-eu/spirit-common/constants/environments';
-import { SERVERS, getDevelopmentEndpointUri } from '@lmc-eu/spirit-common/constants/servers';
-import { expect, test } from '@playwright/test';
+import { test } from '@playwright/test';
 import { readdirSync } from 'fs';
+import { formatPackageName, getServerUrl, takeScreenshot, waitForPageLoad } from '../helpers';
 
 // Tests that are intentionally broken, but will be fixed in the future
-const IGNORED_TESTS = [];
+const IGNORED_TESTS: string[] = [];
 
-const runComponentCompareTests = (testConfig) => {
+interface TestConfig {
+  packageDir: string;
+  componentsDir: string;
+  srcDir?: string;
+  packageName: string;
+}
+
+const runComponentCompareTests = (testConfig: TestConfig) => {
   const { packageDir, componentsDir, srcDir = '', packageName } = testConfig;
   if (packageName) {
-    const formattedPackageName = packageName
-      .split('-')
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(' ');
+    const formattedPackageName = formatPackageName(packageName);
 
     test.describe(`Demo ${formattedPackageName} Components`, () => {
       const componentDirs = readdirSync(`${packageDir}${srcDir}${componentsDir}`, { withFileTypes: true })
@@ -30,29 +34,10 @@ const runComponentCompareTests = (testConfig) => {
       for (const component of componentDirs) {
         test(`test demo ${formattedPackageName} component ${component}`, async ({ page }) => {
           try {
-            await page.goto(
-              `${
-                isTestingEnvironment()
-                  ? SERVERS.TESTING[packageName]
-                  : getDevelopmentEndpointUri(packageName, { isDocker: packageName !== 'web-twig' })
-              }${componentsDir}/${component}/${packageName === 'web-twig' ? '?HIDE_TOOLBAR' : ''}`,
-            );
-            // wait for fonts to load
-            await page.evaluate(() => document.fonts.ready);
-            // wait for images to load
-            await page.waitForFunction(() => {
-              const images = Array.from(document.querySelectorAll('img'));
-
-              return images.every((img) => img.complete);
-            });
-            // wait for transitions to finish
-            await page.waitForLoadState();
-            // disable animations to avoid flaky screenshots
-            await page.addStyleTag({ content: '*, *::before, *::after { animation-iteration-count: 1 !important }' });
-            await expect(page).toHaveScreenshot(`${component}.png`, {
-              animations: 'disabled',
-              fullPage: true,
-            });
+            const url = getServerUrl(packageName);
+            await page.goto(`${url}${componentsDir}/${component}/${packageName === 'web-twig' ? '?HIDE_TOOLBAR' : ''}`);
+            await waitForPageLoad(page);
+            await takeScreenshot(page, `${component}`, { fullPage: true });
           } catch (error) {
             // beware of the case insensitive systems; keep the prefix in the small case
             if (!component.startsWith('unstable_')) {
@@ -71,7 +56,7 @@ const runComponentCompareTests = (testConfig) => {
   }
 };
 
-const testConfigs = [
+const testConfigs: TestConfig[] = [
   {
     componentsDir: '/src/scss/components',
     packageDir: 'packages/web',
@@ -82,13 +67,16 @@ const testConfigs = [
     packageDir: 'packages/web-react',
     packageName: 'web-react',
   },
-  // Disable web-twig tests for now on CI, because we don't have a way to run them in CI yet.
-  !isTestingEnvironment() && {
+];
+
+// Disable web-twig tests for now on CI, because we don't have a way to run them in CI yet.
+if (!isTestingEnvironment()) {
+  testConfigs.push({
     componentsDir: '/components',
     packageDir: 'packages/web-twig',
     packageName: 'web-twig',
     srcDir: '/src/Resources',
-  },
-];
+  });
+}
 
 testConfigs.forEach(runComponentCompareTests);
diff --git a/tests/e2e/demo-homepages.spec.ts b/tests/e2e/demo-homepages.spec.ts
index 6e4078edbc..46bada1754 100644
--- a/tests/e2e/demo-homepages.spec.ts
+++ b/tests/e2e/demo-homepages.spec.ts
@@ -1,6 +1,7 @@
 import { isTesting } from '@lmc-eu/spirit-common/constants/environments';
 import { SERVERS, getDevelopmentEndpointUri } from '@lmc-eu/spirit-common/constants/servers';
-import { expect, test } from '@playwright/test';
+import { test } from '@playwright/test';
+import { takeScreenshot, waitForPageLoad } from '../helpers';
 
 test.describe('Demo Homepages', () => {
   const demos = [
@@ -17,16 +18,8 @@ test.describe('Demo Homepages', () => {
   for (const demo of demos) {
     test(`test demo homepage ${demo.package}`, async ({ page }) => {
       await page.goto(demo.url);
-      // wait for fonts to load
-      await page.evaluate(() => document.fonts.ready);
-      // wait for transitions to finish
-      await page.waitForLoadState();
-      // disable animations to avoid flaky screenshots
-      await page.addStyleTag({ content: '*, *::before, *::after { animation-iteration-count: 1 !important }' });
-      await expect(page).toHaveScreenshot(`${demo.package}.png`, {
-        animations: 'disabled',
-        fullPage: true,
-      });
+      await waitForPageLoad(page);
+      await takeScreenshot(page, demo.package, { fullPage: true });
     });
   }
 });
diff --git a/tests/helpers/formatPackageName.ts b/tests/helpers/formatPackageName.ts
new file mode 100644
index 0000000000..0f0c835dd8
--- /dev/null
+++ b/tests/helpers/formatPackageName.ts
@@ -0,0 +1,5 @@
+export const formatPackageName = (packageName: string) =>
+  packageName
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
diff --git a/tests/helpers/getServerUrl.ts b/tests/helpers/getServerUrl.ts
new file mode 100644
index 0000000000..75b2b17cbd
--- /dev/null
+++ b/tests/helpers/getServerUrl.ts
@@ -0,0 +1,7 @@
+import { isTesting as isTestingEnvironment } from '@lmc-eu/spirit-common/constants/environments';
+import { SERVERS, getDevelopmentEndpointUri } from '@lmc-eu/spirit-common/constants/servers';
+
+export const getServerUrl = (packageName: string) =>
+  isTestingEnvironment()
+    ? SERVERS.TESTING[packageName]
+    : getDevelopmentEndpointUri(packageName, { isDocker: packageName !== 'web-twig' });
diff --git a/tests/helpers/index.ts b/tests/helpers/index.ts
new file mode 100644
index 0000000000..822efd8b93
--- /dev/null
+++ b/tests/helpers/index.ts
@@ -0,0 +1,4 @@
+export * from './formatPackageName';
+export * from './getServerUrl';
+export * from './takeScreenshot';
+export * from './waitForPageLoad';
diff --git a/tests/helpers/takeScreenshot.ts b/tests/helpers/takeScreenshot.ts
new file mode 100644
index 0000000000..8724022aa7
--- /dev/null
+++ b/tests/helpers/takeScreenshot.ts
@@ -0,0 +1,14 @@
+import { expect, Page, PageAssertionsToHaveScreenshotOptions } from '@playwright/test';
+
+const defaultOptions: PageAssertionsToHaveScreenshotOptions = {
+  animations: 'disabled',
+  fullPage: false,
+};
+
+export const takeScreenshot = async (
+  page: Page,
+  name: string,
+  options?: PageAssertionsToHaveScreenshotOptions,
+): Promise<void> => {
+  await expect(page).toHaveScreenshot(`${name.toLowerCase()}.png`, { ...defaultOptions, ...options });
+};
diff --git a/tests/helpers/waitForPageLoad.ts b/tests/helpers/waitForPageLoad.ts
new file mode 100644
index 0000000000..fbaed1f9c8
--- /dev/null
+++ b/tests/helpers/waitForPageLoad.ts
@@ -0,0 +1,15 @@
+import { Page } from '@playwright/test';
+
+export const waitForPageLoad = async (page: Page): Promise<void> => {
+  // Wait for fonts to load
+  await page.evaluate(() => document.fonts.ready);
+
+  // Wait for images to load
+  await page.waitForFunction(() => Array.from(document.querySelectorAll('img')).every((img) => img.complete));
+
+  // Wait for transitions to finish
+  await page.waitForLoadState();
+
+  // Disable animations to avoid flaky screenshots
+  await page.addStyleTag({ content: '*, *::before, *::after { animation-iteration-count: 1 !important }' });
+};