diff --git a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts
index da19067e4..d2e25da34 100644
--- a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts
+++ b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts
@@ -1,26 +1,53 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  getTestDescribeText,
+  setupPage,
+  testConfigurations,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/accordion/test/basic/index.html';
 const accordionSelector = 'tds-accordion';
+const componentName = 'tds-accordion';
 
-test.describe.parallel('tds-accordion', () => {
-  test('renders basic accordion correctly', async ({ page }) => {
-    // Define selector for accordion
-    await page.goto(componentTestPath);
-    const accordion = page.locator(accordionSelector);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders basic accordion correctly', async ({ page }) => {
+      // Define selector for accordion
+      const accordion = page.locator(accordionSelector);
+
+      // Check if accordion contains the correct text
+      await expect(accordion).toContainText('First item');
+      await expect(accordion).toContainText('Second item');
 
-    // Check if accordion contains the correct text
-    await expect(accordion).toContainText('First item');
-    await expect(accordion).toContainText('Second item');
+      // Check screenshot diff to make sure the accordion is rendered correctly
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-    // Check screenshot diff to make sure the accordion is rendered correctly
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('second accordion item opens on click', async ({ page }) => {
+      // Define selector for second accordion item
+      const accordionSecondItem = page.getByText('Second item');
+
+      // Hover second accordion item
+      await accordionSecondItem.click();
+
+      // Check screenshot diff to make sure the second accordion item is open
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('should handle hover on accordion items', async ({ page }) => {
     // Define selector for first accordion item
-    await page.goto(componentTestPath);
     const accordionFirstItem = page.getByText('First item');
 
     // Hover first accordion item
@@ -40,25 +67,11 @@ test.describe.parallel('tds-accordion', () => {
     await expect(accordionSecondItem).toHaveCSS('cursor', 'pointer');
   });
 
-  test('second accordion item opens on click', async ({ page }) => {
-    // Define selector for second accordion item
-    await page.goto(componentTestPath);
-    const accordionSecondItem = page.getByText('Second item');
-
-    // Hover second accordion item
-    await accordionSecondItem.click();
-
-    // Check screenshot diff to make sure the second accordion item is open
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
   test('fires tdsToggle event on click', async ({ page }) => {
     // Define selector for first accordion item
-    await page.goto(componentTestPath);
     const accordionFirstItem = page.getByText('First item');
 
     // Define selector for second accordion item
-    await page.goto(componentTestPath);
     const accordionSecondItem = page.getByText('Second item');
 
     // Click first accordion item
diff --git a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-renders-basic-accordion-correctly-1-linux.png b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-renders-basic-accordion-correctly-1-linux.png
new file mode 100644
index 000000000..b1e4af96c
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-renders-basic-accordion-correctly-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-second-accordion-item-opens-on-click-1-linux.png b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-second-accordion-item-opens-on-click-1-linux.png
new file mode 100644
index 000000000..1dc159d78
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-second-accordion-item-opens-on-click-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-renders-basic-accordion-correctly-1-linux.png b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-renders-basic-accordion-correctly-1-linux.png
new file mode 100644
index 000000000..e0e4d4b63
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-renders-basic-accordion-correctly-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-second-accordion-item-opens-on-click-1-linux.png b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-second-accordion-item-opens-on-click-1-linux.png
new file mode 100644
index 000000000..baa9c1efd
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-second-accordion-item-opens-on-click-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-second-accordion-item-opens-on-click-1-linux.png b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-second-accordion-item-opens-on-click-1-linux.png
deleted file mode 100644
index fd33ddf6e..000000000
Binary files a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-second-accordion-item-opens-on-click-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-renders-basic-accordion-correctly-1-linux.png b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-renders-basic-accordion-correctly-1-linux.png
new file mode 100644
index 000000000..0cc30ddd8
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-renders-basic-accordion-correctly-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-second-accordion-item-opens-on-click-1-linux.png b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-second-accordion-item-opens-on-click-1-linux.png
new file mode 100644
index 000000000..8e023169a
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-second-accordion-item-opens-on-click-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-renders-basic-accordion-correctly-1-linux.png b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-renders-basic-accordion-correctly-1-linux.png
new file mode 100644
index 000000000..9d698bee7
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-renders-basic-accordion-correctly-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-second-accordion-item-opens-on-click-1-linux.png b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-second-accordion-item-opens-on-click-1-linux.png
new file mode 100644
index 000000000..8f7361141
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-second-accordion-item-opens-on-click-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts b/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts
index da4cad059..894bb9e98 100644
--- a/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts
+++ b/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts
@@ -1,33 +1,48 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  getTestDescribeText,
+  setupPage,
+  testConfigurations,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/accordion/test/disabled/index.html';
 const accordionSelector = 'tds-accordion';
+const componentName = 'tds-accordion';
 
-test.describe.parallel('tds-accordion', () => {
-  test('renders disabled accordion correctly', async ({ page }) => {
-    // Define selector for accordion
-    await page.goto(componentTestPath);
-    const accordion = page.locator(accordionSelector);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders disabled accordion correctly', async ({ page }) => {
+      // Define selector for accordion
+      const accordion = page.locator(accordionSelector);
+
+      // Check if accordion contains the correct text
+      await expect(accordion).toContainText('First item');
+      await expect(accordion).toContainText('Second item');
 
-    // Check if accordion contains the correct text
-    await expect(accordion).toContainText('First item');
-    await expect(accordion).toContainText('Second item');
+      // Check screenshot diff to make sure the accordion is rendered correctly
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
-    // Check screenshot diff to make sure the accordion is rendered correctly
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('disabled accordion items should be displayed', async ({ page }) => {
     // Define selector for first accordion item
-    await page.goto(componentTestPath);
     const accordionFirstItem = page.locator(accordionSelector + '>> text=First item');
 
     // Expect first accordion item to be disabled
     await expect(accordionFirstItem).toBeDisabled();
 
     // Define selector for second accordion item
-    await page.goto(componentTestPath);
     const accordionSecondItem = page.getByTestId('second-item');
 
     // Define selector for second accordion item button since
@@ -40,7 +55,6 @@ test.describe.parallel('tds-accordion', () => {
 
   test('cursor should be not-allowed on disabled accordion items', async ({ page }) => {
     // Define selector for first accordion item
-    await page.goto(componentTestPath);
     const accordionFirstItem = page.getByTestId('first-item');
     const accordionFirstItemButton = accordionFirstItem.getByRole('button');
 
@@ -53,7 +67,6 @@ test.describe.parallel('tds-accordion', () => {
     await expect(accordionCursorFirstItem).toBe('not-allowed');
 
     // Define selector for second accordion item
-    await page.goto(componentTestPath);
     const accordionSecondItem = page.getByTestId('second-item');
     const accordionSecondItemButton = accordionSecondItem.getByRole('button');
 
@@ -68,7 +81,6 @@ test.describe.parallel('tds-accordion', () => {
 
   test('does not fire tdsToggle event on click on disabled accordion', async ({ page }) => {
     // Define selector for first accordion item
-    await page.goto(componentTestPath);
     const accordionFirstItem = page.getByText('First item');
 
     // Click first accordion item
diff --git a/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-renders-disabled-accordion-correctly-1-linux.png b/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-renders-disabled-accordion-correctly-1-linux.png
new file mode 100644
index 000000000..816d9540e
Binary files /dev/null and b/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-renders-disabled-accordion-correctly-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-renders-disabled-accordion-correctly-1-linux.png b/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-renders-disabled-accordion-correctly-1-linux.png
new file mode 100644
index 000000000..8be1c90fb
Binary files /dev/null and b/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-renders-disabled-accordion-correctly-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-renders-disabled-accordion-correctly-1-linux.png b/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-renders-disabled-accordion-correctly-1-linux.png
new file mode 100644
index 000000000..81fae9b2a
Binary files /dev/null and b/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-renders-disabled-accordion-correctly-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-renders-disabled-accordion-correctly-1-linux.png b/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-renders-disabled-accordion-correctly-1-linux.png
new file mode 100644
index 000000000..e390106b7
Binary files /dev/null and b/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-renders-disabled-accordion-correctly-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts b/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts
index 3a23f963a..7337a68ea 100644
--- a/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts
+++ b/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts
@@ -1,20 +1,31 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  getTestDescribeText,
+  setupPage,
+  testConfigurations,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/accordion/test/hide-last-border/index.html';
 const accordionSelector = 'tds-accordion';
+const componentName = 'tds-accordion';
 
-test.describe.parallel('tds-accordion', () => {
-  test('renders accordion with hidden last border correctly', async ({ page }) => {
-    // Define selector for accordion
-    await page.goto(componentTestPath);
-    const accordion = page.locator(accordionSelector);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    // Check if accordion contains the correct text
-    await expect(accordion).toContainText('First item');
-    await expect(accordion).toContainText('Second item');
+    test('renders accordion with hidden last border correctly', async ({ page }) => {
+      // Define selector for accordion
+      const accordion = page.locator(accordionSelector);
 
-    // Check screenshot diff to make sure the accordion is rendered correctly
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      // Check if accordion contains the correct text
+      await expect(accordion).toContainText('First item');
+      await expect(accordion).toContainText('Second item');
+
+      // Check screenshot diff to make sure the accordion is rendered correctly
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-renders-accordion-with-hidden-last-border-correctly-1-linux.png b/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-renders-accordion-with-hidden-last-border-correctly-1-linux.png
new file mode 100644
index 000000000..2f99d8765
Binary files /dev/null and b/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-renders-accordion-with-hidden-last-border-correctly-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-renders-basic-accordion-correctly-1-linux.png b/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-renders-accordion-with-hidden-last-border-correctly-1-linux.png
similarity index 51%
rename from packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-renders-basic-accordion-correctly-1-linux.png
rename to packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-renders-accordion-with-hidden-last-border-correctly-1-linux.png
index 2aebd3b26..3d21b764c 100644
Binary files a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-renders-basic-accordion-correctly-1-linux.png and b/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-renders-accordion-with-hidden-last-border-correctly-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-renders-accordion-with-hidden-last-border-correctly-1-linux.png b/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-renders-accordion-with-hidden-last-border-correctly-1-linux.png
new file mode 100644
index 000000000..80a82ba8c
Binary files /dev/null and b/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-renders-accordion-with-hidden-last-border-correctly-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-renders-accordion-with-hidden-last-border-correctly-1-linux.png b/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-renders-accordion-with-hidden-last-border-correctly-1-linux.png
new file mode 100644
index 000000000..8048f3685
Binary files /dev/null and b/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-renders-accordion-with-hidden-last-border-correctly-1-linux.png differ
diff --git a/packages/core/src/components/banner/test/default/lightmode/banner.e2e.ts b/packages/core/src/components/banner/test/default/banner.e2e.ts
similarity index 59%
rename from packages/core/src/components/banner/test/default/lightmode/banner.e2e.ts
rename to packages/core/src/components/banner/test/default/banner.e2e.ts
index ec8f8b6e7..e694c57bd 100644
--- a/packages/core/src/components/banner/test/default/lightmode/banner.e2e.ts
+++ b/packages/core/src/components/banner/test/default/banner.e2e.ts
@@ -1,18 +1,33 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  getTestDescribeText,
+  setupPage,
+  testConfigurations,
+} from '../../../../utils/testConfiguration';
+
+const componentTestPath = 'src/components/banner/test/default/index.html';
+const componentName = 'tds-banner';
+const testDescription = 'tds-banner-default';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default banner correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
-const componentTestPath = 'src/components/banner/test/default/lightmode/index.html';
-
-test.describe.parallel('tds-banner-default-lightmode', () => {
+test.describe.parallel(componentName, () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
   });
 
-  test('renders default banner correctly', async ({ page }) => {
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
   test('header exists', async ({ page }) => {
     const bannerHeader = page.getByText('This is a header text area', { exact: true });
     await expect(bannerHeader).toBeVisible();
diff --git a/packages/core/src/components/banner/test/default/banner.e2e.ts-snapshots/tds-banner-default-darkmode-renders-default-banner-correctly-1-linux.png b/packages/core/src/components/banner/test/default/banner.e2e.ts-snapshots/tds-banner-default-darkmode-renders-default-banner-correctly-1-linux.png
new file mode 100644
index 000000000..67cde095e
Binary files /dev/null and b/packages/core/src/components/banner/test/default/banner.e2e.ts-snapshots/tds-banner-default-darkmode-renders-default-banner-correctly-1-linux.png differ
diff --git a/packages/core/src/components/banner/test/default/banner.e2e.ts-snapshots/tds-banner-default-lightmode-renders-default-banner-correctly-1-linux.png b/packages/core/src/components/banner/test/default/banner.e2e.ts-snapshots/tds-banner-default-lightmode-renders-default-banner-correctly-1-linux.png
new file mode 100644
index 000000000..f32ddd74c
Binary files /dev/null and b/packages/core/src/components/banner/test/default/banner.e2e.ts-snapshots/tds-banner-default-lightmode-renders-default-banner-correctly-1-linux.png differ
diff --git a/packages/core/src/components/banner/test/default/darkmode/banner.e2e.ts b/packages/core/src/components/banner/test/default/darkmode/banner.e2e.ts
deleted file mode 100644
index 52c371e70..000000000
--- a/packages/core/src/components/banner/test/default/darkmode/banner.e2e.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/banner/test/default/darkmode/index.html';
-
-test.describe.parallel('tds-banner-default-darkmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders default banner correctly with darkmode', async ({ page }) => {
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/banner/test/default/darkmode/banner.e2e.ts-snapshots/tds-banner-default-darkmode-renders-default-banner-correctly-with-darkmode-1-linux.png b/packages/core/src/components/banner/test/default/darkmode/banner.e2e.ts-snapshots/tds-banner-default-darkmode-renders-default-banner-correctly-with-darkmode-1-linux.png
deleted file mode 100644
index 7d8921f40..000000000
Binary files a/packages/core/src/components/banner/test/default/darkmode/banner.e2e.ts-snapshots/tds-banner-default-darkmode-renders-default-banner-correctly-with-darkmode-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/banner/test/default/lightmode/index.html b/packages/core/src/components/banner/test/default/index.html
similarity index 100%
rename from packages/core/src/components/banner/test/default/lightmode/index.html
rename to packages/core/src/components/banner/test/default/index.html
diff --git a/packages/core/src/components/banner/test/default/lightmode/banner.e2e.ts-snapshots/tds-banner-default-lightmode-renders-default-banner-correctly-1-linux.png b/packages/core/src/components/banner/test/default/lightmode/banner.e2e.ts-snapshots/tds-banner-default-lightmode-renders-default-banner-correctly-1-linux.png
deleted file mode 100644
index 804cedf17..000000000
Binary files a/packages/core/src/components/banner/test/default/lightmode/banner.e2e.ts-snapshots/tds-banner-default-lightmode-renders-default-banner-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/banner/test/error/banner.e2e.ts b/packages/core/src/components/banner/test/error/banner.e2e.ts
new file mode 100644
index 000000000..a0ca42880
--- /dev/null
+++ b/packages/core/src/components/banner/test/error/banner.e2e.ts
@@ -0,0 +1,35 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+import {
+  getTestDescribeText,
+  setupPage,
+  testConfigurations,
+} from '../../../../utils/testConfiguration';
+
+const componentTestPath = 'src/components/banner/test/error/index.html';
+const componentName = 'tds-banner';
+const testDescription = 'tds-banner-error';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders error banner correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('icons exists', async ({ page }) => {
+    const images = page.getByRole('img');
+    await expect(images).toHaveCount(2);
+  });
+});
diff --git a/packages/core/src/components/banner/test/error/banner.e2e.ts-snapshots/tds-banner-error-darkmode-renders-error-banner-correctly-1-linux.png b/packages/core/src/components/banner/test/error/banner.e2e.ts-snapshots/tds-banner-error-darkmode-renders-error-banner-correctly-1-linux.png
new file mode 100644
index 000000000..206b4e90d
Binary files /dev/null and b/packages/core/src/components/banner/test/error/banner.e2e.ts-snapshots/tds-banner-error-darkmode-renders-error-banner-correctly-1-linux.png differ
diff --git a/packages/core/src/components/banner/test/error/banner.e2e.ts-snapshots/tds-banner-error-lightmode-renders-error-banner-correctly-1-linux.png b/packages/core/src/components/banner/test/error/banner.e2e.ts-snapshots/tds-banner-error-lightmode-renders-error-banner-correctly-1-linux.png
new file mode 100644
index 000000000..58d80f1f3
Binary files /dev/null and b/packages/core/src/components/banner/test/error/banner.e2e.ts-snapshots/tds-banner-error-lightmode-renders-error-banner-correctly-1-linux.png differ
diff --git a/packages/core/src/components/banner/test/error/darkmode/banner.e2e.ts b/packages/core/src/components/banner/test/error/darkmode/banner.e2e.ts
deleted file mode 100644
index 46af4b93e..000000000
--- a/packages/core/src/components/banner/test/error/darkmode/banner.e2e.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/banner/test/error/darkmode/index.html';
-
-test.describe.parallel('tds-banner-error-darkmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders error banner correctly with darkmode', async ({ page }) => {
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/banner/test/error/darkmode/banner.e2e.ts-snapshots/tds-banner-error-darkmode-renders-error-banner-correctly-with-darkmode-1-linux.png b/packages/core/src/components/banner/test/error/darkmode/banner.e2e.ts-snapshots/tds-banner-error-darkmode-renders-error-banner-correctly-with-darkmode-1-linux.png
deleted file mode 100644
index 5225c457b..000000000
Binary files a/packages/core/src/components/banner/test/error/darkmode/banner.e2e.ts-snapshots/tds-banner-error-darkmode-renders-error-banner-correctly-with-darkmode-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/banner/test/error/lightmode/index.html b/packages/core/src/components/banner/test/error/index.html
similarity index 100%
rename from packages/core/src/components/banner/test/error/lightmode/index.html
rename to packages/core/src/components/banner/test/error/index.html
diff --git a/packages/core/src/components/banner/test/error/lightmode/banner.e2e.ts b/packages/core/src/components/banner/test/error/lightmode/banner.e2e.ts
deleted file mode 100644
index 1f1c1f6a4..000000000
--- a/packages/core/src/components/banner/test/error/lightmode/banner.e2e.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/banner/test/error/lightmode/index.html';
-
-test.describe.parallel('tds-banner-error-lightmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders error banner correctly', async ({ page }) => {
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('icons exists', async ({ page }) => {
-    const images = page.getByRole('img');
-    await expect(images).toHaveCount(2);
-  });
-});
diff --git a/packages/core/src/components/banner/test/error/lightmode/banner.e2e.ts-snapshots/tds-banner-error-lightmode-renders-error-banner-correctly-1-linux.png b/packages/core/src/components/banner/test/error/lightmode/banner.e2e.ts-snapshots/tds-banner-error-lightmode-renders-error-banner-correctly-1-linux.png
deleted file mode 100644
index 7d37b9a9d..000000000
Binary files a/packages/core/src/components/banner/test/error/lightmode/banner.e2e.ts-snapshots/tds-banner-error-lightmode-renders-error-banner-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/banner/test/information/banner.e2e.ts b/packages/core/src/components/banner/test/information/banner.e2e.ts
new file mode 100644
index 000000000..1f88f1017
--- /dev/null
+++ b/packages/core/src/components/banner/test/information/banner.e2e.ts
@@ -0,0 +1,29 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+import {
+  getTestDescribeText,
+  setupPage,
+  testConfigurations,
+} from '../../../../utils/testConfiguration';
+
+const componentTestPath = 'src/components/banner/test/information/index.html';
+const componentName = 'tds-banner';
+const testDescription = 'tds-banner-information';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders information banner correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('icons exists', async ({ page }) => {
+      const images = page.getByRole('img');
+      await expect(images).toHaveCount(2);
+    });
+  });
+});
diff --git a/packages/core/src/components/banner/test/information/banner.e2e.ts-snapshots/tds-banner-information-darkmode-renders-information-banner-correctly-1-linux.png b/packages/core/src/components/banner/test/information/banner.e2e.ts-snapshots/tds-banner-information-darkmode-renders-information-banner-correctly-1-linux.png
new file mode 100644
index 000000000..1a5a1a2b3
Binary files /dev/null and b/packages/core/src/components/banner/test/information/banner.e2e.ts-snapshots/tds-banner-information-darkmode-renders-information-banner-correctly-1-linux.png differ
diff --git a/packages/core/src/components/banner/test/information/banner.e2e.ts-snapshots/tds-banner-information-lightmode-renders-information-banner-correctly-1-linux.png b/packages/core/src/components/banner/test/information/banner.e2e.ts-snapshots/tds-banner-information-lightmode-renders-information-banner-correctly-1-linux.png
new file mode 100644
index 000000000..9c0421f62
Binary files /dev/null and b/packages/core/src/components/banner/test/information/banner.e2e.ts-snapshots/tds-banner-information-lightmode-renders-information-banner-correctly-1-linux.png differ
diff --git a/packages/core/src/components/banner/test/information/darkmode/banner.e2e.ts b/packages/core/src/components/banner/test/information/darkmode/banner.e2e.ts
deleted file mode 100644
index f6eac1e43..000000000
--- a/packages/core/src/components/banner/test/information/darkmode/banner.e2e.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/banner/test/information/darkmode/index.html';
-
-test.describe.parallel('tds-banner-information-darkmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders information banner correctly with darkmode', async ({ page }) => {
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/banner/test/information/darkmode/banner.e2e.ts-snapshots/tds-banner-information-darkmode-renders-information-banner-correctly-with-darkmode-1-linux.png b/packages/core/src/components/banner/test/information/darkmode/banner.e2e.ts-snapshots/tds-banner-information-darkmode-renders-information-banner-correctly-with-darkmode-1-linux.png
deleted file mode 100644
index be0f2d848..000000000
Binary files a/packages/core/src/components/banner/test/information/darkmode/banner.e2e.ts-snapshots/tds-banner-information-darkmode-renders-information-banner-correctly-with-darkmode-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/banner/test/information/darkmode/index.html b/packages/core/src/components/banner/test/information/darkmode/index.html
deleted file mode 100644
index 11bb319be..000000000
--- a/packages/core/src/components/banner/test/information/darkmode/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Banner - Information</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
-    <script type="module">
-      import { defineCustomElements } from '../../../../../loader/index.es2017.js';
-      defineCustomElements();
-    </script>
-  </head>
-
-  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958); padding: 20px">
-    <tds-banner
-      variant="information"
-      header="This is a header text area"
-      subheader="This is the subheader text area"
-    >
-      <tds-link slot="actions"><a href="/">Link example</a></tds-link>
-    </tds-banner>
-  </body>
-</html>
diff --git a/packages/core/src/components/banner/test/information/lightmode/index.html b/packages/core/src/components/banner/test/information/index.html
similarity index 100%
rename from packages/core/src/components/banner/test/information/lightmode/index.html
rename to packages/core/src/components/banner/test/information/index.html
diff --git a/packages/core/src/components/banner/test/information/lightmode/banner.e2e.ts b/packages/core/src/components/banner/test/information/lightmode/banner.e2e.ts
deleted file mode 100644
index 4c2f1dbb9..000000000
--- a/packages/core/src/components/banner/test/information/lightmode/banner.e2e.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/banner/test/information/lightmode/index.html';
-
-test.describe.parallel('tds-banner-information-lightmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders information banner correctly', async ({ page }) => {
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('icons exists', async ({ page }) => {
-    const images = page.getByRole('img');
-    await expect(images).toHaveCount(2);
-  });
-});
diff --git a/packages/core/src/components/banner/test/information/lightmode/banner.e2e.ts-snapshots/tds-banner-information-lightmode-renders-information-banner-correctly-1-linux.png b/packages/core/src/components/banner/test/information/lightmode/banner.e2e.ts-snapshots/tds-banner-information-lightmode-renders-information-banner-correctly-1-linux.png
deleted file mode 100644
index 35af5b6c0..000000000
Binary files a/packages/core/src/components/banner/test/information/lightmode/banner.e2e.ts-snapshots/tds-banner-information-lightmode-renders-information-banner-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts b/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts
index 0d40eb14b..1a44b5958 100644
--- a/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts
+++ b/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts
@@ -1,13 +1,24 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/block/test/2-level-light-mode/index.html';
+const componentName = 'tds-block';
+const testDescription = 'tds-block-2-level-light-mode';
 
-test.describe.parallel('tds-block-2-level-light-mode', () => {
-  test('renders 2 level block correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('renders 2 level block correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-primary-darkmode-renders-2-level-block-correctly-1-linux.png b/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-primary-darkmode-renders-2-level-block-correctly-1-linux.png
new file mode 100644
index 000000000..ca4e9f7bb
Binary files /dev/null and b/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-primary-darkmode-renders-2-level-block-correctly-1-linux.png differ
diff --git a/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-primary-lightmode-renders-2-level-block-correctly-1-linux.png b/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-primary-lightmode-renders-2-level-block-correctly-1-linux.png
new file mode 100644
index 000000000..2fbe908cb
Binary files /dev/null and b/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-primary-lightmode-renders-2-level-block-correctly-1-linux.png differ
diff --git a/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-renders-2-level-block-correctly-1-linux.png b/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-renders-2-level-block-correctly-1-linux.png
deleted file mode 100644
index e561e1faa..000000000
Binary files a/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-renders-2-level-block-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-secondary-darkmode-renders-2-level-block-correctly-1-linux.png b/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-secondary-darkmode-renders-2-level-block-correctly-1-linux.png
new file mode 100644
index 000000000..e1d0f42f3
Binary files /dev/null and b/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-secondary-darkmode-renders-2-level-block-correctly-1-linux.png differ
diff --git a/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-secondary-lightmode-renders-2-level-block-correctly-1-linux.png b/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-secondary-lightmode-renders-2-level-block-correctly-1-linux.png
new file mode 100644
index 000000000..b8efe0e2d
Binary files /dev/null and b/packages/core/src/components/block/test/2-level-light-mode/block.e2e.ts-snapshots/tds-block-2-level-light-mode-secondary-lightmode-renders-2-level-block-correctly-1-linux.png differ
diff --git a/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts b/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts
index fc007c3aa..835453834 100644
--- a/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts
+++ b/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts
@@ -1,13 +1,24 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/block/test/3-level-dark-mode/index.html';
+const componentName = 'tds-block';
+const testDescription = 'tds-block-3-level-dark-mode';
 
-test.describe.parallel('tds-block-3-level-dark-mode', () => {
-  test('renders 2 level block correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('renders 2 level block correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-primary-darkmode-renders-2-level-block-correctly-1-linux.png b/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-primary-darkmode-renders-2-level-block-correctly-1-linux.png
new file mode 100644
index 000000000..db879904e
Binary files /dev/null and b/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-primary-darkmode-renders-2-level-block-correctly-1-linux.png differ
diff --git a/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-primary-lightmode-renders-2-level-block-correctly-1-linux.png b/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-primary-lightmode-renders-2-level-block-correctly-1-linux.png
new file mode 100644
index 000000000..62f45557e
Binary files /dev/null and b/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-primary-lightmode-renders-2-level-block-correctly-1-linux.png differ
diff --git a/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-renders-2-level-block-correctly-1-linux.png b/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-renders-2-level-block-correctly-1-linux.png
deleted file mode 100644
index f38df3b65..000000000
Binary files a/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-renders-2-level-block-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-secondary-darkmode-renders-2-level-block-correctly-1-linux.png b/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-secondary-darkmode-renders-2-level-block-correctly-1-linux.png
new file mode 100644
index 000000000..92907b4e5
Binary files /dev/null and b/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-secondary-darkmode-renders-2-level-block-correctly-1-linux.png differ
diff --git a/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-secondary-lightmode-renders-2-level-block-correctly-1-linux.png b/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-secondary-lightmode-renders-2-level-block-correctly-1-linux.png
new file mode 100644
index 000000000..1a24940a4
Binary files /dev/null and b/packages/core/src/components/block/test/3-level-dark-mode/block.e2e.ts-snapshots/tds-block-3-level-dark-mode-secondary-lightmode-renders-2-level-block-correctly-1-linux.png differ
diff --git a/packages/core/src/components/breadcrumbs/test/default/lightmode/breadcrumbs.e2e.ts b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts
similarity index 50%
rename from packages/core/src/components/breadcrumbs/test/default/lightmode/breadcrumbs.e2e.ts
rename to packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts
index 667c6101d..3c3cfb44e 100644
--- a/packages/core/src/components/breadcrumbs/test/default/lightmode/breadcrumbs.e2e.ts
+++ b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts
@@ -1,18 +1,41 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
+
+const componentTestPath = 'src/components/breadcrumbs/test/default/index.html';
+const componentName = 'tds-breadcrumbs';
+const testDescription = 'tds-breadcrumbs-default';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default breadcrumbs correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('page 3 item should be able to become focused', async ({ page }) => {
+      const pageThree = page.getByText(/Page 3/);
+      await pageThree.focus();
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
-const componentTestPath = 'src/components/breadcrumbs/test/default/lightmode/index.html';
-
-test.describe.parallel('tds-breadcrumbs-default-lightmode', () => {
+test.describe.parallel(componentName, () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
   });
 
-  test('renders default breadcrumbs correctly', async ({ page }) => {
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
   test('items Page 1, Page 2, Page 3 exist on the page', async ({ page }) => {
     const navigation = page.getByRole('navigation');
     await expect(navigation).toHaveCount(1);
@@ -31,12 +54,4 @@ test.describe.parallel('tds-breadcrumbs-default-lightmode', () => {
     await expect(pageThree).toHaveCount(1);
     await expect(pageThree).toBeVisible();
   });
-
-  test('page 3 item should be able to become focused', async ({ page }) => {
-    const pageThree = page.getByText(/Page 3/);
-    await pageThree.focus();
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
 });
diff --git a/packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-Click-on-toggle---should-become-checked-1-linux.png b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-darkmode-page-3-item-should-be-able-to-become-focused-1-linux.png
similarity index 53%
rename from packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-Click-on-toggle---should-become-checked-1-linux.png
rename to packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-darkmode-page-3-item-should-be-able-to-become-focused-1-linux.png
index 1b7ad677a..6c5ca2053 100644
Binary files a/packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-Click-on-toggle---should-become-checked-1-linux.png and b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-darkmode-page-3-item-should-be-able-to-become-focused-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-renders-success-datetime-component-correctly-1-linux.png b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-darkmode-renders-default-breadcrumbs-correctly-1-linux.png
similarity index 52%
rename from packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-renders-success-datetime-component-correctly-1-linux.png
rename to packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-darkmode-renders-default-breadcrumbs-correctly-1-linux.png
index 38473827a..266805663 100644
Binary files a/packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-renders-success-datetime-component-correctly-1-linux.png and b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-darkmode-renders-default-breadcrumbs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/breadcrumbs/test/default/darkmode/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-darkmode-page-3-item-should-be-able-to-become-focused-1-linux.png b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-lightmode-page-3-item-should-be-able-to-become-focused-1-linux.png
similarity index 60%
rename from packages/core/src/components/breadcrumbs/test/default/darkmode/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-darkmode-page-3-item-should-be-able-to-become-focused-1-linux.png
rename to packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-lightmode-page-3-item-should-be-able-to-become-focused-1-linux.png
index 9782d4632..b3f852456 100644
Binary files a/packages/core/src/components/breadcrumbs/test/default/darkmode/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-darkmode-page-3-item-should-be-able-to-become-focused-1-linux.png and b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-lightmode-page-3-item-should-be-able-to-become-focused-1-linux.png differ
diff --git a/packages/core/src/components/slider/test/read-only/slider.e2e.ts-snapshots/tds-slider-read-only-is-not-disabled-1-linux.png b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-lightmode-renders-default-breadcrumbs-correctly-1-linux.png
similarity index 56%
rename from packages/core/src/components/slider/test/read-only/slider.e2e.ts-snapshots/tds-slider-read-only-is-not-disabled-1-linux.png
rename to packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-lightmode-renders-default-breadcrumbs-correctly-1-linux.png
index f5ddef92a..6fc561499 100644
Binary files a/packages/core/src/components/slider/test/read-only/slider.e2e.ts-snapshots/tds-slider-read-only-is-not-disabled-1-linux.png and b/packages/core/src/components/breadcrumbs/test/default/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-lightmode-renders-default-breadcrumbs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/breadcrumbs/test/default/darkmode/breadcrumbs.e2e.ts b/packages/core/src/components/breadcrumbs/test/default/darkmode/breadcrumbs.e2e.ts
deleted file mode 100644
index 858fb1f6f..000000000
--- a/packages/core/src/components/breadcrumbs/test/default/darkmode/breadcrumbs.e2e.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/breadcrumbs/test/default/darkmode/index.html';
-
-test.describe.parallel('tds-breadcrumbs-default-darkmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders default breadcrumbs correctly', async ({ page }) => {
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('page 3 item should be able to become focused', async ({ page }) => {
-    const pageThree = page.getByText(/Page 3/);
-    await pageThree.focus();
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/breadcrumbs/test/default/darkmode/index.html b/packages/core/src/components/breadcrumbs/test/default/darkmode/index.html
deleted file mode 100644
index 0b42c560a..000000000
--- a/packages/core/src/components/breadcrumbs/test/default/darkmode/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Breadcrumbs - Default</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
-    <script type="module">
-      import { defineCustomElements } from '../../../../../loader/index.es2017.js';
-      defineCustomElements();
-    </script>
-  </head>
-
-  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958)">
-    <tds-breadcrumbs>
-      <tds-breadcrumb>
-        <a href="#">Page 1</a>
-      </tds-breadcrumb>
-      <tds-breadcrumb>
-        <a href="#">Page 2</a>
-      </tds-breadcrumb>
-      <tds-breadcrumb current>
-        <a href="#">Page 3</a>
-      </tds-breadcrumb>
-    </tds-breadcrumbs>
-  </body>
-</html>
diff --git a/packages/core/src/components/breadcrumbs/test/default/lightmode/index.html b/packages/core/src/components/breadcrumbs/test/default/index.html
similarity index 100%
rename from packages/core/src/components/breadcrumbs/test/default/lightmode/index.html
rename to packages/core/src/components/breadcrumbs/test/default/index.html
diff --git a/packages/core/src/components/button/test/basic/button.e2e.ts b/packages/core/src/components/button/test/basic/button.e2e.ts
index a069d3c33..1c67f046a 100644
--- a/packages/core/src/components/button/test/basic/button.e2e.ts
+++ b/packages/core/src/components/button/test/basic/button.e2e.ts
@@ -1,20 +1,37 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/button/test/basic/index.html';
+const componentName = 'tds-button';
+const testDescription = 'tds-button-basic';
 
-test.describe.parallel('tds-button-basic', () => {
-  test('renders basic button correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders basic button correctly', async ({ page }) => {
+      const button = page.getByTestId('tds-button-testid');
+      await expect(button).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('component receives click event', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('component receives click event', async ({ page }) => {
     const button = page.getByRole('button');
     const myEventSpy = await page.spyOnEvent('click');
     await button.click();
@@ -22,19 +39,16 @@ test.describe.parallel('tds-button-basic', () => {
   });
 
   test('expect button to be of role button', async ({ page }) => {
-    await page.goto(componentTestPath);
     const button = page.getByRole('button');
     await expect(button).toHaveCount(1);
   });
 
   test('Text is displayed', async ({ page }) => {
-    await page.goto(componentTestPath);
     const button = page.getByText('Button', { exact: true });
     await expect(button).toBeVisible();
   });
 
   test('Check so that height is correct to lg/default measurements', async ({ page }) => {
-    await page.goto(componentTestPath);
     const button = page.getByText('Button', { exact: true });
     const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
     expect(buttonHeight).toBe('56px');
diff --git a/packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-primary-darkmode-renders-basic-button-correctly-1-linux.png b/packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-primary-darkmode-renders-basic-button-correctly-1-linux.png
new file mode 100644
index 000000000..b4d6d2fc1
Binary files /dev/null and b/packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-primary-darkmode-renders-basic-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-primary-lightmode-renders-basic-button-correctly-1-linux.png b/packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-primary-lightmode-renders-basic-button-correctly-1-linux.png
new file mode 100644
index 000000000..8ec9af0cf
Binary files /dev/null and b/packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-primary-lightmode-renders-basic-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-secondary-darkmode-renders-basic-button-correctly-1-linux.png b/packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-secondary-darkmode-renders-basic-button-correctly-1-linux.png
new file mode 100644
index 000000000..a46eaec54
Binary files /dev/null and b/packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-secondary-darkmode-renders-basic-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-secondary-lightmode-renders-basic-button-correctly-1-linux.png b/packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-secondary-lightmode-renders-basic-button-correctly-1-linux.png
new file mode 100644
index 000000000..d0893679b
Binary files /dev/null and b/packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-secondary-lightmode-renders-basic-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/danger/button.e2e.ts b/packages/core/src/components/button/test/danger/button.e2e.ts
index 1c7ca6069..bfdb1ca49 100644
--- a/packages/core/src/components/button/test/danger/button.e2e.ts
+++ b/packages/core/src/components/button/test/danger/button.e2e.ts
@@ -1,20 +1,37 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/button/test/danger/index.html';
+const componentName = 'tds-button';
+const testDescription = 'tds-button-danger';
 
-test.describe.parallel('tds-button-danger', () => {
-  test('renders danger button correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders danger button correctly', async ({ page }) => {
+      const button = page.getByTestId('tds-button-testid');
+      await expect(button).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('Check so that height is correct to sm measurements', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('Check so that height is correct to sm measurements', async ({ page }) => {
     const button = page.getByText('Button', { exact: true });
     const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
     expect(buttonHeight).toBe('40px');
diff --git a/packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-primary-darkmode-renders-danger-button-correctly-1-linux.png b/packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-primary-darkmode-renders-danger-button-correctly-1-linux.png
new file mode 100644
index 000000000..d42c4d37b
Binary files /dev/null and b/packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-primary-darkmode-renders-danger-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/tds-checkbox-Checkbox-indeterminate-state-1-linux.png b/packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-primary-lightmode-renders-danger-button-correctly-1-linux.png
similarity index 71%
rename from packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/tds-checkbox-Checkbox-indeterminate-state-1-linux.png
rename to packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-primary-lightmode-renders-danger-button-correctly-1-linux.png
index 340465cf0..b2cabdf8c 100644
Binary files a/packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/tds-checkbox-Checkbox-indeterminate-state-1-linux.png and b/packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-primary-lightmode-renders-danger-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-secondary-darkmode-renders-danger-button-correctly-1-linux.png b/packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-secondary-darkmode-renders-danger-button-correctly-1-linux.png
new file mode 100644
index 000000000..384bba297
Binary files /dev/null and b/packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-secondary-darkmode-renders-danger-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-secondary-lightmode-renders-danger-button-correctly-1-linux.png b/packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-secondary-lightmode-renders-danger-button-correctly-1-linux.png
new file mode 100644
index 000000000..353c441cb
Binary files /dev/null and b/packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-secondary-lightmode-renders-danger-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/disabled/button.e2e.ts b/packages/core/src/components/button/test/disabled/button.e2e.ts
index d0510c801..666ce4988 100644
--- a/packages/core/src/components/button/test/disabled/button.e2e.ts
+++ b/packages/core/src/components/button/test/disabled/button.e2e.ts
@@ -1,28 +1,43 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/button/test/disabled/index.html';
+const componentName = 'tds-button';
+const testDescription = 'tds-button-disabled';
 
-test.describe.parallel('tds-button-disabled', () => {
-  test('renders disabled button correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders disabled button correctly', async ({ page }) => {
+      const button = page.getByTestId('tds-button-testid');
+      await expect(button).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('disabled button should be disabled', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('disabled button should be disabled', async ({ page }) => {
     /* Check if disabled */
     const button = page.getByRole('button');
     await expect(button).toBeDisabled();
   });
 
   test('the cursor should be not-allowed', async ({ page }) => {
-    await page.goto(componentTestPath);
     const button = page.getByTestId('tds-button-testid').getByRole('button');
     const buttonCursorState = await button.evaluate((style) => getComputedStyle(style).cursor);
     expect(buttonCursorState).toBe('not-allowed');
diff --git a/packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-primary-darkmode-renders-disabled-button-correctly-1-linux.png b/packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-primary-darkmode-renders-disabled-button-correctly-1-linux.png
new file mode 100644
index 000000000..e6d548f68
Binary files /dev/null and b/packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-primary-darkmode-renders-disabled-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-is-basic-message-rendered-correctly-1-linux.png b/packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-primary-lightmode-renders-disabled-button-correctly-1-linux.png
similarity index 70%
rename from packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-is-basic-message-rendered-correctly-1-linux.png
rename to packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-primary-lightmode-renders-disabled-button-correctly-1-linux.png
index bb1f93a0d..0bdbc779a 100644
Binary files a/packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-is-basic-message-rendered-correctly-1-linux.png and b/packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-primary-lightmode-renders-disabled-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-secondary-darkmode-renders-disabled-button-correctly-1-linux.png b/packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-secondary-darkmode-renders-disabled-button-correctly-1-linux.png
new file mode 100644
index 000000000..223fbe4c2
Binary files /dev/null and b/packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-secondary-darkmode-renders-disabled-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-secondary-lightmode-renders-disabled-button-correctly-1-linux.png b/packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-secondary-lightmode-renders-disabled-button-correctly-1-linux.png
new file mode 100644
index 000000000..4691b55a5
Binary files /dev/null and b/packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-secondary-lightmode-renders-disabled-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/ghost/button.e2e.ts b/packages/core/src/components/button/test/ghost/button.e2e.ts
index 5c40f0093..a5a9b550e 100644
--- a/packages/core/src/components/button/test/ghost/button.e2e.ts
+++ b/packages/core/src/components/button/test/ghost/button.e2e.ts
@@ -1,20 +1,37 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/button/test/ghost/index.html';
+const componentName = 'tds-button';
+const testDescription = 'tds-button-ghost';
 
-test.describe.parallel('tds-button-ghost', () => {
-  test('renders ghost button correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders ghost button correctly', async ({ page }) => {
+      const button = page.getByTestId('tds-button-testid');
+      await expect(button).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('Check so that height is correct to md measurements', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('Check so that height is correct to md measurements', async ({ page }) => {
     const button = page.getByText('Button', { exact: true });
     const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
     expect(buttonHeight).toBe('24px');
diff --git a/packages/core/src/components/slider/test/disabled/slider.e2e.ts-snapshots/tds-slider-disabled-slider-is-disabled-1-linux.png b/packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-primary-darkmode-renders-ghost-button-correctly-1-linux.png
similarity index 74%
rename from packages/core/src/components/slider/test/disabled/slider.e2e.ts-snapshots/tds-slider-disabled-slider-is-disabled-1-linux.png
rename to packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-primary-darkmode-renders-ghost-button-correctly-1-linux.png
index ca15c8025..6d79ed604 100644
Binary files a/packages/core/src/components/slider/test/disabled/slider.e2e.ts-snapshots/tds-slider-disabled-slider-is-disabled-1-linux.png and b/packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-primary-darkmode-renders-ghost-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-renders-ghost-button-correctly-1-linux.png b/packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-primary-lightmode-renders-ghost-button-correctly-1-linux.png
similarity index 81%
rename from packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-renders-ghost-button-correctly-1-linux.png
rename to packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-primary-lightmode-renders-ghost-button-correctly-1-linux.png
index ddf7b6656..8e04718d6 100644
Binary files a/packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-renders-ghost-button-correctly-1-linux.png and b/packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-primary-lightmode-renders-ghost-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-secondary-darkmode-renders-ghost-button-correctly-1-linux.png b/packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-secondary-darkmode-renders-ghost-button-correctly-1-linux.png
new file mode 100644
index 000000000..f5c22f453
Binary files /dev/null and b/packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-secondary-darkmode-renders-ghost-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-renders-disabled-text-field-correctly-1-linux.png b/packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-secondary-lightmode-renders-ghost-button-correctly-1-linux.png
similarity index 68%
rename from packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-renders-disabled-text-field-correctly-1-linux.png
rename to packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-secondary-lightmode-renders-ghost-button-correctly-1-linux.png
index 1ff181dc5..151fc1841 100644
Binary files a/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-renders-disabled-text-field-correctly-1-linux.png and b/packages/core/src/components/button/test/ghost/button.e2e.ts-snapshots/tds-button-ghost-secondary-lightmode-renders-ghost-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/icon/button.e2e.ts b/packages/core/src/components/button/test/icon/button.e2e.ts
index e54dc04c6..bf72f547f 100644
--- a/packages/core/src/components/button/test/icon/button.e2e.ts
+++ b/packages/core/src/components/button/test/icon/button.e2e.ts
@@ -1,49 +1,58 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/button/test/icon/index.html';
+const componentName = 'tds-button';
+const testDescription = 'tds-button-icon';
 
-test.describe.parallel('tds-button-icon', () => {
-  test('renders icon button correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+    test('renders icon button correctly', async ({ page }) => {
+      const button = page.getByTestId('tds-button-testid');
+      await expect(button).toHaveCount(1);
 
-  test('icon should exist', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const icon = page.getByRole('img');
-    await expect(icon).toBeVisible();
-  });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-  test('Check so that height and width is correct to lg/default measurements with a single button', async ({
-    page,
-  }) => {
-    await page.goto(componentTestPath);
-    const button = page.getByRole('button');
-    const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
-    expect(buttonHeight).toBe('56px');
-    const buttonWidth = await button.evaluate((style) => getComputedStyle(style).width);
-    expect(buttonWidth).toBe('56px');
-
-    const icon = page.getByRole('img');
-    const iconHeight = await icon.evaluate((style) => getComputedStyle(style).height);
-    expect(iconHeight).toBe('20px');
-    const iconWidth = await icon.evaluate((style) => getComputedStyle(style).width);
-    expect(iconWidth).toBe('20px');
-  });
+    test('icon should exist', async ({ page }) => {
+      const icon = page.getByRole('img');
+      await expect(icon).toBeVisible();
+    });
+
+    test('Check so that height and width is correct to lg/default measurements with a single button', async ({
+      page,
+    }) => {
+      const button = page.getByRole('button');
+      const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
+      expect(buttonHeight).toBe('56px');
+      const buttonWidth = await button.evaluate((style) => getComputedStyle(style).width);
+      expect(buttonWidth).toBe('56px');
+
+      const icon = page.getByRole('img');
+      const iconHeight = await icon.evaluate((style) => getComputedStyle(style).height);
+      expect(iconHeight).toBe('20px');
+      const iconWidth = await icon.evaluate((style) => getComputedStyle(style).width);
+      expect(iconWidth).toBe('20px');
+    });
 
-  test('Check so that height and width is correct to lg/default measurements with a single button for the icon', async ({
-    page,
-  }) => {
-    await page.goto(componentTestPath);
-    const icon = page.getByRole('img');
-    const iconHeight = await icon.evaluate((style) => getComputedStyle(style).height);
-    expect(iconHeight).toBe('20px');
-    const iconWidth = await icon.evaluate((style) => getComputedStyle(style).width);
-    expect(iconWidth).toBe('20px');
+    test('Check so that height and width is correct to lg/default measurements with a single button for the icon', async ({
+      page,
+    }) => {
+      const icon = page.getByRole('img');
+      const iconHeight = await icon.evaluate((style) => getComputedStyle(style).height);
+      expect(iconHeight).toBe('20px');
+      const iconWidth = await icon.evaluate((style) => getComputedStyle(style).width);
+      expect(iconWidth).toBe('20px');
+    });
   });
 });
diff --git a/packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-primary-darkmode-renders-icon-button-correctly-1-linux.png b/packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-primary-darkmode-renders-icon-button-correctly-1-linux.png
new file mode 100644
index 000000000..556a95ad2
Binary files /dev/null and b/packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-primary-darkmode-renders-icon-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-primary-lightmode-renders-icon-button-correctly-1-linux.png b/packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-primary-lightmode-renders-icon-button-correctly-1-linux.png
new file mode 100644
index 000000000..8fd32f689
Binary files /dev/null and b/packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-primary-lightmode-renders-icon-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-secondary-darkmode-renders-icon-button-correctly-1-linux.png b/packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-secondary-darkmode-renders-icon-button-correctly-1-linux.png
new file mode 100644
index 000000000..487871eb9
Binary files /dev/null and b/packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-secondary-darkmode-renders-icon-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-secondary-lightmode-renders-icon-button-correctly-1-linux.png b/packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-secondary-lightmode-renders-icon-button-correctly-1-linux.png
new file mode 100644
index 000000000..7f9741fc1
Binary files /dev/null and b/packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-secondary-lightmode-renders-icon-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/secondary/button.e2e.ts b/packages/core/src/components/button/test/secondary/button.e2e.ts
new file mode 100644
index 000000000..4331f8419
--- /dev/null
+++ b/packages/core/src/components/button/test/secondary/button.e2e.ts
@@ -0,0 +1,39 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
+
+const componentTestPath = 'src/components/button/test/secondary/index.html';
+const componentName = 'tds-button';
+const testDescription = 'tds-button-secondary';
+
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders secondary button correctly', async ({ page }) => {
+      const button = page.getByTestId('tds-button-testid');
+      await expect(button).toHaveCount(1);
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('Check so that height is correct to md measurements', async ({ page }) => {
+    const button = page.getByText('Button', { exact: true });
+    const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
+    expect(buttonHeight).toBe('48px');
+  });
+});
diff --git a/packages/core/src/components/button/test/secondary/button.e2e.ts-snapshots/tds-button-secondary-primary-darkmode-renders-secondary-button-correctly-1-linux.png b/packages/core/src/components/button/test/secondary/button.e2e.ts-snapshots/tds-button-secondary-primary-darkmode-renders-secondary-button-correctly-1-linux.png
new file mode 100644
index 000000000..8b289dd0d
Binary files /dev/null and b/packages/core/src/components/button/test/secondary/button.e2e.ts-snapshots/tds-button-secondary-primary-darkmode-renders-secondary-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/secondary/button.e2e.ts-snapshots/tds-button-secondary-primary-lightmode-renders-secondary-button-correctly-1-linux.png b/packages/core/src/components/button/test/secondary/button.e2e.ts-snapshots/tds-button-secondary-primary-lightmode-renders-secondary-button-correctly-1-linux.png
new file mode 100644
index 000000000..f39b7b7fa
Binary files /dev/null and b/packages/core/src/components/button/test/secondary/button.e2e.ts-snapshots/tds-button-secondary-primary-lightmode-renders-secondary-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/secondary/button.e2e.ts-snapshots/tds-button-secondary-secondary-darkmode-renders-secondary-button-correctly-1-linux.png b/packages/core/src/components/button/test/secondary/button.e2e.ts-snapshots/tds-button-secondary-secondary-darkmode-renders-secondary-button-correctly-1-linux.png
new file mode 100644
index 000000000..9cde462e2
Binary files /dev/null and b/packages/core/src/components/button/test/secondary/button.e2e.ts-snapshots/tds-button-secondary-secondary-darkmode-renders-secondary-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/secondary/button.e2e.ts-snapshots/tds-button-secondary-secondary-lightmode-renders-secondary-button-correctly-1-linux.png b/packages/core/src/components/button/test/secondary/button.e2e.ts-snapshots/tds-button-secondary-secondary-lightmode-renders-secondary-button-correctly-1-linux.png
new file mode 100644
index 000000000..4f3a10e2c
Binary files /dev/null and b/packages/core/src/components/button/test/secondary/button.e2e.ts-snapshots/tds-button-secondary-secondary-lightmode-renders-secondary-button-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/secondary/unspecified/index.html b/packages/core/src/components/button/test/secondary/index.html
similarity index 100%
rename from packages/core/src/components/button/test/secondary/unspecified/index.html
rename to packages/core/src/components/button/test/secondary/index.html
diff --git a/packages/core/src/components/button/test/secondary/primary/darkmode/button.e2e.ts b/packages/core/src/components/button/test/secondary/primary/darkmode/button.e2e.ts
deleted file mode 100644
index c4d124593..000000000
--- a/packages/core/src/components/button/test/secondary/primary/darkmode/button.e2e.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/button/test/secondary/primary/darkmode/index.html';
-
-test.describe.parallel('tds-button-secondary-primary-darkmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders secondary button correctly', async ({ page }) => {
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/button/test/secondary/primary/darkmode/index.html b/packages/core/src/components/button/test/secondary/primary/darkmode/index.html
deleted file mode 100644
index 442c234f2..000000000
--- a/packages/core/src/components/button/test/secondary/primary/darkmode/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Button - Secondary</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
-    <script type="module">
-      import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
-      defineCustomElements();
-    </script>
-  </head>
-
-  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958); padding: 20px">
-    <tds-button
-      text="Button"
-      variant="secondary"
-      mode-variant="primary"
-      size="md"
-      data-testid="tds-button-testid"
-    ></tds-button>
-  </body>
-</html>
diff --git a/packages/core/src/components/button/test/secondary/primary/lightmode/button.e2e.ts b/packages/core/src/components/button/test/secondary/primary/lightmode/button.e2e.ts
deleted file mode 100644
index 3b1b8adf0..000000000
--- a/packages/core/src/components/button/test/secondary/primary/lightmode/button.e2e.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/button/test/secondary/primary/lightmode/index.html';
-
-test.describe.parallel('tds-button-secondary-primary-lightmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders secondary button correctly', async ({ page }) => {
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/button/test/secondary/primary/lightmode/index.html b/packages/core/src/components/button/test/secondary/primary/lightmode/index.html
deleted file mode 100644
index 21feb9538..000000000
--- a/packages/core/src/components/button/test/secondary/primary/lightmode/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Button - Secondary</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
-    <script type="module">
-      import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
-      defineCustomElements();
-    </script>
-  </head>
-
-  <body style="padding: 20px">
-    <tds-button
-      text="Button"
-      variant="secondary"
-      mode-variant="primary"
-      size="md"
-      data-testid="tds-button-testid"
-    ></tds-button>
-  </body>
-</html>
diff --git a/packages/core/src/components/button/test/secondary/secondary/darkmode/button.e2e.ts b/packages/core/src/components/button/test/secondary/secondary/darkmode/button.e2e.ts
deleted file mode 100644
index 09bd2c551..000000000
--- a/packages/core/src/components/button/test/secondary/secondary/darkmode/button.e2e.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/button/test/secondary/secondary/darkmode/index.html';
-
-test.describe.parallel('tds-button-secondary-secondary-darkmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders secondary button correctly', async ({ page }) => {
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/button/test/secondary/secondary/darkmode/index.html b/packages/core/src/components/button/test/secondary/secondary/darkmode/index.html
deleted file mode 100644
index 3ec0e8b03..000000000
--- a/packages/core/src/components/button/test/secondary/secondary/darkmode/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Button - Secondary</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
-    <script type="module">
-      import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
-      defineCustomElements();
-    </script>
-  </head>
-
-  <body class="tds-mode-dark" style="background-color: var(--tds-grey-900); padding: 20px">
-    <tds-button
-      text="Button"
-      variant="secondary"
-      mode-variant="secondary"
-      size="md"
-      data-testid="tds-button-testid"
-    ></tds-button>
-  </body>
-</html>
diff --git a/packages/core/src/components/button/test/secondary/secondary/lightmode/button.e2e.ts b/packages/core/src/components/button/test/secondary/secondary/lightmode/button.e2e.ts
deleted file mode 100644
index aa1aa4bee..000000000
--- a/packages/core/src/components/button/test/secondary/secondary/lightmode/button.e2e.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/button/test/secondary/secondary/lightmode/index.html';
-
-test.describe.parallel('tds-button-secondary-secondary-lightmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders secondary button correctly', async ({ page }) => {
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/button/test/secondary/secondary/lightmode/index.html b/packages/core/src/components/button/test/secondary/secondary/lightmode/index.html
deleted file mode 100644
index dca1481ae..000000000
--- a/packages/core/src/components/button/test/secondary/secondary/lightmode/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Button - Secondary</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
-    <script type="module">
-      import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
-      defineCustomElements();
-    </script>
-  </head>
-
-  <body style="background-color: var(--tds-grey-50); padding: 20px">
-    <tds-button
-      text="Button"
-      variant="secondary"
-      mode-variant="secondary"
-      size="md"
-      data-testid="tds-button-testid"
-    ></tds-button>
-  </body>
-</html>
diff --git a/packages/core/src/components/button/test/secondary/unspecified/button.e2e.ts b/packages/core/src/components/button/test/secondary/unspecified/button.e2e.ts
deleted file mode 100644
index cbbd0ae87..000000000
--- a/packages/core/src/components/button/test/secondary/unspecified/button.e2e.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/button/test/secondary/unspecified/index.html';
-
-test.describe.parallel('tds-button-secondary', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders secondary button correctly', async ({ page }) => {
-    const button = page.getByTestId('tds-button-testid');
-    await expect(button).toHaveCount(1);
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('Check so that height is correct to md measurements', async ({ page }) => {
-    const button = page.getByText('Button', { exact: true });
-    const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
-    expect(buttonHeight).toBe('48px');
-  });
-});
diff --git a/packages/core/src/components/card/test/basic/card.e2e.ts b/packages/core/src/components/card/test/basic/card.e2e.ts
index 8a46294d8..730b19148 100644
--- a/packages/core/src/components/card/test/basic/card.e2e.ts
+++ b/packages/core/src/components/card/test/basic/card.e2e.ts
@@ -1,13 +1,24 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/card/test/basic/index.html';
+const componentName = 'tds-card';
+const testDescription = 'tds-card-basic';
 
-test.describe('tds-card-basic', () => {
-  test('renders basic card correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('renders basic card correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/button/test/secondary/unspecified/button.e2e.ts-snapshots/tds-button-secondary-renders-secondary-button-correctly-1-linux.png b/packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-primary-darkmode-renders-basic-card-correctly-1-linux.png
similarity index 70%
rename from packages/core/src/components/button/test/secondary/unspecified/button.e2e.ts-snapshots/tds-button-secondary-renders-secondary-button-correctly-1-linux.png
rename to packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-primary-darkmode-renders-basic-card-correctly-1-linux.png
index 9b61cbfc8..7244bb3ac 100644
Binary files a/packages/core/src/components/button/test/secondary/unspecified/button.e2e.ts-snapshots/tds-button-secondary-renders-secondary-button-correctly-1-linux.png and b/packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-primary-darkmode-renders-basic-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-renders-danger-button-correctly-1-linux.png b/packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-primary-lightmode-renders-basic-card-correctly-1-linux.png
similarity index 74%
rename from packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-renders-danger-button-correctly-1-linux.png
rename to packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-primary-lightmode-renders-basic-card-correctly-1-linux.png
index d4f16152e..8c0ddd59c 100644
Binary files a/packages/core/src/components/button/test/danger/button.e2e.ts-snapshots/tds-button-danger-renders-danger-button-correctly-1-linux.png and b/packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-primary-lightmode-renders-basic-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-secondary-darkmode-renders-basic-card-correctly-1-linux.png b/packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-secondary-darkmode-renders-basic-card-correctly-1-linux.png
new file mode 100644
index 000000000..450884bf6
Binary files /dev/null and b/packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-secondary-darkmode-renders-basic-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-renders-basic-card-correctly-1-linux.png b/packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-secondary-lightmode-renders-basic-card-correctly-1-linux.png
similarity index 81%
rename from packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-renders-basic-card-correctly-1-linux.png
rename to packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-secondary-lightmode-renders-basic-card-correctly-1-linux.png
index 4498706ca..a8664fe89 100644
Binary files a/packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-renders-basic-card-correctly-1-linux.png and b/packages/core/src/components/card/test/basic/card.e2e.ts-snapshots/tds-card-basic-secondary-lightmode-renders-basic-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/card/test/clickable/card.e2e.ts b/packages/core/src/components/card/test/clickable/card.e2e.ts
index f456fc326..192b5ab10 100644
--- a/packages/core/src/components/card/test/clickable/card.e2e.ts
+++ b/packages/core/src/components/card/test/clickable/card.e2e.ts
@@ -1,20 +1,37 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/card/test/clickable/index.html';
+const componentName = 'tds-card';
+const testDescription = 'tds-card-clickable';
 
-test.describe.parallel('tds-card-clickable', () => {
-  test('renders clickable card correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const cardButton = page.getByRole('button');
-    await cardButton.hover();
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders clickable card correctly', async ({ page }) => {
+      const cardButton = page.getByRole('button');
+      await cardButton.hover();
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('card should contain a button that is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const cardButton = page.getByRole('button');
     await expect(cardButton).toHaveCount(1);
     await expect(cardButton).toBeVisible();
diff --git a/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-primary-darkmode-renders-clickable-card-correctly-1-linux.png b/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-primary-darkmode-renders-clickable-card-correctly-1-linux.png
new file mode 100644
index 000000000..93dac363e
Binary files /dev/null and b/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-primary-darkmode-renders-clickable-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-primary-lightmode-renders-clickable-card-correctly-1-linux.png b/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-primary-lightmode-renders-clickable-card-correctly-1-linux.png
new file mode 100644
index 000000000..73bc0767a
Binary files /dev/null and b/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-primary-lightmode-renders-clickable-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-renders-clickable-card-correctly-1-linux.png b/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-renders-clickable-card-correctly-1-linux.png
deleted file mode 100644
index d47e65d93..000000000
Binary files a/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-renders-clickable-card-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-secondary-darkmode-renders-clickable-card-correctly-1-linux.png b/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-secondary-darkmode-renders-clickable-card-correctly-1-linux.png
new file mode 100644
index 000000000..0554ebf12
Binary files /dev/null and b/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-secondary-darkmode-renders-clickable-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-secondary-lightmode-renders-clickable-card-correctly-1-linux.png b/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-secondary-lightmode-renders-clickable-card-correctly-1-linux.png
new file mode 100644
index 000000000..46aee8109
Binary files /dev/null and b/packages/core/src/components/card/test/clickable/card.e2e.ts-snapshots/tds-card-clickable-secondary-lightmode-renders-clickable-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/card/test/default/card.e2e.ts b/packages/core/src/components/card/test/default/card.e2e.ts
index da2782fcd..01b278e6d 100644
--- a/packages/core/src/components/card/test/default/card.e2e.ts
+++ b/packages/core/src/components/card/test/default/card.e2e.ts
@@ -1,39 +1,52 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/card/test/default/index.html';
+const componentName = 'tds-card';
+const testDescription = 'tds-card-default';
 
-test.describe.parallel('tds-card-default', () => {
-  test('renders default card correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('renders default card correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('header text exists', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('header text exists', async ({ page }) => {
     const cardHeaderText = page.getByText('Header text', { exact: true });
     await expect(cardHeaderText).toHaveCount(1);
     await expect(cardHeaderText).toBeVisible();
   });
 
   test('subheader text exists', async ({ page }) => {
-    await page.goto(componentTestPath);
     const cardSubheaderText = page.getByText('Subheader text', { exact: true });
     await expect(cardSubheaderText).toHaveCount(1);
     await expect(cardSubheaderText).toBeVisible();
   });
 
   test('arrow icon exists', async ({ page }) => {
-    await page.goto(componentTestPath);
     const cardTdsIcon = page.getByRole('img');
     await expect(cardTdsIcon).toHaveCount(1);
     await expect(cardTdsIcon).toBeVisible();
   });
 
   test('card should not contain a button that is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const cardButton = page.getByRole('button');
     await expect(cardButton).toHaveCount(0);
   });
diff --git a/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-primary-darkmode-renders-default-card-correctly-1-linux.png b/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-primary-darkmode-renders-default-card-correctly-1-linux.png
new file mode 100644
index 000000000..a70eb94b5
Binary files /dev/null and b/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-primary-darkmode-renders-default-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-primary-lightmode-renders-default-card-correctly-1-linux.png b/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-primary-lightmode-renders-default-card-correctly-1-linux.png
new file mode 100644
index 000000000..75283efd3
Binary files /dev/null and b/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-primary-lightmode-renders-default-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-renders-default-card-correctly-1-linux.png b/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-renders-default-card-correctly-1-linux.png
deleted file mode 100644
index 51acc94d4..000000000
Binary files a/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-renders-default-card-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-secondary-darkmode-renders-default-card-correctly-1-linux.png b/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-secondary-darkmode-renders-default-card-correctly-1-linux.png
new file mode 100644
index 000000000..e78bec2a9
Binary files /dev/null and b/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-secondary-darkmode-renders-default-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-secondary-lightmode-renders-default-card-correctly-1-linux.png b/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-secondary-lightmode-renders-default-card-correctly-1-linux.png
new file mode 100644
index 000000000..91192289c
Binary files /dev/null and b/packages/core/src/components/card/test/default/card.e2e.ts-snapshots/tds-card-default-secondary-lightmode-renders-default-card-correctly-1-linux.png differ
diff --git a/packages/core/src/components/checkbox/test/default/checkbox.e2e.ts b/packages/core/src/components/checkbox/test/default/checkbox.e2e.ts
new file mode 100644
index 000000000..011de5f6f
--- /dev/null
+++ b/packages/core/src/components/checkbox/test/default/checkbox.e2e.ts
@@ -0,0 +1,45 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
+
+const componentTestPath = 'src/components/checkbox/test/default/index.html';
+const componentName = 'tds-checkbox';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders basic checkbox correctly', async ({ page }) => {
+      const labelElement = page.locator('tds-checkbox label'); // Target label underneath checkbox
+
+      expect(labelElement).toHaveText('Label'); // Check label text
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('Hover and click on checkbox -> should become checked', async ({ page }) => {
+    const checkbox = page.locator('tds-checkbox');
+    // Hover over the checkbox
+    await checkbox.hover();
+
+    // Click the checkbox
+    await checkbox.click();
+
+    // Check if the checkbox is now checked
+    const isChecked = await checkbox.evaluate((element: HTMLInputElement) => element.checked);
+    expect(isChecked).toBe(true);
+  });
+});
diff --git a/packages/core/src/components/checkbox/test/default/darkmode/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-renders-basic-checkbox-correctly-1-linux.png b/packages/core/src/components/checkbox/test/default/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-renders-basic-checkbox-correctly-1-linux.png
similarity index 75%
rename from packages/core/src/components/checkbox/test/default/darkmode/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-renders-basic-checkbox-correctly-1-linux.png
rename to packages/core/src/components/checkbox/test/default/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-renders-basic-checkbox-correctly-1-linux.png
index 7766febba..c69c43bab 100644
Binary files a/packages/core/src/components/checkbox/test/default/darkmode/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-renders-basic-checkbox-correctly-1-linux.png and b/packages/core/src/components/checkbox/test/default/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-renders-basic-checkbox-correctly-1-linux.png differ
diff --git a/packages/core/src/components/checkbox/test/default/lightmode/checkbox.e2e.ts-snapshots/tds-checkbox-lightmode-renders-basic-checkbox-correctly-1-linux.png b/packages/core/src/components/checkbox/test/default/checkbox.e2e.ts-snapshots/tds-checkbox-lightmode-renders-basic-checkbox-correctly-1-linux.png
similarity index 78%
rename from packages/core/src/components/checkbox/test/default/lightmode/checkbox.e2e.ts-snapshots/tds-checkbox-lightmode-renders-basic-checkbox-correctly-1-linux.png
rename to packages/core/src/components/checkbox/test/default/checkbox.e2e.ts-snapshots/tds-checkbox-lightmode-renders-basic-checkbox-correctly-1-linux.png
index dbca930d7..8354e74b9 100644
Binary files a/packages/core/src/components/checkbox/test/default/lightmode/checkbox.e2e.ts-snapshots/tds-checkbox-lightmode-renders-basic-checkbox-correctly-1-linux.png and b/packages/core/src/components/checkbox/test/default/checkbox.e2e.ts-snapshots/tds-checkbox-lightmode-renders-basic-checkbox-correctly-1-linux.png differ
diff --git a/packages/core/src/components/checkbox/test/default/darkmode/checkbox.e2e.ts b/packages/core/src/components/checkbox/test/default/darkmode/checkbox.e2e.ts
deleted file mode 100644
index d780ee288..000000000
--- a/packages/core/src/components/checkbox/test/default/darkmode/checkbox.e2e.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/checkbox/test/default/darkmode/index.html';
-
-test.describe.parallel('tds-checkbox-darkmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders basic checkbox correctly', async ({ page }) => {
-    const labelElement = page.locator('tds-checkbox label'); // Target label underneath checkbox
-
-    expect(labelElement).toHaveText('Label'); // Check label text
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/checkbox/test/default/darkmode/index.html b/packages/core/src/components/checkbox/test/default/darkmode/index.html
deleted file mode 100644
index e0e1d5fc5..000000000
--- a/packages/core/src/components/checkbox/test/default/darkmode/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Checkbox - Default</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
-    <script type="module">
-      import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
-      defineCustomElements();
-    </script>
-  </head>
-
-  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958)">
-    <tds-checkbox>
-      <span slot="label">Label</span>
-    </tds-checkbox>
-  </body>
-</html>
diff --git a/packages/core/src/components/checkbox/test/default/lightmode/index.html b/packages/core/src/components/checkbox/test/default/index.html
similarity index 71%
rename from packages/core/src/components/checkbox/test/default/lightmode/index.html
rename to packages/core/src/components/checkbox/test/default/index.html
index 4672162a2..aeebf8d87 100644
--- a/packages/core/src/components/checkbox/test/default/lightmode/index.html
+++ b/packages/core/src/components/checkbox/test/default/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <title>Checkbox - Default</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
+    <link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
     <script type="module">
-      import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
+      import { defineCustomElements } from '../../../../../loader/index.es2017.js';
       defineCustomElements();
     </script>
   </head>
diff --git a/packages/core/src/components/checkbox/test/default/lightmode/checkbox.e2e.ts b/packages/core/src/components/checkbox/test/default/lightmode/checkbox.e2e.ts
deleted file mode 100644
index 1d412f214..000000000
--- a/packages/core/src/components/checkbox/test/default/lightmode/checkbox.e2e.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/checkbox/test/default/lightmode/index.html';
-
-test.describe.parallel('tds-checkbox-lightmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders basic checkbox correctly', async ({ page }) => {
-    const labelElement = page.locator('tds-checkbox label'); // Target label underneath checkbox
-
-    expect(labelElement).toHaveText('Label'); // Check label text
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('Hover and click on checkbox -> should become checked', async ({ page }) => {
-    const checkbox = page.locator('tds-checkbox');
-    // Hover over the checkbox
-    await checkbox.hover();
-
-    // Click the checkbox
-    await checkbox.click();
-
-    // Check if the checkbox is now checked
-    const isChecked = await checkbox.evaluate((element: HTMLInputElement) => element.checked);
-    expect(isChecked).toBe(true);
-  });
-});
diff --git a/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts b/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts
index 07123a5b1..4e12ac182 100644
--- a/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts
+++ b/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts
@@ -1,33 +1,41 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/checkbox/test/disabled/index.html';
+const componentName = 'tds-checkbox';
 
-test.describe('tds-checkbox', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('Hover over checkbox and label -> cursor should become inactive', async ({ page }) => {
-    // Find the checkbox and label elements
-    const checkbox = page.locator('tds-checkbox');
-    const input = page.locator('tds-checkbox input');
-    const labelElement = page.locator('tds-checkbox label'); // Target label underneath checkbox
+    test('Hover over checkbox and label -> cursor should become inactive', async ({ page }) => {
+      // Find the checkbox and label elements
+      const checkbox = page.locator('tds-checkbox');
+      const input = page.locator('tds-checkbox input');
+      const labelElement = page.locator('tds-checkbox label'); // Target label underneath checkbox
 
-    expect(labelElement).toHaveText('Label'); // Check label text
-    await expect(input).toBeDisabled();
+      expect(labelElement).toHaveText('Label'); // Check label text
+      await expect(input).toBeDisabled();
 
-    // Hover over checkbox and label
-    await checkbox.hover();
-    await labelElement.hover();
-    const labelElementCursorStyle = await labelElement.evaluate(
-      (style) => getComputedStyle(style).cursor,
-    );
-    const inputCursorStyle = await input.evaluate((style) => getComputedStyle(style).cursor);
+      // Hover over checkbox and label
+      await checkbox.hover();
+      await labelElement.hover();
+      const labelElementCursorStyle = await labelElement.evaluate(
+        (style) => getComputedStyle(style).cursor,
+      );
+      const inputCursorStyle = await input.evaluate((style) => getComputedStyle(style).cursor);
 
-    expect(labelElementCursorStyle).toBe('not-allowed');
-    expect(inputCursorStyle).toBe('not-allowed');
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      expect(labelElementCursorStyle).toBe('not-allowed');
+      expect(inputCursorStyle).toBe('not-allowed');
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-Hover-over-checkbox-and-label---cursor-should-become-inactive-1-linux.png b/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-Hover-over-checkbox-and-label---cursor-should-become-inactive-1-linux.png
new file mode 100644
index 000000000..77271e397
Binary files /dev/null and b/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-Hover-over-checkbox-and-label---cursor-should-become-inactive-1-linux.png differ
diff --git a/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts-snapshots/tds-checkbox-Hover-over-checkbox-and-label---cursor-should-become-inactive-1-linux.png b/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts-snapshots/tds-checkbox-lightmode-Hover-over-checkbox-and-label---cursor-should-become-inactive-1-linux.png
similarity index 78%
rename from packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts-snapshots/tds-checkbox-Hover-over-checkbox-and-label---cursor-should-become-inactive-1-linux.png
rename to packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts-snapshots/tds-checkbox-lightmode-Hover-over-checkbox-and-label---cursor-should-become-inactive-1-linux.png
index 23aab15a4..21a6ea000 100644
Binary files a/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts-snapshots/tds-checkbox-Hover-over-checkbox-and-label---cursor-should-become-inactive-1-linux.png and b/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts-snapshots/tds-checkbox-lightmode-Hover-over-checkbox-and-label---cursor-should-become-inactive-1-linux.png differ
diff --git a/packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts b/packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts
index 07a525b9a..9e2f6281d 100644
--- a/packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts
+++ b/packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts
@@ -1,28 +1,36 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/checkbox/test/indeterminate/index.html';
+const componentName = 'tds-checkbox';
 
-test.describe('tds-checkbox', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('Checkbox indeterminate state', async ({ page }) => {
-    // Find the checkbox and label elements
-    const checkbox = page.locator('tds-checkbox');
-    const labelElement = page.locator('tds-checkbox label'); // Target label underneath checkbox
+    test('Checkbox indeterminate state', async ({ page }) => {
+      // Find the checkbox and label elements
+      const checkbox = page.locator('tds-checkbox');
+      const labelElement = page.locator('tds-checkbox label'); // Target label underneath checkbox
 
-    // Hover over checkbox and label
-    await checkbox.hover();
-    await labelElement.hover();
+      // Hover over checkbox and label
+      await checkbox.hover();
+      await labelElement.hover();
 
-    const indeterminateValue = await checkbox.getAttribute('indeterminate');
+      const indeterminateValue = await checkbox.getAttribute('indeterminate');
 
-    expect(labelElement).toHaveText('Label'); // Check label text
-    expect(indeterminateValue).not.toBeNull();
+      expect(labelElement).toHaveText('Label'); // Check label text
+      expect(indeterminateValue).not.toBeNull();
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-Checkbox-indeterminate-state-1-linux.png b/packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-Checkbox-indeterminate-state-1-linux.png
new file mode 100644
index 000000000..125805ca0
Binary files /dev/null and b/packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-Checkbox-indeterminate-state-1-linux.png differ
diff --git a/packages/core/src/components/button/test/secondary/primary/lightmode/button.e2e.ts-snapshots/tds-button-secondary-primary-lightmode-renders-secondary-button-correctly-1-linux.png b/packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/tds-checkbox-lightmode-Checkbox-indeterminate-state-1-linux.png
similarity index 71%
rename from packages/core/src/components/button/test/secondary/primary/lightmode/button.e2e.ts-snapshots/tds-button-secondary-primary-lightmode-renders-secondary-button-correctly-1-linux.png
rename to packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/tds-checkbox-lightmode-Checkbox-indeterminate-state-1-linux.png
index 8f1547ffb..b930089af 100644
Binary files a/packages/core/src/components/button/test/secondary/primary/lightmode/button.e2e.ts-snapshots/tds-button-secondary-primary-lightmode-renders-secondary-button-correctly-1-linux.png and b/packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts-snapshots/tds-checkbox-lightmode-Checkbox-indeterminate-state-1-linux.png differ
diff --git a/packages/core/src/components/chip/test/checkbox/chip.e2e.ts b/packages/core/src/components/chip/test/checkbox/chip.e2e.ts
index 444079b33..baf3a61da 100644
--- a/packages/core/src/components/chip/test/checkbox/chip.e2e.ts
+++ b/packages/core/src/components/chip/test/checkbox/chip.e2e.ts
@@ -1,32 +1,48 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/chip/test/checkbox/index.html';
+const componentName = 'tds-chip';
+const testDescription = 'tds-chip-checkbox';
 
-test.describe.parallel('tds-chip-checkbox', () => {
-  test('renders checkbox chips correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const chip1 = page.getByText('Label 1', { exact: true });
-    await expect(chip1).toHaveCount(1);
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders checkbox chips correctly', async ({ page }) => {
+      const chip1 = page.getByText('Label 1', { exact: true });
+      await expect(chip1).toHaveCount(1);
 
-    const chip2 = page.getByText('Label 2', { exact: true });
-    await expect(chip2).toHaveCount(1);
+      const chip2 = page.getByText('Label 2', { exact: true });
+      await expect(chip2).toHaveCount(1);
 
-    const chip3 = page.getByText('Label 3', { exact: true });
-    await expect(chip3).toHaveCount(1);
+      const chip3 = page.getByText('Label 3', { exact: true });
+      await expect(chip3).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('expect chips to be of the role checkbox', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('expect chips to be of the role checkbox', async ({ page }) => {
     const chipRole = page.getByRole('checkbox');
     await expect(chipRole).toHaveCount(3);
   });
 
   test('Check so that height is correct to lg/default measurements', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip1 = page.locator('tds-chip label').filter({ hasText: `Label 1` });
     const chipHeight1 = await chip1.evaluate((style) => getComputedStyle(style).height);
     expect(chipHeight1).toBe('32px');
@@ -41,7 +57,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 
   test('Chip 1 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip = page.locator('tds-chip label').filter({ hasText: `Label 1` });
     chip.hover();
     const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
@@ -53,7 +68,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 
   test('Chip 2 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip = page.locator('tds-chip label').filter({ hasText: `Label 2` });
     chip.hover();
     const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
@@ -65,7 +79,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 
   test('Chip 3 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip = page.locator('tds-chip label').filter({ hasText: `Label 3` });
     chip.hover();
     const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
@@ -77,14 +90,12 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 
   test('1st chip is checked', async ({ page }) => {
-    await page.goto(componentTestPath);
     const checkedLabel1Chip = page.locator('input[id="option-1"]');
     const isChecked = await checkedLabel1Chip.evaluate((node: HTMLInputElement) => node.checked);
     expect(isChecked).toBeTruthy();
   });
 
   test('Clicking "Label 2" chip changes checked state appropriately', async ({ page }) => {
-    await page.goto(componentTestPath);
     const labelText2 = page.locator('text=Label 2');
     await labelText2.click();
     const chip1 = page.locator('input[id="option-1"]');
@@ -107,7 +118,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   test('Clicking "Label 2" and "Label 3" chips changes checked state appropriately', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const labelText2 = page.locator('text=Label 2');
     await labelText2.click();
     const labelText3 = page.locator('text=Label 3');
@@ -132,7 +142,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   test('Clicking "Label 1", "Label 2" and "Label 3" chips changes checked state appropriately', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const labelText1 = page.locator('text=Label 1');
     await labelText1.click();
     const labelText2 = page.locator('text=Label 2');
diff --git a/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-darkmode-renders-checkbox-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-darkmode-renders-checkbox-chips-correctly-1-linux.png
new file mode 100644
index 000000000..946238c7a
Binary files /dev/null and b/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-darkmode-renders-checkbox-chips-correctly-1-linux.png differ
diff --git a/packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-Renders-basic-toggle-correctly-1-linux.png b/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-lightmode-renders-checkbox-chips-correctly-1-linux.png
similarity index 50%
rename from packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-Renders-basic-toggle-correctly-1-linux.png
rename to packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-lightmode-renders-checkbox-chips-correctly-1-linux.png
index c522226b4..17e520c46 100644
Binary files a/packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-Renders-basic-toggle-correctly-1-linux.png and b/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-lightmode-renders-checkbox-chips-correctly-1-linux.png differ
diff --git a/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-renders-checkbox-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-renders-checkbox-chips-correctly-1-linux.png
deleted file mode 100644
index 74f9e4ff7..000000000
Binary files a/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-renders-checkbox-chips-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/chip/test/default/chip.e2e.ts b/packages/core/src/components/chip/test/default/chip.e2e.ts
index 905f9e1e3..5e9eba77a 100644
--- a/packages/core/src/components/chip/test/default/chip.e2e.ts
+++ b/packages/core/src/components/chip/test/default/chip.e2e.ts
@@ -1,36 +1,51 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/chip/test/default/index.html';
+const componentName = 'tds-chip';
+const testDescription = 'tds-chip-default';
 
-test.describe.parallel('tds-chip-default', () => {
-  test('renders default chip correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const chip = page.locator('tds-chip');
-    await expect(chip).toHaveCount(1);
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default chip correctly', async ({ page }) => {
+      const chip = page.locator('tds-chip');
+      await expect(chip).toHaveCount(1);
 
-    const labelElement = page.locator('tds-chip label'); // Target label underneath chip
-    expect(labelElement).toHaveText('Label');
+      const labelElement = page.locator('tds-chip label'); // Target label underneath chip
+      expect(labelElement).toHaveText('Label');
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('expect chip to be of the role button', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('expect chip to be of the role button', async ({ page }) => {
     const chipRole = page.getByRole('button');
     await expect(chipRole).toHaveCount(1);
   });
 
   test('Check so that height is correct to lg/default measurements', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip = page.locator('tds-chip label');
     const chipHeight = await chip.evaluate((style) => getComputedStyle(style).height);
     expect(chipHeight).toBe('32px');
   });
 
   test('Chip is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip = page.locator('tds-chip label');
     chip.hover();
     const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
diff --git a/packages/core/src/components/button/test/secondary/primary/darkmode/button.e2e.ts-snapshots/tds-button-secondary-primary-darkmode-renders-secondary-button-correctly-1-linux.png b/packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-darkmode-renders-default-chip-correctly-1-linux.png
similarity index 63%
rename from packages/core/src/components/button/test/secondary/primary/darkmode/button.e2e.ts-snapshots/tds-button-secondary-primary-darkmode-renders-secondary-button-correctly-1-linux.png
rename to packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-darkmode-renders-default-chip-correctly-1-linux.png
index 7f54b1957..060294650 100644
Binary files a/packages/core/src/components/button/test/secondary/primary/darkmode/button.e2e.ts-snapshots/tds-button-secondary-primary-darkmode-renders-secondary-button-correctly-1-linux.png and b/packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-darkmode-renders-default-chip-correctly-1-linux.png differ
diff --git a/packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-lightmode-renders-default-chip-correctly-1-linux.png b/packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-lightmode-renders-default-chip-correctly-1-linux.png
new file mode 100644
index 000000000..b4665289e
Binary files /dev/null and b/packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-lightmode-renders-default-chip-correctly-1-linux.png differ
diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts b/packages/core/src/components/chip/test/disabled/chip.e2e.ts
index 1d4cd16b5..4623779e5 100644
--- a/packages/core/src/components/chip/test/disabled/chip.e2e.ts
+++ b/packages/core/src/components/chip/test/disabled/chip.e2e.ts
@@ -1,26 +1,86 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/chip/test/disabled/index.html';
+const componentName = 'tds-chip';
 
-test.describe.parallel('tds-chip-checkbox', () => {
-  test('renders checkbox chips correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const chip1 = page.getByText('Label 1', { exact: true });
-    await expect(chip1).toHaveCount(1);
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, 'tds-chip-checkbox'), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders checkbox chips correctly', async ({ page }) => {
+      const chip1 = page.getByText('Label 1', { exact: true });
+      await expect(chip1).toHaveCount(1);
 
-    const chip2 = page.getByText('Label 2', { exact: true });
-    await expect(chip2).toHaveCount(1);
+      const chip2 = page.getByText('Label 2', { exact: true });
+      await expect(chip2).toHaveCount(1);
 
-    const chip3 = page.getByText('Label 3', { exact: true });
-    await expect(chip3).toHaveCount(1);
+      const chip3 = page.getByText('Label 3', { exact: true });
+      await expect(chip3).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('Chip 1 is disabled and not clickable', async ({ page }) => {
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, 'tds-chip-radio'), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders radio chips correctly', async ({ page }) => {
+      const chip1 = page.getByText('Label 1 for radio', { exact: true });
+      await expect(chip1).toHaveCount(1);
+
+      const chip2 = page.getByText('Label 2 for radio', { exact: true });
+      await expect(chip2).toHaveCount(1);
+
+      const chip3 = page.getByText('Label 3 for radio', { exact: true });
+      await expect(chip3).toHaveCount(1);
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, 'tds-chip-button'), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders button chips correctly', async ({ page }) => {
+      const chip1 = page.getByText('Label 1 for button', { exact: true });
+      await expect(chip1).toHaveCount(1);
+
+      const chip2 = page.getByText('Label 2 for button', { exact: true });
+      await expect(chip2).toHaveCount(1);
+
+      const chip3 = page.getByText('Label 3 for button', { exact: true });
+      await expect(chip3).toHaveCount(1);
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel('tds-chip-checkbox', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('Chip 1 is disabled and not clickable', async ({ page }) => {
     const chip1 = page.locator('tds-chip[chip-id="option-1"]');
 
     const isDisabled = await chip1.evaluate((el) => el.hasAttribute('disabled'));
@@ -35,7 +95,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 
   test('Chip 2 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const checkboxLabel2 = page.locator('tds-chip[type="checkbox"] >> text=Label 2');
     checkboxLabel2.hover();
     const chipCursorStyle = await checkboxLabel2.evaluate(
@@ -49,7 +108,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 
   test('Chip 3 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const checkboxLabel3 = page.locator('tds-chip[type="checkbox"] >> text=Label 2');
     checkboxLabel3.hover();
     const chipCursorStyle = await checkboxLabel3.evaluate(
@@ -62,24 +120,13 @@ test.describe.parallel('tds-chip-checkbox', () => {
     expect(myEventSpy).toHaveReceivedEvent();
   });
 });
+
 test.describe.parallel('tds-chip-radio', () => {
-  test('renders radio chips correctly', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-    const chip1 = page.getByText('Label 1 for radio', { exact: true });
-    await expect(chip1).toHaveCount(1);
-
-    const chip2 = page.getByText('Label 2 for radio', { exact: true });
-    await expect(chip2).toHaveCount(1);
-
-    const chip3 = page.getByText('Label 3 for radio', { exact: true });
-    await expect(chip3).toHaveCount(1);
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 
   test('Radio Chip 1 is disabled and not clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const radioChip1 = page.locator('tds-chip[chip-id="radio-option-1"]');
 
     const isDisabled = await radioChip1.evaluate((el) => el.hasAttribute('disabled'));
@@ -95,23 +142,11 @@ test.describe.parallel('tds-chip-radio', () => {
 });
 
 test.describe.parallel('tds-chip-button', () => {
-  test('renders button chips correctly', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-    const chip1 = page.getByText('Label 1 for button', { exact: true });
-    await expect(chip1).toHaveCount(1);
-
-    const chip2 = page.getByText('Label 2 for button', { exact: true });
-    await expect(chip2).toHaveCount(1);
-
-    const chip3 = page.getByText('Label 3 for button', { exact: true });
-    await expect(chip3).toHaveCount(1);
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 
   test('Button Chip 1 is disabled and not clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const buttonChip1 = page.locator('tds-chip[chip-id="button-option-1"]');
 
     const isDisabled = await buttonChip1.evaluate((el) => el.hasAttribute('disabled'));
diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-darkmode-renders-button-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-darkmode-renders-button-chips-correctly-1-linux.png
new file mode 100644
index 000000000..0af981765
Binary files /dev/null and b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-darkmode-renders-button-chips-correctly-1-linux.png differ
diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-lightmode-renders-button-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-lightmode-renders-button-chips-correctly-1-linux.png
new file mode 100644
index 000000000..66d183234
Binary files /dev/null and b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-lightmode-renders-button-chips-correctly-1-linux.png differ
diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-renders-button-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-renders-button-chips-correctly-1-linux.png
deleted file mode 100644
index a5961a230..000000000
Binary files a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-renders-button-chips-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-darkmode-renders-checkbox-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-darkmode-renders-checkbox-chips-correctly-1-linux.png
new file mode 100644
index 000000000..0af981765
Binary files /dev/null and b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-darkmode-renders-checkbox-chips-correctly-1-linux.png differ
diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-lightmode-renders-checkbox-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-lightmode-renders-checkbox-chips-correctly-1-linux.png
new file mode 100644
index 000000000..66d183234
Binary files /dev/null and b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-lightmode-renders-checkbox-chips-correctly-1-linux.png differ
diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-renders-checkbox-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-renders-checkbox-chips-correctly-1-linux.png
deleted file mode 100644
index a5961a230..000000000
Binary files a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-renders-checkbox-chips-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-darkmode-renders-radio-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-darkmode-renders-radio-chips-correctly-1-linux.png
new file mode 100644
index 000000000..0af981765
Binary files /dev/null and b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-darkmode-renders-radio-chips-correctly-1-linux.png differ
diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-lightmode-renders-radio-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-lightmode-renders-radio-chips-correctly-1-linux.png
new file mode 100644
index 000000000..66d183234
Binary files /dev/null and b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-lightmode-renders-radio-chips-correctly-1-linux.png differ
diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-renders-radio-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-renders-radio-chips-correctly-1-linux.png
deleted file mode 100644
index a5961a230..000000000
Binary files a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-renders-radio-chips-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/chip/test/icon/chip.e2e.ts b/packages/core/src/components/chip/test/icon/chip.e2e.ts
index bf38f83c2..1e10432c6 100644
--- a/packages/core/src/components/chip/test/icon/chip.e2e.ts
+++ b/packages/core/src/components/chip/test/icon/chip.e2e.ts
@@ -1,31 +1,41 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/chip/test/icon/index.html';
+const componentName = 'tds-chip';
+const testDescription = 'tds-chip-default';
 
-test.describe.parallel('tds-chip-default', () => {
-  test('renders default chip correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const chip = page.locator('tds-chip');
-    await expect(chip).toHaveCount(1);
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    const labelElement = page.locator('tds-chip label'); // Target label underneath chip
-    expect(labelElement).toHaveText('Label');
+    test('renders default chip correctly', async ({ page }) => {
+      const chip = page.locator('tds-chip');
+      await expect(chip).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+      const labelElement = page.locator('tds-chip label'); // Target label underneath chip
+      expect(labelElement).toHaveText('Label');
 
-  test('expect chip to be of the role button', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const chipRole = page.getByRole('button');
-    await expect(chipRole).toHaveCount(1);
-  });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('expect chip to be of the role button', async ({ page }) => {
+      const chipRole = page.getByRole('button');
+      await expect(chipRole).toHaveCount(1);
+    });
 
-  test('Check so that the chip contains an icon', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const icon = page.locator('tds-icon');
-    await expect(icon).toBeVisible();
-    await expect(icon).toHaveAttribute('name', 'star');
+    test('Check so that the chip contains an icon', async ({ page }) => {
+      const icon = page.locator('tds-icon');
+      await expect(icon).toBeVisible();
+      await expect(icon).toHaveAttribute('name', 'star');
+    });
   });
 });
diff --git a/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-renders-readonly-success-state-of-text-field-correctly-1-linux.png b/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-darkmode-renders-default-chip-correctly-1-linux.png
similarity index 60%
rename from packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-renders-readonly-success-state-of-text-field-correctly-1-linux.png
rename to packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-darkmode-renders-default-chip-correctly-1-linux.png
index 939d1936f..5603aa83e 100644
Binary files a/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-renders-readonly-success-state-of-text-field-correctly-1-linux.png and b/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-darkmode-renders-default-chip-correctly-1-linux.png differ
diff --git a/packages/core/src/components/breadcrumbs/test/default/lightmode/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-lightmode-page-3-item-should-be-able-to-become-focused-1-linux.png b/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-lightmode-renders-default-chip-correctly-1-linux.png
similarity index 57%
rename from packages/core/src/components/breadcrumbs/test/default/lightmode/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-lightmode-page-3-item-should-be-able-to-become-focused-1-linux.png
rename to packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-lightmode-renders-default-chip-correctly-1-linux.png
index c2501a091..d1082800a 100644
Binary files a/packages/core/src/components/breadcrumbs/test/default/lightmode/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-lightmode-page-3-item-should-be-able-to-become-focused-1-linux.png and b/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-lightmode-renders-default-chip-correctly-1-linux.png differ
diff --git a/packages/core/src/components/chip/test/radio/chip.e2e.ts b/packages/core/src/components/chip/test/radio/chip.e2e.ts
index 67c3959e0..a747c1435 100644
--- a/packages/core/src/components/chip/test/radio/chip.e2e.ts
+++ b/packages/core/src/components/chip/test/radio/chip.e2e.ts
@@ -1,127 +1,131 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/chip/test/radio/index.html';
-
-test.describe.parallel('tds-chip-radio', () => {
-  test('renders radio chips correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const chip1 = page.getByText('Label 1', { exact: true });
-    await expect(chip1).toHaveCount(1);
-
-    const chip2 = page.getByText('Label 2', { exact: true });
-    await expect(chip2).toHaveCount(1);
-
-    const chip3 = page.getByText('Label 3', { exact: true });
-    await expect(chip3).toHaveCount(1);
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('expect chips to be of the role radio', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const chipRole = page.getByRole('radio');
-    await expect(chipRole).toHaveCount(3);
-  });
-
-  test('Check so that height is correct to lg/default measurements', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const chip1 = page.locator('tds-chip label').filter({ hasText: `Label 1` });
-    const chipHeight1 = await chip1.evaluate((style) => getComputedStyle(style).height);
-    expect(chipHeight1).toBe('32px');
-
-    const chip2 = page.locator('tds-chip label').filter({ hasText: `Label 2` });
-    const chipHeight2 = await chip2.evaluate((style) => getComputedStyle(style).height);
-    expect(chipHeight2).toBe('32px');
-
-    const chip3 = page.locator('tds-chip label').filter({ hasText: `Label 3` });
-    const chipHeight3 = await chip3.evaluate((style) => getComputedStyle(style).height);
-    expect(chipHeight3).toBe('32px');
-  });
-
-  test('Chip 1 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const chip = page.locator('tds-chip label').filter({ hasText: `Label 1` });
-    chip.hover();
-    const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
-    expect(chipCursorStyle).toBe('pointer');
-
-    const myEventSpy = await page.spyOnEvent('click');
-    await chip.click();
-    expect(myEventSpy).toHaveReceivedEvent();
-  });
-
-  test('Chip 2 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const chip = page.locator('tds-chip label').filter({ hasText: `Label 2` });
-    chip.hover();
-    const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
-    expect(chipCursorStyle).toBe('pointer');
-
-    const myEventSpy = await page.spyOnEvent('click');
-    await chip.click();
-    expect(myEventSpy).toHaveReceivedEvent();
-  });
-
-  test('Chip 3 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const chip = page.locator('tds-chip label').filter({ hasText: `Label 3` });
-    chip.hover();
-    const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
-    expect(chipCursorStyle).toBe('pointer');
-
-    const myEventSpy = await page.spyOnEvent('click');
-    await chip.click();
-    expect(myEventSpy).toHaveReceivedEvent();
-  });
-
-  test('2nd chip is checked', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const checkedLabel2Chip = page.locator('input[id="option-2"]');
-    const isChecked = await checkedLabel2Chip.evaluate((node: HTMLInputElement) => node.checked);
-    expect(isChecked).toBeTruthy();
-  });
-
-  test('Clicking "Label 1" chip changes checked state appropriately', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const labelText1 = page.locator('text=Label 1');
-    await labelText1.click();
-    const chip1 = page.locator('input[id="option-1"]');
-    const chip2 = page.locator('input[id="option-2"]');
-    const chip3 = page.locator('input[id="option-3"]');
-
-    // "Label 1" becomes checked
-    const chip1checkedStatus = await chip1.evaluate((node: HTMLInputElement) => node.checked);
-    expect(chip1checkedStatus).toBeTruthy();
-
-    // "Label 2" becomes unchecked
-    const chip2checkedStatus = await chip2.evaluate((node: HTMLInputElement) => node.checked);
-    expect(chip2checkedStatus).toBeFalsy();
-
-    // "Label 3" becomes unchecked
-    const chip3checkedStatus = await chip3.evaluate((node: HTMLInputElement) => node.checked);
-    expect(chip3checkedStatus).toBeFalsy();
-  });
-
-  test('Clicking "Label 3" chip changes checked state appropriately', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const labelText3 = page.locator('text=Label 3');
-    await labelText3.click();
-    const chip1 = page.locator('input[id="option-1"]');
-    const chip2 = page.locator('input[id="option-2"]');
-    const chip3 = page.locator('input[id="option-3"]');
-
-    // "Label 1" becomes unchecked
-    const chip1checkedStatus = await chip1.evaluate((node: HTMLInputElement) => node.checked);
-    expect(chip1checkedStatus).toBeFalsy();
-
-    // "Label 2" becomes unchecked
-    const chip2checkedStatus = await chip2.evaluate((node: HTMLInputElement) => node.checked);
-    expect(chip2checkedStatus).toBeFalsy();
-
-    // "Label 3" becomes unchecked
-    const chip3checkedStatus = await chip3.evaluate((node: HTMLInputElement) => node.checked);
-    expect(chip3checkedStatus).toBeTruthy();
+const componentName = 'tds-chip';
+const testDescription = 'tds-chip-radio';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders radio chips correctly', async ({ page }) => {
+      const chip1 = page.getByText('Label 1', { exact: true });
+      await expect(chip1).toHaveCount(1);
+
+      const chip2 = page.getByText('Label 2', { exact: true });
+      await expect(chip2).toHaveCount(1);
+
+      const chip3 = page.getByText('Label 3', { exact: true });
+      await expect(chip3).toHaveCount(1);
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('expect chips to be of the role radio', async ({ page }) => {
+      const chipRole = page.getByRole('radio');
+      await expect(chipRole).toHaveCount(3);
+    });
+
+    test('Check so that height is correct to lg/default measurements', async ({ page }) => {
+      const chip1 = page.locator('tds-chip label').filter({ hasText: `Label 1` });
+      const chipHeight1 = await chip1.evaluate((style) => getComputedStyle(style).height);
+      expect(chipHeight1).toBe('32px');
+
+      const chip2 = page.locator('tds-chip label').filter({ hasText: `Label 2` });
+      const chipHeight2 = await chip2.evaluate((style) => getComputedStyle(style).height);
+      expect(chipHeight2).toBe('32px');
+
+      const chip3 = page.locator('tds-chip label').filter({ hasText: `Label 3` });
+      const chipHeight3 = await chip3.evaluate((style) => getComputedStyle(style).height);
+      expect(chipHeight3).toBe('32px');
+    });
+
+    test('Chip 1 is clickable', async ({ page }) => {
+      const chip = page.locator('tds-chip label').filter({ hasText: `Label 1` });
+      chip.hover();
+      const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
+      expect(chipCursorStyle).toBe('pointer');
+
+      const myEventSpy = await page.spyOnEvent('click');
+      await chip.click();
+      expect(myEventSpy).toHaveReceivedEvent();
+    });
+
+    test('Chip 2 is clickable', async ({ page }) => {
+      const chip = page.locator('tds-chip label').filter({ hasText: `Label 2` });
+      chip.hover();
+      const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
+      expect(chipCursorStyle).toBe('pointer');
+
+      const myEventSpy = await page.spyOnEvent('click');
+      await chip.click();
+      expect(myEventSpy).toHaveReceivedEvent();
+    });
+
+    test('Chip 3 is clickable', async ({ page }) => {
+      const chip = page.locator('tds-chip label').filter({ hasText: `Label 3` });
+      chip.hover();
+      const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
+      expect(chipCursorStyle).toBe('pointer');
+
+      const myEventSpy = await page.spyOnEvent('click');
+      await chip.click();
+      expect(myEventSpy).toHaveReceivedEvent();
+    });
+
+    test('2nd chip is checked', async ({ page }) => {
+      const checkedLabel2Chip = page.locator('input[id="option-2"]');
+      const isChecked = await checkedLabel2Chip.evaluate((node: HTMLInputElement) => node.checked);
+      expect(isChecked).toBeTruthy();
+    });
+
+    test('Clicking "Label 1" chip changes checked state appropriately', async ({ page }) => {
+      const labelText1 = page.locator('text=Label 1');
+      await labelText1.click();
+      const chip1 = page.locator('input[id="option-1"]');
+      const chip2 = page.locator('input[id="option-2"]');
+      const chip3 = page.locator('input[id="option-3"]');
+
+      // "Label 1" becomes checked
+      const chip1checkedStatus = await chip1.evaluate((node: HTMLInputElement) => node.checked);
+      expect(chip1checkedStatus).toBeTruthy();
+
+      // "Label 2" becomes unchecked
+      const chip2checkedStatus = await chip2.evaluate((node: HTMLInputElement) => node.checked);
+      expect(chip2checkedStatus).toBeFalsy();
+
+      // "Label 3" becomes unchecked
+      const chip3checkedStatus = await chip3.evaluate((node: HTMLInputElement) => node.checked);
+      expect(chip3checkedStatus).toBeFalsy();
+    });
+
+    test('Clicking "Label 3" chip changes checked state appropriately', async ({ page }) => {
+      const labelText3 = page.locator('text=Label 3');
+      await labelText3.click();
+      const chip1 = page.locator('input[id="option-1"]');
+      const chip2 = page.locator('input[id="option-2"]');
+      const chip3 = page.locator('input[id="option-3"]');
+
+      // "Label 1" becomes unchecked
+      const chip1checkedStatus = await chip1.evaluate((node: HTMLInputElement) => node.checked);
+      expect(chip1checkedStatus).toBeFalsy();
+
+      // "Label 2" becomes unchecked
+      const chip2checkedStatus = await chip2.evaluate((node: HTMLInputElement) => node.checked);
+      expect(chip2checkedStatus).toBeFalsy();
+
+      // "Label 3" becomes unchecked
+      const chip3checkedStatus = await chip3.evaluate((node: HTMLInputElement) => node.checked);
+      expect(chip3checkedStatus).toBeTruthy();
+    });
   });
 });
diff --git a/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-darkmode-renders-radio-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-darkmode-renders-radio-chips-correctly-1-linux.png
new file mode 100644
index 000000000..6d8ee4fd4
Binary files /dev/null and b/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-darkmode-renders-radio-chips-correctly-1-linux.png differ
diff --git a/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-lightmode-renders-radio-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-lightmode-renders-radio-chips-correctly-1-linux.png
new file mode 100644
index 000000000..44e29508d
Binary files /dev/null and b/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-lightmode-renders-radio-chips-correctly-1-linux.png differ
diff --git a/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-renders-radio-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-renders-radio-chips-correctly-1-linux.png
deleted file mode 100644
index aad0bed11..000000000
Binary files a/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-renders-radio-chips-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/datetime/test/default/datetime.e2e.ts b/packages/core/src/components/datetime/test/default/datetime.e2e.ts
index 9348cf345..21bd6d90b 100644
--- a/packages/core/src/components/datetime/test/default/datetime.e2e.ts
+++ b/packages/core/src/components/datetime/test/default/datetime.e2e.ts
@@ -1,21 +1,50 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/datetime/test/default/index.html';
+const componentName = 'tds-datetime';
+const testDescription = 'tds-datetime-default';
 
-test.describe('tds-datetime-default', () => {
-  test('renders datetime component correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders datetime component correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('icon click triggers native datetime picker', async ({ page }) => {
+      // Assuming the calendar icon can be clicked to open the datetime picker
+      await page.click('input[type="datetime-local"]');
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+
+      // Verify the input is indeed focused. This is an indirect test to ensure
+      // that actions leading up to the display of the native picker are correctly initiated.
+      const inputIsFocused = await page.evaluate(
+        () => (document.activeElement as HTMLInputElement).type === 'datetime-local',
+      );
+      expect(inputIsFocused).toBeTruthy();
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('verifies label, helper text, size, and calendar icon for datetime-local component', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
-
     // Check for the label text
     const label = page.locator('.tds-datetime-label');
     const dateTime = page.locator('tds-datetime');
@@ -35,25 +64,7 @@ test.describe('tds-datetime-default', () => {
     await expect(calendarIcon).toBeVisible();
   });
 
-  test('icon click triggers native datetime picker', async ({ page }) => {
-    await page.goto(componentTestPath);
-
-    // Assuming the calendar icon can be clicked to open the datetime picker
-    await page.click('input[type="datetime-local"]');
-
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-
-    // Verify the input is indeed focused. This is an indirect test to ensure
-    // that actions leading up to the display of the native picker are correctly initiated.
-    const inputIsFocused = await page.evaluate(
-      () => (document.activeElement as HTMLInputElement).type === 'datetime-local',
-    );
-    expect(inputIsFocused).toBeTruthy();
-  });
-
   test('setting input to current date and time programmatically', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     // Get the current date and time, formatted as 'YYYY-MM-DDThh:mm', which is the expected format for datetime-local inputs
     const currentDate = new Date().toISOString().slice(0, 16);
 
diff --git a/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-icon-click-triggers-native-datetime-picker-1-linux.png b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-icon-click-triggers-native-datetime-picker-1-linux.png
deleted file mode 100644
index 41493864b..000000000
Binary files a/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-icon-click-triggers-native-datetime-picker-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-primary-darkmode-icon-click-triggers-native-datetime-picker-1-linux.png b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-primary-darkmode-icon-click-triggers-native-datetime-picker-1-linux.png
new file mode 100644
index 000000000..dd2847769
Binary files /dev/null and b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-primary-darkmode-icon-click-triggers-native-datetime-picker-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-primary-darkmode-renders-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-primary-darkmode-renders-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..4b3e46bab
Binary files /dev/null and b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-primary-darkmode-renders-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-primary-lightmode-icon-click-triggers-native-datetime-picker-1-linux.png b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-primary-lightmode-icon-click-triggers-native-datetime-picker-1-linux.png
new file mode 100644
index 000000000..050c25524
Binary files /dev/null and b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-primary-lightmode-icon-click-triggers-native-datetime-picker-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-primary-lightmode-renders-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-primary-lightmode-renders-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..a93f8080e
Binary files /dev/null and b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-primary-lightmode-renders-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-renders-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-renders-datetime-component-correctly-1-linux.png
deleted file mode 100644
index cfa15a1f4..000000000
Binary files a/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-renders-datetime-component-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-secondary-darkmode-icon-click-triggers-native-datetime-picker-1-linux.png b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-secondary-darkmode-icon-click-triggers-native-datetime-picker-1-linux.png
new file mode 100644
index 000000000..44c279873
Binary files /dev/null and b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-secondary-darkmode-icon-click-triggers-native-datetime-picker-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-secondary-darkmode-renders-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-secondary-darkmode-renders-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..57d0f75ac
Binary files /dev/null and b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-secondary-darkmode-renders-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-secondary-lightmode-icon-click-triggers-native-datetime-picker-1-linux.png b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-secondary-lightmode-icon-click-triggers-native-datetime-picker-1-linux.png
new file mode 100644
index 000000000..2c39fe449
Binary files /dev/null and b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-secondary-lightmode-icon-click-triggers-native-datetime-picker-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-secondary-lightmode-renders-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-secondary-lightmode-renders-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..9618808f9
Binary files /dev/null and b/packages/core/src/components/datetime/test/default/datetime.e2e.ts-snapshots/tds-datetime-default-secondary-lightmode-renders-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts b/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts
index e65a7f825..7a7943c73 100644
--- a/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts
+++ b/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts
@@ -1,21 +1,36 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/datetime/test/disabled/index.html';
+const componentName = 'tds-datetime';
+const testDescription = 'tds-datetime-disabled';
+
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders disabled datetime component correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
-test.describe('tds-datetime-disabled', () => {
-  test('renders disabled datetime component correctly', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 
   test('when in disabled state all but helper text should have pointer events none', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
-
     // Check for disabled state of the datetime input
     const datetimeInput = page.locator('input[type="datetime-local"]');
     const label = page.locator('label');
diff --git a/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-primary-darkmode-renders-disabled-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-primary-darkmode-renders-disabled-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..74d85dbf2
Binary files /dev/null and b/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-primary-darkmode-renders-disabled-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-renders-disabled-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-primary-lightmode-renders-disabled-datetime-component-correctly-1-linux.png
similarity index 87%
rename from packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-renders-disabled-datetime-component-correctly-1-linux.png
rename to packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-primary-lightmode-renders-disabled-datetime-component-correctly-1-linux.png
index 13ad9d44d..376be2e83 100644
Binary files a/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-renders-disabled-datetime-component-correctly-1-linux.png and b/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-primary-lightmode-renders-disabled-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-secondary-darkmode-renders-disabled-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-secondary-darkmode-renders-disabled-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..a2f03d80e
Binary files /dev/null and b/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-secondary-darkmode-renders-disabled-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-secondary-lightmode-renders-disabled-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-secondary-lightmode-renders-disabled-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..a62ab8bf2
Binary files /dev/null and b/packages/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/tds-datetime-disabled-secondary-lightmode-renders-disabled-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/error/datetime.e2e.ts b/packages/core/src/components/datetime/test/error/datetime.e2e.ts
index 4fdd63508..87a686be0 100644
--- a/packages/core/src/components/datetime/test/error/datetime.e2e.ts
+++ b/packages/core/src/components/datetime/test/error/datetime.e2e.ts
@@ -1,19 +1,52 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/datetime/test/error/index.html';
+const componentName = 'tds-datetime';
+const testDescription = 'tds-datetime-error';
+
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders disabled datetime component correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('Simulate time selection and verify format', async ({ page }) => {
+      await page.click('input[type="time"]');
+
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+
+      // Programmatically set the input value to simulate picking a time
+      // Note: This value should be in the format the browser expects ('HH:MM'), even though your component will format it differently
+      const currentTime = new Date();
+      const formattedTimeValue = [
+        currentTime.getHours().toString().padStart(2, '0'),
+        currentTime.getMinutes().toString().padStart(2, '0'),
+      ].join(':');
+      await page.locator('input[type="time"]').fill(formattedTimeValue);
+
+      const displayedTime = await page.locator('input[type="time"]').inputValue();
+      expect(displayedTime).toBe(formattedTimeValue);
+    });
+  });
+});
 
-test.describe('tds-datetime-error', () => {
-  test('renders disabled datetime component correctly', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 
   test('verifies label, helper text, size, and clock icon for time component', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     // Check for the label text
     const label = page.locator('.tds-datetime-label');
     const helperText = page.locator('.tds-datetime-helper .tds-helper');
@@ -35,8 +68,6 @@ test.describe('tds-datetime-error', () => {
   });
 
   test('helper text in error state has is red and has an error icon', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     // Check helper text color for specific shade of red
     await expect(page.locator('.tds-datetime-helper .tds-helper')).toHaveCSS(
       'color',
@@ -48,8 +79,6 @@ test.describe('tds-datetime-error', () => {
   });
 
   test('Clock icon focuses the time input', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     await page.click('input[type="time"]');
 
     // Check if the time input is focused after clicking the icon
@@ -59,24 +88,4 @@ test.describe('tds-datetime-error', () => {
     );
     expect(isTimeInputFocused).toBeTruthy();
   });
-
-  test('Simulate time selection and verify format', async ({ page }) => {
-    await page.goto(componentTestPath);
-
-    await page.click('input[type="time"]');
-
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-
-    // Programmatically set the input value to simulate picking a time
-    // Note: This value should be in the format the browser expects ('HH:MM'), even though your component will format it differently
-    const currentTime = new Date();
-    const formattedTimeValue = [
-      currentTime.getHours().toString().padStart(2, '0'),
-      currentTime.getMinutes().toString().padStart(2, '0'),
-    ].join(':');
-    await page.locator('input[type="time"]').fill(formattedTimeValue);
-
-    const displayedTime = await page.locator('input[type="time"]').inputValue();
-    expect(displayedTime).toBe(formattedTimeValue);
-  });
 });
diff --git a/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-primary-darkmode-Simulate-time-selection-and-verify-format-1-linux.png b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-primary-darkmode-Simulate-time-selection-and-verify-format-1-linux.png
new file mode 100644
index 000000000..c6b2e2cf8
Binary files /dev/null and b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-primary-darkmode-Simulate-time-selection-and-verify-format-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-primary-darkmode-renders-disabled-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-primary-darkmode-renders-disabled-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..4357c4453
Binary files /dev/null and b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-primary-darkmode-renders-disabled-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-primary-lightmode-Simulate-time-selection-and-verify-format-1-linux.png b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-primary-lightmode-Simulate-time-selection-and-verify-format-1-linux.png
new file mode 100644
index 000000000..641d298c7
Binary files /dev/null and b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-primary-lightmode-Simulate-time-selection-and-verify-format-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-primary-lightmode-renders-disabled-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-primary-lightmode-renders-disabled-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..83499e6b5
Binary files /dev/null and b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-primary-lightmode-renders-disabled-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-secondary-darkmode-Simulate-time-selection-and-verify-format-1-linux.png b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-secondary-darkmode-Simulate-time-selection-and-verify-format-1-linux.png
new file mode 100644
index 000000000..5f7be8f05
Binary files /dev/null and b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-secondary-darkmode-Simulate-time-selection-and-verify-format-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-secondary-darkmode-renders-disabled-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-secondary-darkmode-renders-disabled-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..37be43d7c
Binary files /dev/null and b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-secondary-darkmode-renders-disabled-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-secondary-lightmode-Simulate-time-selection-and-verify-format-1-linux.png b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-secondary-lightmode-Simulate-time-selection-and-verify-format-1-linux.png
new file mode 100644
index 000000000..9f817538a
Binary files /dev/null and b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-secondary-lightmode-Simulate-time-selection-and-verify-format-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-secondary-lightmode-renders-disabled-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-secondary-lightmode-renders-disabled-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..289f1af5c
Binary files /dev/null and b/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-secondary-lightmode-renders-disabled-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/success/datetime.e2e.ts b/packages/core/src/components/datetime/test/success/datetime.e2e.ts
index 6ec18b4de..9e76a3b4b 100644
--- a/packages/core/src/components/datetime/test/success/datetime.e2e.ts
+++ b/packages/core/src/components/datetime/test/success/datetime.e2e.ts
@@ -1,18 +1,34 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/datetime/test/success/index.html';
+const componentName = 'tds-datetime';
+const testDescription = 'tds-datetime-success';
 
-test.describe('tds-datetime-success', () => {
-  test('renders success datetime component correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('renders success datetime component correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('component should have size "md"', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('component should have size "md"', async ({ page }) => {
     const dateTime = page.locator('tds-datetime');
     const dateTimeContainer = page.locator('.tds-datetime-container');
 
diff --git a/packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-primary-darkmode-renders-success-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-primary-darkmode-renders-success-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..895e4eb22
Binary files /dev/null and b/packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-primary-darkmode-renders-success-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-primary-lightmode-renders-success-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-primary-lightmode-renders-success-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..4750c36be
Binary files /dev/null and b/packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-primary-lightmode-renders-success-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-secondary-darkmode-renders-success-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-secondary-darkmode-renders-success-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..30b72e027
Binary files /dev/null and b/packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-secondary-darkmode-renders-success-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-secondary-lightmode-renders-success-datetime-component-correctly-1-linux.png b/packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-secondary-lightmode-renders-success-datetime-component-correctly-1-linux.png
new file mode 100644
index 000000000..13358397d
Binary files /dev/null and b/packages/core/src/components/datetime/test/success/datetime.e2e.ts-snapshots/tds-datetime-success-secondary-lightmode-renders-success-datetime-component-correctly-1-linux.png differ
diff --git a/packages/core/src/components/divider/test/horizontal/darkmode/divider.e2e.ts b/packages/core/src/components/divider/test/horizontal/darkmode/divider.e2e.ts
deleted file mode 100644
index 23bdf1b3a..000000000
--- a/packages/core/src/components/divider/test/horizontal/darkmode/divider.e2e.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/divider/test/horizontal/darkmode/index.html';
-
-test.describe.parallel('tds-divider-darkmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('expect to render a divider in darkmode', async ({ page }) => {
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/divider/test/horizontal/darkmode/index.html b/packages/core/src/components/divider/test/horizontal/darkmode/index.html
deleted file mode 100644
index 82e1fb230..000000000
--- a/packages/core/src/components/divider/test/horizontal/darkmode/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Divider - Horizontal, darkmode</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
-    <script type="module">
-      import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
-      defineCustomElements();
-    </script>
-  </head>
-
-  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958); padding: 20px">
-    <tds-divider data-testid="divider"></tds-divider>
-  </body>
-</html>
diff --git a/packages/core/src/components/divider/test/horizontal/divider.e2e.ts b/packages/core/src/components/divider/test/horizontal/divider.e2e.ts
new file mode 100644
index 000000000..93c32620b
--- /dev/null
+++ b/packages/core/src/components/divider/test/horizontal/divider.e2e.ts
@@ -0,0 +1,23 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
+
+const componentTestPath = 'src/components/divider/test/horizontal/index.html';
+const componentName = 'tds-divider';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('expect to render a divider', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
diff --git a/packages/core/src/components/divider/test/horizontal/darkmode/divider.e2e.ts-snapshots/tds-divider-darkmode-expect-to-render-a-divider-in-darkmode-1-linux.png b/packages/core/src/components/divider/test/horizontal/divider.e2e.ts-snapshots/tds-divider-darkmode-expect-to-render-a-divider-1-linux.png
similarity index 100%
rename from packages/core/src/components/divider/test/horizontal/darkmode/divider.e2e.ts-snapshots/tds-divider-darkmode-expect-to-render-a-divider-in-darkmode-1-linux.png
rename to packages/core/src/components/divider/test/horizontal/divider.e2e.ts-snapshots/tds-divider-darkmode-expect-to-render-a-divider-1-linux.png
diff --git a/packages/core/src/components/divider/test/horizontal/lightmode/divider.e2e.ts-snapshots/tds-divider-lightmode-expect-to-render-a-divider-in-lightmode-1-linux.png b/packages/core/src/components/divider/test/horizontal/divider.e2e.ts-snapshots/tds-divider-lightmode-expect-to-render-a-divider-1-linux.png
similarity index 100%
rename from packages/core/src/components/divider/test/horizontal/lightmode/divider.e2e.ts-snapshots/tds-divider-lightmode-expect-to-render-a-divider-in-lightmode-1-linux.png
rename to packages/core/src/components/divider/test/horizontal/divider.e2e.ts-snapshots/tds-divider-lightmode-expect-to-render-a-divider-1-linux.png
diff --git a/packages/core/src/components/divider/test/horizontal/lightmode/index.html b/packages/core/src/components/divider/test/horizontal/index.html
similarity index 62%
rename from packages/core/src/components/divider/test/horizontal/lightmode/index.html
rename to packages/core/src/components/divider/test/horizontal/index.html
index 826721f20..f7f3419ba 100644
--- a/packages/core/src/components/divider/test/horizontal/lightmode/index.html
+++ b/packages/core/src/components/divider/test/horizontal/index.html
@@ -2,11 +2,11 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Divider - Horizontal, lightmode</title>
+    <title>Divider - Horizontal</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
+    <link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
     <script type="module">
-      import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
+      import { defineCustomElements } from '../../../../../loader/index.es2017.js';
       defineCustomElements();
     </script>
   </head>
diff --git a/packages/core/src/components/divider/test/horizontal/lightmode/divider.e2e.ts b/packages/core/src/components/divider/test/horizontal/lightmode/divider.e2e.ts
deleted file mode 100644
index 438cd9995..000000000
--- a/packages/core/src/components/divider/test/horizontal/lightmode/divider.e2e.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/divider/test/horizontal/lightmode/index.html';
-
-test.describe.parallel('tds-divider-lightmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('expect to render a divider in lightmode', async ({ page }) => {
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/divider/test/vertical/divider.e2e.ts b/packages/core/src/components/divider/test/vertical/divider.e2e.ts
index 2e9eb07ef..b723481ed 100644
--- a/packages/core/src/components/divider/test/vertical/divider.e2e.ts
+++ b/packages/core/src/components/divider/test/vertical/divider.e2e.ts
@@ -1,20 +1,28 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/divider/test/vertical/index.html';
+const componentName = 'tds-divider';
 
-test.describe.parallel('tds-divider', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('expect to render a vertical divider', async ({ page }) => {
-    // expect height to be greater than width
-    const divider = page.getByTestId('divider').locator('div.divider').first();
-    const box = await divider.boundingBox();
-    expect(box.height).toBeGreaterThan(box.width);
+    test('expect to render a vertical divider', async ({ page }) => {
+      // expect height to be greater than width
+      const divider = page.getByTestId('divider').locator('div.divider').first();
+      const box = await divider.boundingBox();
+      expect(box.height).toBeGreaterThan(box.width);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/divider/test/vertical/divider.e2e.ts-snapshots/tds-divider-darkmode-expect-to-render-a-vertical-divider-1-linux.png b/packages/core/src/components/divider/test/vertical/divider.e2e.ts-snapshots/tds-divider-darkmode-expect-to-render-a-vertical-divider-1-linux.png
new file mode 100644
index 000000000..6350f4ae2
Binary files /dev/null and b/packages/core/src/components/divider/test/vertical/divider.e2e.ts-snapshots/tds-divider-darkmode-expect-to-render-a-vertical-divider-1-linux.png differ
diff --git a/packages/core/src/components/divider/test/vertical/divider.e2e.ts-snapshots/tds-divider-expect-to-render-a-vertical-divider-1-linux.png b/packages/core/src/components/divider/test/vertical/divider.e2e.ts-snapshots/tds-divider-lightmode-expect-to-render-a-vertical-divider-1-linux.png
similarity index 100%
rename from packages/core/src/components/divider/test/vertical/divider.e2e.ts-snapshots/tds-divider-expect-to-render-a-vertical-divider-1-linux.png
rename to packages/core/src/components/divider/test/vertical/divider.e2e.ts-snapshots/tds-divider-lightmode-expect-to-render-a-vertical-divider-1-linux.png
diff --git a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts
index ed305ae29..022506db1 100644
--- a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts
+++ b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts
@@ -1,19 +1,50 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/dropdown/test/basic/index.html';
+const componentName = 'tds-dropdown';
+const testDescription = 'tds-dropdown-basic';
 
-test.describe.parallel('tds-dropdown-basic', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('renders basic dropdown correctly', async ({ page }) => {
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
+    test('renders basic dropdown correctly', async ({ page }) => {
+      const dropdown = page.getByTestId('tds-dropdown-testid');
+      await expect(dropdown).toHaveCount(1);
 
-    /* check diff in screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* check diff in screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
+      const dropdownButton = page.getByRole('button').first();
+      const dropdownListElementOne = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: 'Option 1' });
+      await expect(dropdownListElementOne).toBeHidden();
+      await dropdownButton.click();
+
+      /* before clicking dropdownlist should not be visible, the button should be */
+      await expect(dropdownButton).toBeVisible();
+      await expect(dropdownListElementOne).toBeVisible();
+
+      /* checks diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('should find label and not exist', async ({ page }) => {
@@ -31,21 +62,6 @@ test.describe.parallel('tds-dropdown-basic', () => {
     await expect(dropdownButton).toBeVisible();
   });
 
-  test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
-    const dropdownButton = page.getByRole('button').first();
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
-    await expect(dropdownListElementOne).toBeHidden();
-    await dropdownButton.click();
-
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOne).toBeVisible();
-
-    /* checks diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
   test('reset() method resets the dropdown', async ({ page }) => {
     const dropdown = page.getByTestId('tds-dropdown-testid');
 
diff --git a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
deleted file mode 100644
index dedb254ca..000000000
Binary files a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-primary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-primary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..01079b56c
Binary files /dev/null and b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-primary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-primary-darkmode-renders-basic-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-primary-darkmode-renders-basic-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..b4a6f9679
Binary files /dev/null and b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-primary-darkmode-renders-basic-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-primary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-primary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..2b1391395
Binary files /dev/null and b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-primary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-primary-lightmode-renders-basic-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-primary-lightmode-renders-basic-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..d29d23a5b
Binary files /dev/null and b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-primary-lightmode-renders-basic-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-secondary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-secondary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..34622743b
Binary files /dev/null and b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-secondary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-secondary-darkmode-renders-basic-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-secondary-darkmode-renders-basic-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..7853f04a8
Binary files /dev/null and b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-secondary-darkmode-renders-basic-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-secondary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-secondary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..e53e82d56
Binary files /dev/null and b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-secondary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-secondary-lightmode-renders-basic-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-secondary-lightmode-renders-basic-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..a60957094
Binary files /dev/null and b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-secondary-lightmode-renders-basic-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts
index eec920162..0e56e9fc0 100644
--- a/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts
+++ b/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts
@@ -1,48 +1,57 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/dropdown/test/default/disabled/index.html';
+const componentName = 'tds-dropdown';
+const testDescription = 'tds-dropdown-disabled';
 
-test.describe.parallel('tds-dropdown-disabled', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('clicking the dropdown icon does not open the dropdown-list', async ({ page }) => {
-    const dropdownButtonIcon = page.locator('tds-icon');
+    test('clicking the dropdown icon does not open the dropdown-list', async ({ page }) => {
+      const dropdownButtonIcon = page.locator('tds-icon');
 
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
+      const dropdownListElementOne = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: 'Option 1' });
 
-    await expect(dropdownListElementOne).toBeHidden();
-    /* force a click on the icon. Since the icon is inside of a disabled button playwright will error if it is not forced */
-    await dropdownButtonIcon.click({
-      force: true,
-    });
+      await expect(dropdownListElementOne).toBeHidden();
+      /* force a click on the icon. Since the icon is inside of a disabled button playwright will error if it is not forced */
+      await dropdownButtonIcon.click({
+        force: true,
+      });
 
-    /* no child elements should be visible. */
-    await expect(dropdownListElementOne).toBeHidden();
+      /* no child elements should be visible. */
+      await expect(dropdownListElementOne).toBeHidden();
 
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('clicking the dropdown button does not open the dropdown-list', async ({ page }) => {
-    const dropdownButton = page.getByRole('button').first();
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('clicking the dropdown button does not open the dropdown-list', async ({ page }) => {
+      const dropdownButton = page.getByRole('button').first();
 
-    /* check that the icon is inside of a disabled element */
-    await expect(dropdownButton).toBeDisabled();
+      /* check that the icon is inside of a disabled element */
+      await expect(dropdownButton).toBeDisabled();
 
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
+      const dropdownListElementOne = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: 'Option 1' });
 
-    await expect(dropdownListElementOne).toBeHidden();
-    /* force a click on the icon. Since the icon is inside of a disabled button playwright will error if it is not forced */
-    await dropdownButton.click({
-      force: true,
-    });
+      await expect(dropdownListElementOne).toBeHidden();
+      /* force a click on the icon. Since the icon is inside of a disabled button playwright will error if it is not forced */
+      await dropdownButton.click({
+        force: true,
+      });
 
-    /* no child elements should be visible. */
-    await expect(dropdownListElementOne).toBeHidden();
+      /* no child elements should be visible. */
+      await expect(dropdownListElementOne).toBeHidden();
+    });
   });
 });
diff --git a/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-primary-darkmode-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-primary-darkmode-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..39b272b28
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-primary-darkmode-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-primary-lightmode-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
similarity index 78%
rename from packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
rename to packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-primary-lightmode-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
index a05df276d..54029ea9e 100644
Binary files a/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png and b/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-primary-lightmode-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-secondary-darkmode-click-4d66b-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-secondary-darkmode-click-4d66b-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..61ee5af69
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-secondary-darkmode-click-4d66b-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-secondary-lightmode-clic-aa860-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-secondary-lightmode-clic-aa860-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..277846556
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-disabled-secondary-lightmode-clic-aa860-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts
new file mode 100644
index 000000000..1fca133a6
--- /dev/null
+++ b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts
@@ -0,0 +1,127 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
+
+const componentTestPath = 'src/components/dropdown/test/default/index.html';
+const componentName = 'tds-dropdown';
+const testDescription = 'tds-dropdown-default';
+
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default dropdown correctly', async ({ page }) => {
+      const dropdown = page.getByTestId('tds-dropdown-testid');
+      await expect(dropdown).toHaveCount(1);
+
+      /* check diff in screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
+      const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+      const dropdownListElementOne = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: 'Option 1' });
+      await expect(dropdownListElementOne).toBeHidden();
+      await dropdownButton.click();
+
+      /* before clicking dropdownlist should not be visible, the button should be */
+      await expect(dropdownButton).toBeVisible();
+      await expect(dropdownListElementOne).toBeVisible();
+
+      /* checks diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('clicking the dropdown opens the dropdown-list, then click Option 1', async ({ page }) => {
+      /* click the dropdown button */
+      const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+      await dropdownButton.click();
+
+      /* Click the Option 1 button */
+      const dropdownListElementOneButton = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: /Option 1/ })
+        .getByRole('button');
+      await dropdownListElementOneButton.click();
+
+      await expect(dropdownListElementOneButton).toBeHidden();
+      const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
+      await expect(dropdownButtonWithOption1.first()).toBeVisible();
+
+      /* also check screenshot diff to make sure it says Option 1 */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('focusElement() method focus and opens the dropdown-list', async ({ page }) => {
+      const dropdownButton = page.getByRole('button').first();
+      const dropdownListElementOne = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: 'Option 1' });
+      await expect(dropdownListElementOne).toBeHidden();
+
+      await page.evaluate(() => {
+        const dropdownnew = document.querySelector('tds-dropdown');
+        dropdownnew.focusElement();
+      });
+
+      /* before clicking dropdownlist should not be visible, the button should be */
+      await expect(dropdownButton).toBeVisible();
+      await expect(dropdownListElementOne).toBeVisible();
+
+      /* checks diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('should find label and be visible', async ({ page }) => {
+    const labelText = page.getByText(/Label text/);
+    await expect(labelText).toBeVisible();
+  });
+
+  test('find helper text and check if visible', async ({ page }) => {
+    const helperText = page.getByText(/Helper text/);
+    await expect(helperText).toBeVisible();
+  });
+
+  test('have the placeholder="Placeholder" text', async ({ page }) => {
+    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+    await expect(dropdownButton).toBeVisible();
+  });
+
+  test('clicking the dropdown opens the dropdown-list, then click an option 2 that is disabled should not close it', async ({
+    page,
+  }) => {
+    const dropdownListElementTwoButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 2/ });
+    const dropdownButtonElement = page.getByRole('button', { name: 'Placeholder' });
+
+    /* before clicking dropdownlist should not be visible, the button should be */
+    await expect(dropdownButtonElement).toBeVisible();
+    await expect(dropdownListElementTwoButton).toBeHidden();
+
+    /* after clicking dropdownlist should be visible, the button should also be */
+    await dropdownButtonElement.click();
+    await expect(dropdownButtonElement).toBeVisible();
+    await expect(dropdownListElementTwoButton).toBeVisible();
+
+    /* after clicking option 2 that is disabled list should be visible and also button should be */
+    await dropdownListElementTwoButton.click();
+    await expect(dropdownButtonElement).toBeVisible();
+    await expect(dropdownListElementTwoButton).toBeVisible();
+  });
+});
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-e1a7e--opens-the-dropdown-list-then-click-Option-1-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-e1a7e--opens-the-dropdown-list-then-click-Option-1-1-linux.png
new file mode 100644
index 000000000..a38187689
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-e1a7e--opens-the-dropdown-list-then-click-Option-1-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..e9e9b50c6
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..f7fb4f140
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-renders-default-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-renders-default-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..03cd5afe3
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-renders-default-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clickin-65615--opens-the-dropdown-list-then-click-Option-1-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clickin-65615--opens-the-dropdown-list-then-click-Option-1-1-linux.png
new file mode 100644
index 000000000..50b78b95d
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clickin-65615--opens-the-dropdown-list-then-click-Option-1-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..1d850a4b9
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..e311a8fb5
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-renders-default-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-renders-default-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..2bb03eb87
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-renders-default-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicki-e1e41--opens-the-dropdown-list-then-click-Option-1-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicki-e1e41--opens-the-dropdown-list-then-click-Option-1-1-linux.png
new file mode 100644
index 000000000..c282a839f
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicki-e1e41--opens-the-dropdown-list-then-click-Option-1-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..949c29f12
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..c415c062e
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-renders-default-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-renders-default-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..3ae6ff78f
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-renders-default-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-click-ec84f--opens-the-dropdown-list-then-click-Option-1-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-click-ec84f--opens-the-dropdown-list-then-click-Option-1-1-linux.png
new file mode 100644
index 000000000..e7198ee4a
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-click-ec84f--opens-the-dropdown-list-then-click-Option-1-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..143493ade
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..a02a306d3
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-renders-default-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-renders-default-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..02e99be8f
Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-renders-default-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/unspecified/index.html b/packages/core/src/components/dropdown/test/default/index.html
similarity index 84%
rename from packages/core/src/components/dropdown/test/default/unspecified/index.html
rename to packages/core/src/components/dropdown/test/default/index.html
index 79cbf84bc..910905d34 100644
--- a/packages/core/src/components/dropdown/test/default/unspecified/index.html
+++ b/packages/core/src/components/dropdown/test/default/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <title>Dropdown - Default</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
+    <link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
     <script type="module">
-      import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
+      import { defineCustomElements } from '../../../../../loader/index.es2017.js';
       defineCustomElements();
     </script>
   </head>
diff --git a/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts
deleted file mode 100644
index 056528eb2..000000000
--- a/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/dropdown/test/default/primary/darkmode/index.html';
-
-test.describe.parallel('tds-dropdown-default-primary-darkmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders default dropdown correctly', async ({ page }) => {
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-
-    /* check diff in screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
-    await expect(dropdownListElementOne).toBeHidden();
-    await dropdownButton.click();
-
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOne).toBeVisible();
-
-    /* checks diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('clicking the dropdown opens the dropdown-list, then click Option 1', async ({ page }) => {
-    /* click the dropdown button */
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    await dropdownButton.click();
-
-    /* Click the Option 1 button */
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ })
-      .getByRole('button');
-    await dropdownListElementOneButton.click();
-
-    await expect(dropdownListElementOneButton).toBeHidden();
-    const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
-    await expect(dropdownButtonWithOption1.first()).toBeVisible();
-
-    /* also check screenshot diff to make sure it says Option 1 */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('focusElement() method focus and opens the dropdown-list', async ({ page }) => {
-    const dropdownButton = page.getByRole('button').first();
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
-    await expect(dropdownListElementOne).toBeHidden();
-
-    await page.evaluate(() => {
-      const dropdownnew = document.querySelector('tds-dropdown');
-      dropdownnew.focusElement();
-    });
-
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOne).toBeVisible();
-
-    /* checks diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-e1a7e--opens-the-dropdown-list-then-click-Option-1-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-e1a7e--opens-the-dropdown-list-then-click-Option-1-1-linux.png
deleted file mode 100644
index 92ff43973..000000000
Binary files a/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-e1a7e--opens-the-dropdown-list-then-click-Option-1-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png
deleted file mode 100644
index fae1c4c87..000000000
Binary files a/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-renders-default-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-renders-default-dropdown-correctly-1-linux.png
deleted file mode 100644
index 72d8259c0..000000000
Binary files a/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-renders-default-dropdown-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/primary/darkmode/index.html b/packages/core/src/components/dropdown/test/default/primary/darkmode/index.html
deleted file mode 100644
index 6bbc38b71..000000000
--- a/packages/core/src/components/dropdown/test/default/primary/darkmode/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Dropdown - Default</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../../../dist/tegel/tegel.css" />
-    <script type="module">
-      import { defineCustomElements } from '../../../../../../../loader/index.es2017.js';
-      defineCustomElements();
-    </script>
-  </head>
-
-  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958); padding: 20px">
-    <tds-dropdown
-      name="dropdown"
-      label="Label text"
-      label-position="outside"
-      placeholder="Placeholder"
-      helper="Helper text"
-      size="lg"
-      open-direction="auto"
-      data-testid="tds-dropdown-testid"
-      mode-variant="primary"
-    >
-      <tds-dropdown-option value="option-1">Option 1</tds-dropdown-option>
-      <tds-dropdown-option disabled value="option-2">Option 2</tds-dropdown-option>
-      <tds-dropdown-option value="option-3">Option 3</tds-dropdown-option>
-      <tds-dropdown-option value="option-4">Option 4</tds-dropdown-option>
-    </tds-dropdown>
-  </body>
-</html>
diff --git a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts
deleted file mode 100644
index 4b954f02d..000000000
--- a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/dropdown/test/default/primary/lightmode/index.html';
-
-test.describe.parallel('tds-dropdown-default-primary-lightmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders default dropdown correctly', async ({ page }) => {
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-
-    /* check diff in screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
-    await expect(dropdownListElementOne).toBeHidden();
-    await dropdownButton.click();
-
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOne).toBeVisible();
-
-    /* checks diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('clicking the dropdown opens the dropdown-list, then click Option 1', async ({ page }) => {
-    /* click the dropdown button */
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    await dropdownButton.click();
-
-    /* Click the Option 1 button */
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ })
-      .getByRole('button');
-    await dropdownListElementOneButton.click();
-
-    await expect(dropdownListElementOneButton).toBeHidden();
-    const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
-    await expect(dropdownButtonWithOption1.first()).toBeVisible();
-
-    /* also check screenshot diff to make sure it says Option 1 */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('focusElement() method focus and opens the dropdown-list', async ({ page }) => {
-    const dropdownButton = page.getByRole('button').first();
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
-    await expect(dropdownListElementOne).toBeHidden();
-
-    await page.evaluate(() => {
-      const dropdownnew = document.querySelector('tds-dropdown');
-      dropdownnew.focusElement();
-    });
-
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOne).toBeVisible();
-
-    /* checks diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clickin-65615--opens-the-dropdown-list-then-click-Option-1-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clickin-65615--opens-the-dropdown-list-then-click-Option-1-1-linux.png
deleted file mode 100644
index 571de187b..000000000
Binary files a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clickin-65615--opens-the-dropdown-list-then-click-Option-1-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
deleted file mode 100644
index 617aca6ea..000000000
Binary files a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png
deleted file mode 100644
index 0ac02ffbb..000000000
Binary files a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-renders-default-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-renders-default-dropdown-correctly-1-linux.png
deleted file mode 100644
index abb042f08..000000000
Binary files a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-renders-default-dropdown-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/primary/lightmode/index.html b/packages/core/src/components/dropdown/test/default/primary/lightmode/index.html
deleted file mode 100644
index 941481925..000000000
--- a/packages/core/src/components/dropdown/test/default/primary/lightmode/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Dropdown - Default</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../../../dist/tegel/tegel.css" />
-    <script type="module">
-      import { defineCustomElements } from '../../../../../../../loader/index.es2017.js';
-      defineCustomElements();
-    </script>
-  </head>
-
-  <body style="padding: 20px">
-    <tds-dropdown
-      name="dropdown"
-      label="Label text"
-      label-position="outside"
-      placeholder="Placeholder"
-      helper="Helper text"
-      size="lg"
-      open-direction="auto"
-      data-testid="tds-dropdown-testid"
-      mode-variant="primary"
-    >
-      <tds-dropdown-option value="option-1">Option 1</tds-dropdown-option>
-      <tds-dropdown-option disabled value="option-2">Option 2</tds-dropdown-option>
-      <tds-dropdown-option value="option-3">Option 3</tds-dropdown-option>
-      <tds-dropdown-option value="option-4">Option 4</tds-dropdown-option>
-    </tds-dropdown>
-  </body>
-</html>
diff --git a/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts
deleted file mode 100644
index f941e8c35..000000000
--- a/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/dropdown/test/default/secondary/darkmode/index.html';
-
-test.describe.parallel('tds-dropdown-default-secondary-darkmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders default dropdown correctly', async ({ page }) => {
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-
-    /* check diff in screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
-    await expect(dropdownListElementOne).toBeHidden();
-    await dropdownButton.click();
-
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOne).toBeVisible();
-
-    /* checks diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('clicking the dropdown opens the dropdown-list, then click Option 1', async ({ page }) => {
-    /* click the dropdown button */
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    await dropdownButton.click();
-
-    /* Click the Option 1 button */
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ })
-      .getByRole('button');
-    await dropdownListElementOneButton.click();
-
-    await expect(dropdownListElementOneButton).toBeHidden();
-    const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
-    await expect(dropdownButtonWithOption1.first()).toBeVisible();
-
-    /* also check screenshot diff to make sure it says Option 1 */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('focusElement() method focus and opens the dropdown-list', async ({ page }) => {
-    const dropdownButton = page.getByRole('button').first();
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
-    await expect(dropdownListElementOne).toBeHidden();
-
-    await page.evaluate(() => {
-      const dropdownnew = document.querySelector('tds-dropdown');
-      dropdownnew.focusElement();
-    });
-
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOne).toBeVisible();
-
-    /* checks diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicki-e1e41--opens-the-dropdown-list-then-click-Option-1-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicki-e1e41--opens-the-dropdown-list-then-click-Option-1-1-linux.png
deleted file mode 100644
index 5db76cffd..000000000
Binary files a/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicki-e1e41--opens-the-dropdown-list-then-click-Option-1-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png
deleted file mode 100644
index 109e0c6dc..000000000
Binary files a/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-renders-default-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-renders-default-dropdown-correctly-1-linux.png
deleted file mode 100644
index 37913672a..000000000
Binary files a/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-renders-default-dropdown-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/secondary/darkmode/index.html b/packages/core/src/components/dropdown/test/default/secondary/darkmode/index.html
deleted file mode 100644
index ef8edc749..000000000
--- a/packages/core/src/components/dropdown/test/default/secondary/darkmode/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Dropdown - Default</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../../../dist/tegel/tegel.css" />
-    <script type="module">
-      import { defineCustomElements } from '../../../../../../../loader/index.es2017.js';
-      defineCustomElements();
-    </script>
-  </head>
-
-  <body class="tds-mode-dark" style="background-color: var(--tds-grey-900); padding: 20px">
-    <tds-dropdown
-      name="dropdown"
-      label="Label text"
-      label-position="outside"
-      placeholder="Placeholder"
-      helper="Helper text"
-      size="lg"
-      open-direction="auto"
-      data-testid="tds-dropdown-testid"
-      mode-variant="secondary"
-    >
-      <tds-dropdown-option value="option-1">Option 1</tds-dropdown-option>
-      <tds-dropdown-option disabled value="option-2">Option 2</tds-dropdown-option>
-      <tds-dropdown-option value="option-3">Option 3</tds-dropdown-option>
-      <tds-dropdown-option value="option-4">Option 4</tds-dropdown-option>
-    </tds-dropdown>
-  </body>
-</html>
diff --git a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts
deleted file mode 100644
index 951e0370f..000000000
--- a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/dropdown/test/default/secondary/lightmode/index.html';
-
-test.describe.parallel('tds-dropdown-default-secondary-lightmode', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders default dropdown correctly', async ({ page }) => {
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-
-    /* check diff in screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
-    await expect(dropdownListElementOne).toBeHidden();
-    await dropdownButton.click();
-
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOne).toBeVisible();
-
-    /* checks diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('clicking the dropdown opens the dropdown-list, then click Option 1', async ({ page }) => {
-    /* click the dropdown button */
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    await dropdownButton.click();
-
-    /* Click the Option 1 button */
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ })
-      .getByRole('button');
-    await dropdownListElementOneButton.click();
-
-    await expect(dropdownListElementOneButton).toBeHidden();
-    const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
-    await expect(dropdownButtonWithOption1.first()).toBeVisible();
-
-    /* also check screenshot diff to make sure it says Option 1 */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('focusElement() method focus and opens the dropdown-list', async ({ page }) => {
-    const dropdownButton = page.getByRole('button').first();
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
-    await expect(dropdownListElementOne).toBeHidden();
-
-    await page.evaluate(() => {
-      const dropdownnew = document.querySelector('tds-dropdown');
-      dropdownnew.focusElement();
-    });
-
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOne).toBeVisible();
-
-    /* checks diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-click-ec84f--opens-the-dropdown-list-then-click-Option-1-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-click-ec84f--opens-the-dropdown-list-then-click-Option-1-1-linux.png
deleted file mode 100644
index b91a774d8..000000000
Binary files a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-click-ec84f--opens-the-dropdown-list-then-click-Option-1-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
deleted file mode 100644
index 93461fd52..000000000
Binary files a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png
deleted file mode 100644
index b29c17644..000000000
Binary files a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-renders-default-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-renders-default-dropdown-correctly-1-linux.png
deleted file mode 100644
index bca1ac5a6..000000000
Binary files a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-renders-default-dropdown-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/secondary/lightmode/index.html b/packages/core/src/components/dropdown/test/default/secondary/lightmode/index.html
deleted file mode 100644
index ae7a93e99..000000000
--- a/packages/core/src/components/dropdown/test/default/secondary/lightmode/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Dropdown - Default</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link rel="stylesheet" href="../../../../../../../dist/tegel/tegel.css" />
-    <script type="module">
-      import { defineCustomElements } from '../../../../../../../loader/index.es2017.js';
-      defineCustomElements();
-    </script>
-  </head>
-
-  <body style="background-color: var(--tds-grey-50); padding: 20px">
-    <tds-dropdown
-      name="dropdown"
-      label="Label text"
-      label-position="outside"
-      placeholder="Placeholder"
-      helper="Helper text"
-      size="lg"
-      open-direction="auto"
-      data-testid="tds-dropdown-testid"
-      mode-variant="secondary"
-    >
-      <tds-dropdown-option value="option-1">Option 1</tds-dropdown-option>
-      <tds-dropdown-option disabled value="option-2">Option 2</tds-dropdown-option>
-      <tds-dropdown-option value="option-3">Option 3</tds-dropdown-option>
-      <tds-dropdown-option value="option-4">Option 4</tds-dropdown-option>
-    </tds-dropdown>
-  </body>
-</html>
diff --git a/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts
deleted file mode 100644
index 43dd2b7f7..000000000
--- a/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { test } from 'stencil-playwright';
-import { expect } from '@playwright/test';
-
-const componentTestPath = 'src/components/dropdown/test/default/unspecified/index.html';
-
-test.describe.parallel('tds-dropdown-default', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders default dropdown correctly', async ({ page }) => {
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-
-    /* check diff in screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('should find label and be visible', async ({ page }) => {
-    const labelText = page.getByText(/Label text/);
-    await expect(labelText).toBeVisible();
-  });
-
-  test('find helper text and check if visible', async ({ page }) => {
-    const helperText = page.getByText(/Helper text/);
-    await expect(helperText).toBeVisible();
-  });
-
-  test('have the placeholder="Placeholder" text', async ({ page }) => {
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    await expect(dropdownButton).toBeVisible();
-  });
-
-  test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
-    await expect(dropdownListElementOne).toBeHidden();
-    await dropdownButton.click();
-
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOne).toBeVisible();
-
-    /* checks diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('clicking the dropdown opens the dropdown-list, then click Option 1', async ({ page }) => {
-    /* click the dropdown button */
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    await dropdownButton.click();
-
-    /* Click the Option 1 button */
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ })
-      .getByRole('button');
-    await dropdownListElementOneButton.click();
-
-    await expect(dropdownListElementOneButton).toBeHidden();
-    const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
-    await expect(dropdownButtonWithOption1.first()).toBeVisible();
-
-    /* also check screenshot diff to make sure it says Option 1 */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('clicking the dropdown opens the dropdown-list, then click an option 2 that is disabled should not close it', async ({
-    page,
-  }) => {
-    const dropdownListElementTwoButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 2/ });
-    const dropdownButtonElement = page.getByRole('button', { name: 'Placeholder' });
-
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButtonElement).toBeVisible();
-    await expect(dropdownListElementTwoButton).toBeHidden();
-
-    /* after clicking dropdownlist should be visible, the button should also be */
-    await dropdownButtonElement.click();
-    await expect(dropdownButtonElement).toBeVisible();
-    await expect(dropdownListElementTwoButton).toBeVisible();
-
-    /* after clicking option 2 that is disabled list should be visible and also button should be */
-    await dropdownListElementTwoButton.click();
-    await expect(dropdownButtonElement).toBeVisible();
-    await expect(dropdownListElementTwoButton).toBeVisible();
-  });
-  test('focusElement() method focus and opens the dropdown-list', async ({ page }) => {
-    const dropdownButton = page.getByRole('button').first();
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
-    await expect(dropdownListElementOne).toBeHidden();
-
-    await page.evaluate(() => {
-      const dropdownnew = document.querySelector('tds-dropdown');
-      dropdownnew.focusElement();
-    });
-
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOne).toBeVisible();
-
-    /* checks diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});
diff --git a/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
deleted file mode 100644
index e22cf88cf..000000000
Binary files a/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-clicking-the-dropdown-opens-the-dropdown-list-then-click-Option-1-1-linux.png b/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-clicking-the-dropdown-opens-the-dropdown-list-then-click-Option-1-1-linux.png
deleted file mode 100644
index f978db7a7..000000000
Binary files a/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-clicking-the-dropdown-opens-the-dropdown-list-then-click-Option-1-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png
deleted file mode 100644
index 2dee4f339..000000000
Binary files a/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts
index a0f1f3c93..19412d091 100644
--- a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts
+++ b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts
@@ -1,45 +1,60 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/dropdown/test/error/index.html';
+const componentName = 'tds-dropdown';
+const testDescription = 'tds-dropdown-error';
+
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders error dropdown correctly', async ({ page }) => {
+      const dropdown = page.getByTestId('tds-dropdown-testid');
+      await expect(dropdown).toHaveCount(1);
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('clicking the dropdown opens the dropdown-list', async ({ page }) => {
+      const dropdownListElementOneButton = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: /Option 1/ })
+        .getByRole('button');
+      const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+
+      /* before clicking dropdownlist should not be visible, the button should be */
+      await expect(dropdownButton).toBeVisible();
+      await expect(dropdownListElementOneButton).toBeHidden();
+      await dropdownButton.click();
+
+      /* after clicking dropdownlist should be visible, the button should also be */
+      await expect(dropdownButton).toBeVisible();
+      await expect(dropdownListElementOneButton).toBeVisible();
+
+      /* check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
-test.describe.parallel('tds-dropdown-error', () => {
+test.describe.parallel(componentName, () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
   });
 
-  test('renders error dropdown correctly', async ({ page }) => {
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
   test('find helper text and check if visible and have icon', async ({ page }) => {
     const helperText = page.getByText(/Helper text/);
     await expect(helperText).toBeVisible();
     const helperTextIcon = helperText.getByRole('img');
     await expect(helperTextIcon).toHaveCount(1);
   });
-
-  test('clicking the dropdown opens the dropdown-list', async ({ page }) => {
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ })
-      .getByRole('button');
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeHidden();
-    await dropdownButton.click();
-
-    /* after clicking dropdownlist should be visible, the button should also be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeVisible();
-
-    /* check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
 });
diff --git a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png
deleted file mode 100644
index 97aa154aa..000000000
Binary files a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-primary-darkmode-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-primary-darkmode-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..e26787733
Binary files /dev/null and b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-primary-darkmode-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-primary-darkmode-renders-error-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-primary-darkmode-renders-error-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..73473d6bf
Binary files /dev/null and b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-primary-darkmode-renders-error-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-primary-lightmode-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-primary-lightmode-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..17bff3a15
Binary files /dev/null and b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-primary-lightmode-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-primary-lightmode-renders-error-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-primary-lightmode-renders-error-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..4979ccf07
Binary files /dev/null and b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-primary-lightmode-renders-error-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-renders-error-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-renders-error-dropdown-correctly-1-linux.png
deleted file mode 100644
index 860de5e00..000000000
Binary files a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-renders-error-dropdown-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-secondary-darkmode-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-secondary-darkmode-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..83144316e
Binary files /dev/null and b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-secondary-darkmode-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-secondary-darkmode-renders-error-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-secondary-darkmode-renders-error-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..df5a1d4a6
Binary files /dev/null and b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-secondary-darkmode-renders-error-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-secondary-lightmode-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-secondary-lightmode-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..bafa3f339
Binary files /dev/null and b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-secondary-lightmode-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-secondary-lightmode-renders-error-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-secondary-lightmode-renders-error-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..edf6bc7fc
Binary files /dev/null and b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts-snapshots/tds-dropdown-error-secondary-lightmode-renders-error-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts
index 7547fb14c..7c1f2bbbe 100644
--- a/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts
+++ b/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts
@@ -1,31 +1,47 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/dropdown/test/filter/disabled/index.html';
+const componentName = 'tds-dropdown';
+const testDescription = 'tds-dropdown-filter-disabled';
 
-test.describe('tds-dropdown-filter-disabled', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('clicking the dropdown icon does not open the dropdown-list', async ({ page }) => {
-    const dropdownButtonIcon = page.locator('.menu-icon');
+    test('clicking the dropdown icon does not open the dropdown-list', async ({ page }) => {
+      const dropdownButtonIcon = page.locator('.menu-icon');
 
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
+      const dropdownListElementOne = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: 'Option 1' });
 
-    await expect(dropdownListElementOne).toBeHidden();
-    /* force a click on the icon. Since the icon is inside of a disabled button playwright will error if it is not forced */
-    await dropdownButtonIcon.click({
-      force: true,
-    });
+      await expect(dropdownListElementOne).toBeHidden();
+      /* force a click on the icon. Since the icon is inside of a disabled button playwright will error if it is not forced */
+      await dropdownButtonIcon.click({
+        force: true,
+      });
 
-    /* no child elements should be visible. */
-    await expect(dropdownListElementOne).toBeHidden();
+      /* no child elements should be visible. */
+      await expect(dropdownListElementOne).toBeHidden();
+
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
+
   test('clicking the dropdown button does not open the dropdown-list', async ({ page }) => {
     const dropdownButton = page.getByRole('textbox').first();
 
diff --git a/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-primary-darkmode--21ff3-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-primary-darkmode--21ff3-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..620d6518a
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-primary-darkmode--21ff3-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-primary-lightmode-88a77-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-primary-lightmode-88a77-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..ce5aefe3b
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-primary-lightmode-88a77-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-secondary-darkmod-8f940-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
similarity index 77%
rename from packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
rename to packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-secondary-darkmod-8f940-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
index cc13478ed..dc8c316e3 100644
Binary files a/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png and b/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-secondary-darkmod-8f940-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-renders-default-textarea-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-secondary-lightmo-935c2-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
similarity index 76%
rename from packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-renders-default-textarea-correctly-1-linux.png
rename to packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-secondary-lightmo-935c2-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
index ce6fc6e86..227c42b1f 100644
Binary files a/packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-renders-default-textarea-correctly-1-linux.png and b/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-secondary-lightmo-935c2-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts
index 1a30f576d..5eb23edc9 100644
--- a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts
+++ b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts
@@ -1,122 +1,131 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/dropdown/test/filter/index.html';
-
-test.describe.parallel('tds-dropdown-filter', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders filter dropdown correctly', async ({ page }) => {
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('clicking the dropdown opens the dropdown-list, then start typing "iles" to only show that option in the dropdown list', async ({
-    page,
-  }) => {
-    const inputElement = page.getByRole('textbox');
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ });
-    const dropdownListElementTwoButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 2/ });
-    const dropdownListElementThreeButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 3/ });
-    const dropdownListElementFourButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 4/ });
-    const dropdownListElementFiveButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /îles Åland/ });
-
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(inputElement).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeHidden();
-    await expect(dropdownListElementTwoButton).toBeHidden();
-    await expect(dropdownListElementThreeButton).toBeHidden();
-    await expect(dropdownListElementFourButton).toBeHidden();
-    await expect(dropdownListElementFiveButton).toBeHidden();
-
-    /* Clicking the input element should show the dropdown list and all its content */
-    await inputElement.click();
-    await expect(inputElement).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeVisible();
-    await expect(dropdownListElementTwoButton).toBeVisible();
-    await expect(dropdownListElementThreeButton).toBeVisible();
-    await expect(dropdownListElementFourButton).toBeVisible();
-    await expect(dropdownListElementFiveButton).toBeVisible();
-
-    /* Add text "iles" and only Option 1 should be visible */
-    await inputElement.fill('iles');
-    await expect(inputElement).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeHidden();
-    await expect(dropdownListElementTwoButton).toBeHidden();
-    await expect(dropdownListElementThreeButton).toBeHidden();
-    await expect(dropdownListElementFourButton).toBeHidden();
-    await expect(dropdownListElementFiveButton).toBeVisible();
-
-    await dropdownListElementFiveButton.click();
-
-    await expect(inputElement).toHaveValue('îles Åland');
-
-    /* Erase some letters from the input */
-    await inputElement.press('Backspace');
-
-    await dropdownListElementFiveButton.click();
-    await expect(inputElement).toHaveValue('îles Åland');
-
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('reset button icon appears when typing in the filter input', async ({ page }) => {
-    const inputElement = page.getByRole('textbox');
-    const resetButton = page.locator('tds-icon[name="cross"]');
-
-    // Ensure the reset button is initially not visible
-    expect(resetButton).toBeHidden();
-
-    // Focus on the input element and start typing
-    await inputElement.click();
-    await inputElement.fill('iles'); // Type something to trigger filter functionality
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-
-    // Verify that the reset button is now visible
-    await expect(resetButton).toBeVisible();
-
-    // Optionally, click the reset button and assert the input is cleared and the reset button hides again
-    await resetButton.click();
-    await expect(inputElement).toHaveValue(''); // Ensure input is cleared
-    await expect(resetButton).toBeHidden(); // Reset button should hide again after clearing the input
-  });
-
-  test('toggle dropdown visibility and select option two', async ({ page }) => {
-    const inputElement = page.getByRole('textbox');
-    const dropdownListElementTwoButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 2/ });
-
-    const dropdownButton = page.locator('tds-icon[aria-label="Open/Close dropdown"]');
-
-    // Focus on the input element and start typing
-    await expect(dropdownListElementTwoButton).toBeHidden();
-    await inputElement.click();
-    await expect(inputElement).toBeVisible();
-
-    // Click the dropdown button to open the dropdown list
-    await dropdownListElementTwoButton.click();
-    await inputElement.click();
-    // Click the dropdown button to close the dropdown list
-    await dropdownButton.click();
-    // Click the dropdown button to open the dropdown list
-    await dropdownButton.click();
-
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+const componentName = 'tds-dropdown';
+const testDescription = 'tds-dropdown-filter';
+
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders filter dropdown correctly', async ({ page }) => {
+      const dropdown = page.getByTestId('tds-dropdown-testid');
+      await expect(dropdown).toHaveCount(1);
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('clicking the dropdown opens the dropdown-list, then start typing "iles" to only show that option in the dropdown list', async ({
+      page,
+    }) => {
+      const inputElement = page.getByRole('textbox');
+      const dropdownListElementOneButton = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: /Option 1/ });
+      const dropdownListElementTwoButton = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: /Option 2/ });
+      const dropdownListElementThreeButton = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: /Option 3/ });
+      const dropdownListElementFourButton = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: /Option 4/ });
+      const dropdownListElementFiveButton = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: /îles Åland/ });
+
+      /* before clicking dropdownlist should not be visible, the button should be */
+      await expect(inputElement).toBeVisible();
+      await expect(dropdownListElementOneButton).toBeHidden();
+      await expect(dropdownListElementTwoButton).toBeHidden();
+      await expect(dropdownListElementThreeButton).toBeHidden();
+      await expect(dropdownListElementFourButton).toBeHidden();
+      await expect(dropdownListElementFiveButton).toBeHidden();
+
+      /* Clicking the input element should show the dropdown list and all its content */
+      await inputElement.click();
+      await expect(inputElement).toBeVisible();
+      await expect(dropdownListElementOneButton).toBeVisible();
+      await expect(dropdownListElementTwoButton).toBeVisible();
+      await expect(dropdownListElementThreeButton).toBeVisible();
+      await expect(dropdownListElementFourButton).toBeVisible();
+      await expect(dropdownListElementFiveButton).toBeVisible();
+
+      /* Add text "iles" and only Option 1 should be visible */
+      await inputElement.fill('iles');
+      await expect(inputElement).toBeVisible();
+      await expect(dropdownListElementOneButton).toBeHidden();
+      await expect(dropdownListElementTwoButton).toBeHidden();
+      await expect(dropdownListElementThreeButton).toBeHidden();
+      await expect(dropdownListElementFourButton).toBeHidden();
+      await expect(dropdownListElementFiveButton).toBeVisible();
+
+      await dropdownListElementFiveButton.click();
+
+      await expect(inputElement).toHaveValue('îles Åland');
+
+      /* Erase some letters from the input */
+      await inputElement.press('Backspace');
+
+      await dropdownListElementFiveButton.click();
+      await expect(inputElement).toHaveValue('îles Åland');
+
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('reset button icon appears when typing in the filter input', async ({ page }) => {
+      const inputElement = page.getByRole('textbox');
+      const resetButton = page.locator('tds-icon[name="cross"]');
+
+      // Ensure the reset button is initially not visible
+      expect(resetButton).toBeHidden();
+
+      // Focus on the input element and start typing
+      await inputElement.click();
+      await inputElement.fill('iles'); // Type something to trigger filter functionality
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+
+      // Verify that the reset button is now visible
+      await expect(resetButton).toBeVisible();
+
+      // Optionally, click the reset button and assert the input is cleared and the reset button hides again
+      await resetButton.click();
+      await expect(inputElement).toHaveValue(''); // Ensure input is cleared
+      await expect(resetButton).toBeHidden(); // Reset button should hide again after clearing the input
+    });
+
+    test('toggle dropdown visibility and select option two', async ({ page }) => {
+      const inputElement = page.getByRole('textbox');
+      const dropdownListElementTwoButton = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: /Option 2/ });
+
+      const dropdownButton = page.locator('tds-icon[aria-label="Open/Close dropdown"]');
+
+      // Focus on the input element and start typing
+      await expect(dropdownListElementTwoButton).toBeHidden();
+      await inputElement.click();
+      await expect(inputElement).toBeVisible();
+
+      // Click the dropdown button to open the dropdown list
+      await dropdownListElementTwoButton.click();
+      await inputElement.click();
+      // Click the dropdown button to close the dropdown list
+      await dropdownButton.click();
+      // Click the dropdown button to open the dropdown list
+      await dropdownButton.click();
+
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-clicking-the-dropdown-open-d3b09-to-only-show-that-option-in-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-clicking-the-dropdown-open-d3b09-to-only-show-that-option-in-the-dropdown-list-1-linux.png
deleted file mode 100644
index e918e9fc9..000000000
Binary files a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-clicking-the-dropdown-open-d3b09-to-only-show-that-option-in-the-dropdown-list-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-clicking--1fc8d-to-only-show-that-option-in-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-clicking--1fc8d-to-only-show-that-option-in-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..f2d3e40ca
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-clicking--1fc8d-to-only-show-that-option-in-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-renders-filter-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..5f218418e
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-renders-filter-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png
new file mode 100644
index 000000000..c832b1f57
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-toggle-dropdown-visibility-and-select-option-two-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-toggle-dropdown-visibility-and-select-option-two-1-linux.png
new file mode 100644
index 000000000..9ad04453b
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-toggle-dropdown-visibility-and-select-option-two-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-clicking-b10c6-to-only-show-that-option-in-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-clicking-b10c6-to-only-show-that-option-in-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..11a92e75e
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-clicking-b10c6-to-only-show-that-option-in-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-renders-filter-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..07876d377
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-renders-filter-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png
new file mode 100644
index 000000000..c8f599022
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-toggle-dropdown-visibility-and-select-option-two-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-toggle-dropdown-visibility-and-select-option-two-1-linux.png
new file mode 100644
index 000000000..b305c3799
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-toggle-dropdown-visibility-and-select-option-two-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png
deleted file mode 100644
index b7d2c96f6..000000000
Binary files a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png
deleted file mode 100644
index abe2e636e..000000000
Binary files a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-clickin-7c85c-to-only-show-that-option-in-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-clickin-7c85c-to-only-show-that-option-in-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..13caf3a5c
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-clickin-7c85c-to-only-show-that-option-in-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-renders-filter-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..0f07e900c
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-renders-filter-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png
new file mode 100644
index 000000000..ac7c53a08
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-toggle-dropdown-visibility-and-select-option-two-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-toggle-dropdown-visibility-and-select-option-two-1-linux.png
new file mode 100644
index 000000000..5f191f4cb
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-toggle-dropdown-visibility-and-select-option-two-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-clicki-b35f6-to-only-show-that-option-in-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-clicki-b35f6-to-only-show-that-option-in-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..d288d7a6f
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-clicki-b35f6-to-only-show-that-option-in-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-renders-filter-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..e0a376525
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-renders-filter-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png
new file mode 100644
index 000000000..a75e750b7
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-reset-button-icon-appears-when-typing-in-the-filter-input-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-toggle-dropdown-visibility-and-select-option-two-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-toggle-dropdown-visibility-and-select-option-two-1-linux.png
new file mode 100644
index 000000000..27ee623ab
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-toggle-dropdown-visibility-and-select-option-two-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-toggle-dropdown-visibility-and-select-option-two-1-linux.png b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-toggle-dropdown-visibility-and-select-option-two-1-linux.png
deleted file mode 100644
index 5bbcf915c..000000000
Binary files a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts-snapshots/tds-dropdown-filter-toggle-dropdown-visibility-and-select-option-two-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts
index 005b5998c..3b888e036 100644
--- a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts
+++ b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts
@@ -1,32 +1,41 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/dropdown/test/filter/hide-no-result-message/index.html';
+const componentName = 'tds-dropdown';
+const testDescription = 'tds-dropdown-filter';
 
-test.describe('tds-dropdown-filter', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('renders filter dropdown correctly', async ({ page }) => {
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
+    test('renders filter dropdown correctly', async ({ page }) => {
+      const dropdown = page.getByTestId('tds-dropdown-testid');
+      await expect(dropdown).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-  test('typing non existing value does not show "No results!" message', async ({ page }) => {
-    const inputElement = page.getByRole('textbox');
+    test('typing non existing value does not show "No results!" message', async ({ page }) => {
+      const inputElement = page.getByRole('textbox');
 
-    /* Add text and only Option 1 should be visible */
-    await inputElement.fill('Johnny looks for no results message');
-    await expect(inputElement).toBeVisible();
+      /* Add text and only Option 1 should be visible */
+      await inputElement.fill('Johnny looks for no results message');
+      await expect(inputElement).toBeVisible();
 
-    const noResult = page.getByText('No result');
-    await expect(noResult).toBeHidden();
+      const noResult = page.getByText('No result');
+      await expect(noResult).toBeHidden();
 
-    /* Check diff on screenshot after adding text */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot after adding text */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-renders-filter-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..5f218418e
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-renders-filter-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-typing-non-existing-value-does-not-show-No-results-message-1-linux.png b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-typing-non-existing-value-does-not-show-No-results-message-1-linux.png
new file mode 100644
index 000000000..5773690c4
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-typing-non-existing-value-does-not-show-No-results-message-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-renders-filter-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..07876d377
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-renders-filter-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-typing-n-30e20-ing-value-does-not-show-No-results-message-1-linux.png b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-typing-n-30e20-ing-value-does-not-show-No-results-message-1-linux.png
new file mode 100644
index 000000000..fcf414126
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-typing-n-30e20-ing-value-does-not-show-No-results-message-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png
deleted file mode 100644
index b7d2c96f6..000000000
Binary files a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-renders-filter-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..0f07e900c
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-renders-filter-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-typing--3b981-ing-value-does-not-show-No-results-message-1-linux.png b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-typing--3b981-ing-value-does-not-show-No-results-message-1-linux.png
new file mode 100644
index 000000000..3ab8eb212
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-typing--3b981-ing-value-does-not-show-No-results-message-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-renders-filter-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..e0a376525
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-renders-filter-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-typing-b688e-ing-value-does-not-show-No-results-message-1-linux.png b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-typing-b688e-ing-value-does-not-show-No-results-message-1-linux.png
new file mode 100644
index 000000000..65d34d9de
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-typing-b688e-ing-value-does-not-show-No-results-message-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-typing-non-existing-value-does-not-show-No-results-message-1-linux.png b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-typing-non-existing-value-does-not-show-No-results-message-1-linux.png
deleted file mode 100644
index 3f6aa4dad..000000000
Binary files a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts-snapshots/tds-dropdown-filter-typing-non-existing-value-does-not-show-No-results-message-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts
index fe164793c..0ba710ee1 100644
--- a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts
+++ b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts
@@ -1,54 +1,63 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/dropdown/test/filter/normalize-text-false/index.html';
-
-test.describe('tds-dropdown-filter', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('renders filter dropdown correctly', async ({ page }) => {
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('typing "iles" should not show anything in dropdown with normalize text set to false', async ({
-    page,
-  }) => {
-    const inputElement = page.getByRole('textbox');
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ });
-    const dropdownListElementTwoButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 2/ });
-    const dropdownListElementThreeButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 3/ });
-    const dropdownListElementFourButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 4/ });
-    const dropdownListElementFiveButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /îles Åland/ });
-
-    /* Add text and only Option 1 should be visible */
-    await inputElement.fill('iles');
-    await expect(inputElement).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeHidden();
-    await expect(dropdownListElementTwoButton).toBeHidden();
-    await expect(dropdownListElementThreeButton).toBeHidden();
-    await expect(dropdownListElementFourButton).toBeHidden();
-    await expect(dropdownListElementFiveButton).toBeHidden();
-
-    const noResult = page.getByText('No result');
-    await expect(noResult).toBeVisible();
-
-    /* Check diff on screenshot after adding text */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+const componentName = 'tds-dropdown';
+const testDescription = 'tds-dropdown-filter';
+
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders filter dropdown correctly', async ({ page }) => {
+      const dropdown = page.getByTestId('tds-dropdown-testid');
+      await expect(dropdown).toHaveCount(1);
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('typing "iles" should not show anything in dropdown with normalize text set to false', async ({
+      page,
+    }) => {
+      const inputElement = page.getByRole('textbox');
+      const dropdownListElementOneButton = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: /Option 1/ });
+      const dropdownListElementTwoButton = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: /Option 2/ });
+      const dropdownListElementThreeButton = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: /Option 3/ });
+      const dropdownListElementFourButton = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: /Option 4/ });
+      const dropdownListElementFiveButton = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: /îles Åland/ });
+
+      /* Add text and only Option 1 should be visible */
+      await inputElement.fill('iles');
+      await expect(inputElement).toBeVisible();
+      await expect(dropdownListElementOneButton).toBeHidden();
+      await expect(dropdownListElementTwoButton).toBeHidden();
+      await expect(dropdownListElementThreeButton).toBeHidden();
+      await expect(dropdownListElementFourButton).toBeHidden();
+      await expect(dropdownListElementFiveButton).toBeHidden();
+
+      const noResult = page.getByText('No result');
+      await expect(noResult).toBeVisible();
+
+      /* Check diff on screenshot after adding text */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-renders-filter-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..5f218418e
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-renders-filter-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-typing-i-b39a9--in-dropdown-with-normalize-text-set-to-false-1-linux.png b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-typing-i-b39a9--in-dropdown-with-normalize-text-set-to-false-1-linux.png
new file mode 100644
index 000000000..ef7e242a6
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-darkmode-typing-i-b39a9--in-dropdown-with-normalize-text-set-to-false-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-renders-filter-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..07876d377
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-renders-filter-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-typing--853a0--in-dropdown-with-normalize-text-set-to-false-1-linux.png b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-typing--853a0--in-dropdown-with-normalize-text-set-to-false-1-linux.png
new file mode 100644
index 000000000..88faf4a47
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-primary-lightmode-typing--853a0--in-dropdown-with-normalize-text-set-to-false-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png
deleted file mode 100644
index b7d2c96f6..000000000
Binary files a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-renders-filter-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..0f07e900c
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-renders-filter-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-typing--2eb9d--in-dropdown-with-normalize-text-set-to-false-1-linux.png b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-typing--2eb9d--in-dropdown-with-normalize-text-set-to-false-1-linux.png
new file mode 100644
index 000000000..9fde70ab3
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-darkmode-typing--2eb9d--in-dropdown-with-normalize-text-set-to-false-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-renders-filter-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-renders-filter-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..e0a376525
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-renders-filter-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-typing-72188--in-dropdown-with-normalize-text-set-to-false-1-linux.png b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-typing-72188--in-dropdown-with-normalize-text-set-to-false-1-linux.png
new file mode 100644
index 000000000..0378ba4f8
Binary files /dev/null and b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-secondary-lightmode-typing-72188--in-dropdown-with-normalize-text-set-to-false-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-typing-iles-should-not-s-94317--in-dropdown-with-normalize-text-set-to-false-1-linux.png b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-typing-iles-should-not-s-94317--in-dropdown-with-normalize-text-set-to-false-1-linux.png
deleted file mode 100644
index 61b6abcf5..000000000
Binary files a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts-snapshots/tds-dropdown-filter-typing-iles-should-not-s-94317--in-dropdown-with-normalize-text-set-to-false-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts
index f1448f6f3..4bbbdea66 100644
--- a/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts
+++ b/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts
@@ -1,34 +1,43 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/dropdown/test/multiselect-filter/index.html';
-
-test.describe.parallel('tds-dropdown-multiselect-filter', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
-
-  test('When focusing on the input it should clear itself', async ({ page }) => {
-    // Click the dropdown button
-    const dropdownButton = page.locator('tds-icon[aria-label="Open/Close dropdown"]');
-    await dropdownButton.click();
-
-    // Get the input element
-    const dropdownListElementOneButton = page
-      .getByText(/Option 1/)
-      .filter({ has: page.getByRole('checkbox') });
-
-    // Check if the first option is present
-    await expect(dropdownListElementOneButton).toHaveCount(1);
-
-    // Click the first option
-    await dropdownListElementOneButton.click();
-
-    // Closing dropdown options
-    await dropdownButton.click();
-    // Opening dropdown options to autofocus the input
-    await dropdownButton.click();
-
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+const componentName = 'tds-dropdown';
+const testDescription = 'tds-dropdown-multiselect-filter';
+
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('When focusing on the input it should clear itself', async ({ page }) => {
+      // Click the dropdown button
+      const dropdownButton = page.locator('tds-icon[aria-label="Open/Close dropdown"]');
+      await dropdownButton.click();
+
+      // Get the input element
+      const dropdownListElementOneButton = page
+        .getByText(/Option 1/)
+        .filter({ has: page.getByRole('checkbox') });
+
+      // Check if the first option is present
+      await expect(dropdownListElementOneButton).toHaveCount(1);
+
+      // Click the first option
+      await dropdownListElementOneButton.click();
+
+      // Closing dropdown options
+      await dropdownButton.click();
+      // Opening dropdown options to autofocus the input
+      await dropdownButton.click();
+
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-When-focusing-on-the-input-it-should-clear-itself-1-linux.png b/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-When-focusing-on-the-input-it-should-clear-itself-1-linux.png
deleted file mode 100644
index ba8fd2c64..000000000
Binary files a/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-When-focusing-on-the-input-it-should-clear-itself-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-primary-darkmode-When-focusing-on-the-input-it-should-clear-itself-1-linux.png b/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-primary-darkmode-When-focusing-on-the-input-it-should-clear-itself-1-linux.png
new file mode 100644
index 000000000..8b76ef4c3
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-primary-darkmode-When-focusing-on-the-input-it-should-clear-itself-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-primary-lightm-122a2--focusing-on-the-input-it-should-clear-itself-1-linux.png b/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-primary-lightm-122a2--focusing-on-the-input-it-should-clear-itself-1-linux.png
new file mode 100644
index 000000000..c849d7235
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-primary-lightm-122a2--focusing-on-the-input-it-should-clear-itself-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-secondary-dark-2a708--focusing-on-the-input-it-should-clear-itself-1-linux.png b/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-secondary-dark-2a708--focusing-on-the-input-it-should-clear-itself-1-linux.png
new file mode 100644
index 000000000..a45e6095b
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-secondary-dark-2a708--focusing-on-the-input-it-should-clear-itself-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-secondary-ligh-8ded2--focusing-on-the-input-it-should-clear-itself-1-linux.png b/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-secondary-ligh-8ded2--focusing-on-the-input-it-should-clear-itself-1-linux.png
new file mode 100644
index 000000000..b8ac7f514
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-filter-secondary-ligh-8ded2--focusing-on-the-input-it-should-clear-itself-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts
index 58d4c431c..c405bd70d 100644
--- a/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts
+++ b/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts
@@ -1,31 +1,47 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/dropdown/test/multiselect/disabled/index.html';
+const componentName = 'tds-dropdown';
+const testDescription = 'tds-dropdown-multiselect-disabled';
 
-test.describe('tds-dropdown-multiselect-disabled', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('clicking the dropdown icon does not open the dropdown-list', async ({ page }) => {
-    const dropdownButtonIcon = page.locator('tds-icon');
+    test('clicking the dropdown icon does not open the dropdown-list', async ({ page }) => {
+      const dropdownButtonIcon = page.locator('tds-icon');
 
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
+      const dropdownListElementOne = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: 'Option 1' });
 
-    await expect(dropdownListElementOne).toBeHidden();
-    /* force a click on the icon. Since the icon is inside of a disabled button playwright will error if it is not forced */
-    await dropdownButtonIcon.click({
-      force: true,
-    });
+      await expect(dropdownListElementOne).toBeHidden();
+      /* force a click on the icon. Since the icon is inside of a disabled button playwright will error if it is not forced */
+      await dropdownButtonIcon.click({
+        force: true,
+      });
 
-    /* no child elements should be visible. */
-    await expect(dropdownListElementOne).toBeHidden();
+      /* no child elements should be visible. */
+      await expect(dropdownListElementOne).toBeHidden();
+
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
+
   test('clicking the dropdown button does not open the dropdown-list', async ({ page }) => {
     const dropdownButton = page.getByRole('button').first();
 
diff --git a/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-primary-dark-fe338-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-primary-dark-fe338-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..39b272b28
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-primary-dark-fe338-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-primary-ligh-708cd-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
similarity index 78%
rename from packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
rename to packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-primary-ligh-708cd-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
index cc13478ed..54029ea9e 100644
Binary files a/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-filter-disabled-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png and b/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-primary-ligh-708cd-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-secondary-da-3ae85-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-secondary-da-3ae85-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..61ee5af69
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-secondary-da-3ae85-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-secondary-li-c5d79-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-secondary-li-c5d79-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
new file mode 100644
index 000000000..277846556
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-disabled-secondary-li-c5d79-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts
index e38e2d285..b95bf02d0 100644
--- a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts
+++ b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts
@@ -1,100 +1,109 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/dropdown/test/multiselect/index.html';
+const componentName = 'tds-dropdown';
+const testDescription = 'tds-dropdown-multiselect';
 
-test.describe.parallel('tds-dropdown-multiselect', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('renders multiselect dropdown correctly', async ({ page }) => {
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
+    test('renders multiselect dropdown correctly', async ({ page }) => {
+      const dropdown = page.getByTestId('tds-dropdown-testid');
+      await expect(dropdown).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-  test('clicking the dropdown opens the dropdown-list, then click Option 1, should not close it', async ({
-    page,
-  }) => {
-    /* click the dropdown button */
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    await dropdownButton.click();
+    test('clicking the dropdown opens the dropdown-list, then click Option 1, should not close it', async ({
+      page,
+    }) => {
+      /* click the dropdown button */
+      const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+      await dropdownButton.click();
 
-    /* Click the Option 1 button */
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ });
-    await dropdownListElementOneButton.click();
+      /* Click the Option 1 button */
+      const dropdownListElementOneButton = page
+        .locator('tds-dropdown-option')
+        .filter({ hasText: /Option 1/ });
+      await dropdownListElementOneButton.click();
 
-    await expect(dropdownListElementOneButton).toBeVisible();
-    const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
-    await expect(dropdownButtonWithOption1.first()).toBeVisible();
+      await expect(dropdownListElementOneButton).toBeVisible();
+      const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
+      await expect(dropdownButtonWithOption1.first()).toBeVisible();
 
-    /* also check screenshot diff to make sure it says Option 1 */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+      /* also check screenshot diff to make sure it says Option 1 */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-  test('clicking the dropdown opens the dropdown-list, then click on all the options', async ({
-    page,
-  }) => {
-    /* click the button */
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    await dropdownButton.click();
+    test('clicking the dropdown opens the dropdown-list, then click on all the options', async ({
+      page,
+    }) => {
+      /* click the button */
+      const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+      await dropdownButton.click();
 
-    /* get all checkboxes */
-    const dropdownListElementOneButton = page
-      .getByText(/Option 1/)
-      .filter({ has: page.getByRole('checkbox') });
-    const dropdownListElementTwoButton = page
-      .getByText(/Option 2/)
-      .filter({ has: page.getByRole('checkbox') });
-    const dropdownListElementThreeButton = page
-      .getByText(/Option 3/)
-      .filter({ has: page.getByRole('checkbox') });
-    const dropdownListElementFourButton = page
-      .getByText(/Option 4/)
-      .filter({ has: page.getByRole('checkbox') });
-    await expect(dropdownListElementOneButton).toHaveCount(1);
-    await expect(dropdownListElementTwoButton).toHaveCount(1);
-    await expect(dropdownListElementThreeButton).toHaveCount(1);
-    await expect(dropdownListElementFourButton).toHaveCount(1);
+      /* get all checkboxes */
+      const dropdownListElementOneButton = page
+        .getByText(/Option 1/)
+        .filter({ has: page.getByRole('checkbox') });
+      const dropdownListElementTwoButton = page
+        .getByText(/Option 2/)
+        .filter({ has: page.getByRole('checkbox') });
+      const dropdownListElementThreeButton = page
+        .getByText(/Option 3/)
+        .filter({ has: page.getByRole('checkbox') });
+      const dropdownListElementFourButton = page
+        .getByText(/Option 4/)
+        .filter({ has: page.getByRole('checkbox') });
+      await expect(dropdownListElementOneButton).toHaveCount(1);
+      await expect(dropdownListElementTwoButton).toHaveCount(1);
+      await expect(dropdownListElementThreeButton).toHaveCount(1);
+      await expect(dropdownListElementFourButton).toHaveCount(1);
 
-    /* check each one and see that it updates correctly */
-    await dropdownListElementOneButton.click();
-    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementThreeButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
-    const inputText = page.getByRole('button', { name: /Option 1/ });
-    await expect(inputText).toHaveCount(1);
+      /* check each one and see that it updates correctly */
+      await dropdownListElementOneButton.click();
+      await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
+      await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
+      await expect(dropdownListElementThreeButton).not.toHaveAttribute('aria-selected');
+      await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
+      const inputText = page.getByRole('button', { name: /Option 1/ });
+      await expect(inputText).toHaveCount(1);
 
-    await dropdownListElementTwoButton.click();
-    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementThreeButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
-    await expect(inputText).toHaveCount(1);
+      await dropdownListElementTwoButton.click();
+      await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
+      await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
+      await expect(dropdownListElementThreeButton).not.toHaveAttribute('aria-selected');
+      await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
+      await expect(inputText).toHaveCount(1);
 
-    await dropdownListElementThreeButton.click();
-    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementThreeButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
-    const inputText2 = page.getByRole('button', { name: /Option 1,Option 3/ });
-    await expect(inputText2).toHaveCount(1);
+      await dropdownListElementThreeButton.click();
+      await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
+      await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
+      await expect(dropdownListElementThreeButton).toHaveAttribute('aria-selected');
+      await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
+      const inputText2 = page.getByRole('button', { name: /Option 1,Option 3/ });
+      await expect(inputText2).toHaveCount(1);
 
-    await dropdownListElementFourButton.click();
-    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementThreeButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementFourButton).toHaveAttribute('aria-selected');
-    const inputText3 = page.getByRole('button', { name: /Option 1,Option 3,Option 4/ });
-    await expect(inputText3).toHaveCount(1);
+      await dropdownListElementFourButton.click();
+      await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
+      await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
+      await expect(dropdownListElementThreeButton).toHaveAttribute('aria-selected');
+      await expect(dropdownListElementFourButton).toHaveAttribute('aria-selected');
+      const inputText3 = page.getByRole('button', { name: /Option 1,Option 3,Option 4/ });
+      await expect(inputText3).toHaveCount(1);
 
-    /* also check screenshot diff to make sure */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* also check screenshot diff to make sure */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-clicking-the-dropdown-a2125--dropdown-list-then-click-on-all-the-options-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-clicking-the-dropdown-a2125--dropdown-list-then-click-on-all-the-options-1-linux.png
deleted file mode 100644
index 29cbf0409..000000000
Binary files a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-clicking-the-dropdown-a2125--dropdown-list-then-click-on-all-the-options-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-clicking-the-dropdown-de184-ist-then-click-Option-1-should-not-close-it-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-clicking-the-dropdown-de184-ist-then-click-Option-1-should-not-close-it-1-linux.png
deleted file mode 100644
index 14d437c8f..000000000
Binary files a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-clicking-the-dropdown-de184-ist-then-click-Option-1-should-not-close-it-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-darkmode-clic-ac9a4-ist-then-click-Option-1-should-not-close-it-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-darkmode-clic-ac9a4-ist-then-click-Option-1-should-not-close-it-1-linux.png
new file mode 100644
index 000000000..ed5d90058
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-darkmode-clic-ac9a4-ist-then-click-Option-1-should-not-close-it-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-darkmode-clic-ceddf--dropdown-list-then-click-on-all-the-options-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-darkmode-clic-ceddf--dropdown-list-then-click-on-all-the-options-1-linux.png
new file mode 100644
index 000000000..7ec93f89a
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-darkmode-clic-ceddf--dropdown-list-then-click-on-all-the-options-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-darkmode-renders-multiselect-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-darkmode-renders-multiselect-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..03cd5afe3
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-darkmode-renders-multiselect-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-lightmode-cli-5233d-ist-then-click-Option-1-should-not-close-it-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-lightmode-cli-5233d-ist-then-click-Option-1-should-not-close-it-1-linux.png
new file mode 100644
index 000000000..d1c9fc527
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-lightmode-cli-5233d-ist-then-click-Option-1-should-not-close-it-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-lightmode-cli-903f7--dropdown-list-then-click-on-all-the-options-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-lightmode-cli-903f7--dropdown-list-then-click-on-all-the-options-1-linux.png
new file mode 100644
index 000000000..8e60a8268
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-lightmode-cli-903f7--dropdown-list-then-click-on-all-the-options-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-lightmode-renders-multiselect-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-lightmode-renders-multiselect-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..2bb03eb87
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-primary-lightmode-renders-multiselect-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-renders-multiselect-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-renders-multiselect-dropdown-correctly-1-linux.png
deleted file mode 100644
index 58a5cc2e7..000000000
Binary files a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-renders-multiselect-dropdown-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-darkmode-cl-34a20--dropdown-list-then-click-on-all-the-options-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-darkmode-cl-34a20--dropdown-list-then-click-on-all-the-options-1-linux.png
new file mode 100644
index 000000000..f82e71de4
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-darkmode-cl-34a20--dropdown-list-then-click-on-all-the-options-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-darkmode-cl-37e02-ist-then-click-Option-1-should-not-close-it-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-darkmode-cl-37e02-ist-then-click-Option-1-should-not-close-it-1-linux.png
new file mode 100644
index 000000000..064765b30
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-darkmode-cl-37e02-ist-then-click-Option-1-should-not-close-it-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-darkmode-renders-multiselect-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-darkmode-renders-multiselect-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..3ae6ff78f
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-darkmode-renders-multiselect-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-lightmode-c-56b1d--dropdown-list-then-click-on-all-the-options-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-lightmode-c-56b1d--dropdown-list-then-click-on-all-the-options-1-linux.png
new file mode 100644
index 000000000..53f16e624
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-lightmode-c-56b1d--dropdown-list-then-click-on-all-the-options-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-lightmode-c-d58f6-ist-then-click-Option-1-should-not-close-it-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-lightmode-c-d58f6-ist-then-click-Option-1-should-not-close-it-1-linux.png
new file mode 100644
index 000000000..1fc302092
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-lightmode-c-d58f6-ist-then-click-Option-1-should-not-close-it-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-lightmode-renders-multiselect-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-lightmode-renders-multiselect-dropdown-correctly-1-linux.png
new file mode 100644
index 000000000..02e99be8f
Binary files /dev/null and b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts-snapshots/tds-dropdown-multiselect-secondary-lightmode-renders-multiselect-dropdown-correctly-1-linux.png differ
diff --git a/packages/core/src/components/footer/test/default/footer.e2e.ts b/packages/core/src/components/footer/test/default/footer.e2e.ts
index ecb5bdefb..f54a2eceb 100644
--- a/packages/core/src/components/footer/test/default/footer.e2e.ts
+++ b/packages/core/src/components/footer/test/default/footer.e2e.ts
@@ -1,39 +1,53 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/footer/test/default/index.html';
+const componentName = 'tds-footer';
+const testDescription = 'tds-footer-default';
 
-test.describe.parallel('tds-footer-default', () => {
-  test('renders default footer correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const footerComponent = page.locator('footer');
-    await expect(footerComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default footer correctly', async ({ page }) => {
+      const footerComponent = page.locator('footer');
+      await expect(footerComponent).toHaveCount(1);
 
-    /** Check screenshot diff */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /** Check screenshot diff */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('Footer contains four links "Link text"', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('Footer contains four links "Link text"', async ({ page }) => {
     const footerLinks = page.getByRole('link').filter({ hasText: /Link text/ });
     await expect(footerLinks).toHaveCount(4);
   });
 
   test('Footer contains three truck icons', async ({ page }) => {
-    await page.goto(componentTestPath);
     const footerTruckIcons = page.getByRole('link').filter({ has: page.getByRole('img') });
     await expect(footerTruckIcons).toHaveCount(3);
   });
 
   test('Footer contains copyright text', async ({ page }) => {
-    await page.goto(componentTestPath);
     const footerCopyrightText = page.getByText(`Copyright © ${new Date().getFullYear()} Scania`);
     await expect(footerCopyrightText).toHaveCount(1);
     await expect(footerCopyrightText).toBeVisible();
   });
 
   test('Footer contains brand label (Scania)', async ({ page }) => {
-    await page.goto(componentTestPath);
     const footerBrandText = page.getByText('Scania', { exact: true });
     await expect(footerBrandText).toHaveCount(1);
     await expect(footerBrandText).toBeHidden();
diff --git a/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-primary-darkmode-renders-default-footer-correctly-1-linux.png b/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-primary-darkmode-renders-default-footer-correctly-1-linux.png
new file mode 100644
index 000000000..b557f3d14
Binary files /dev/null and b/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-primary-darkmode-renders-default-footer-correctly-1-linux.png differ
diff --git a/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-primary-lightmode-renders-default-footer-correctly-1-linux.png b/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-primary-lightmode-renders-default-footer-correctly-1-linux.png
new file mode 100644
index 000000000..ebee81e16
Binary files /dev/null and b/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-primary-lightmode-renders-default-footer-correctly-1-linux.png differ
diff --git a/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-renders-default-footer-correctly-1-linux.png b/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-renders-default-footer-correctly-1-linux.png
deleted file mode 100644
index 4452fed41..000000000
Binary files a/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-renders-default-footer-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-secondary-darkmode-renders-default-footer-correctly-1-linux.png b/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-secondary-darkmode-renders-default-footer-correctly-1-linux.png
new file mode 100644
index 000000000..9f28f71cf
Binary files /dev/null and b/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-secondary-darkmode-renders-default-footer-correctly-1-linux.png differ
diff --git a/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-secondary-lightmode-renders-default-footer-correctly-1-linux.png b/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-secondary-lightmode-renders-default-footer-correctly-1-linux.png
new file mode 100644
index 000000000..4e05bb1e7
Binary files /dev/null and b/packages/core/src/components/footer/test/default/footer.e2e.ts-snapshots/tds-footer-default-secondary-lightmode-renders-default-footer-correctly-1-linux.png differ
diff --git a/packages/core/src/components/header/test/default/header.e2e.ts b/packages/core/src/components/header/test/default/header.e2e.ts
index d9cb86e63..603cfb3e0 100644
--- a/packages/core/src/components/header/test/default/header.e2e.ts
+++ b/packages/core/src/components/header/test/default/header.e2e.ts
@@ -1,53 +1,67 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/header/test/default/index.html';
+const componentName = 'tds-header';
+const testDescription = 'tds-header-default';
 
-test.describe.parallel('tds-header-default', () => {
-  test('renders default header correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const headerComponent = page.getByRole('navigation');
-    await expect(headerComponent).toHaveCount(1);
-    await expect(headerComponent).toBeVisible();
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default header correctly', async ({ page }) => {
+      const headerComponent = page.getByRole('navigation');
+      await expect(headerComponent).toHaveCount(1);
+      await expect(headerComponent).toBeVisible();
+
+      /** Check screenshot diff */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('launcher should open on click', async ({ page }) => {
+      const headerComponentLuncherButton = page.getByRole('button');
+      await headerComponentLuncherButton.click();
+
+      const headerLuncherList = page
+        .getByRole('listitem')
+        .filter({ has: page.getByRole('heading') })
+        .getByRole('list');
+      await expect(headerLuncherList).toHaveCount(1);
+      await expect(headerLuncherList).toBeVisible();
 
-    /** Check screenshot diff */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /** Check screenshot diff */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('title exists and is "Example: default"', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('title exists and is "Example: default"', async ({ page }) => {
     const headerComponentHeaderText = page.getByText('Example: default');
     await expect(headerComponentHeaderText).toHaveCount(1);
     await expect(headerComponentHeaderText).toBeVisible();
   });
 
   test('luncher button icon exists', async ({ page }) => {
-    await page.goto(componentTestPath);
     const headerComponentLuncherButton = page.getByRole('button');
     await expect(headerComponentLuncherButton).toHaveCount(1);
     await expect(headerComponentLuncherButton).toBeVisible();
   });
 
   test('brand label with link exists', async ({ page }) => {
-    await page.goto(componentTestPath);
     const headerComponentBrandLink = page.getByLabel('Scania - red gryphon on blue shield');
     await expect(headerComponentBrandLink).toHaveCount(1);
     await expect(headerComponentBrandLink).toBeVisible();
   });
-
-  test('launcher should open on click', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const headerComponentLuncherButton = page.getByRole('button');
-    await headerComponentLuncherButton.click();
-
-    const headerLuncherList = page
-      .getByRole('listitem')
-      .filter({ has: page.getByRole('heading') })
-      .getByRole('list');
-    await expect(headerLuncherList).toHaveCount(1);
-    await expect(headerLuncherList).toBeVisible();
-
-    /** Check screenshot diff */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
 });
diff --git a/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-darkmode-launcher-should-open-on-click-1-linux.png b/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-darkmode-launcher-should-open-on-click-1-linux.png
new file mode 100644
index 000000000..97c09459b
Binary files /dev/null and b/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-darkmode-launcher-should-open-on-click-1-linux.png differ
diff --git a/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-darkmode-renders-default-header-correctly-1-linux.png b/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-darkmode-renders-default-header-correctly-1-linux.png
new file mode 100644
index 000000000..bee81a7af
Binary files /dev/null and b/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-darkmode-renders-default-header-correctly-1-linux.png differ
diff --git a/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-launcher-should-open-on-click-1-linux.png b/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-launcher-should-open-on-click-1-linux.png
deleted file mode 100644
index 566688865..000000000
Binary files a/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-launcher-should-open-on-click-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-lightmode-launcher-should-open-on-click-1-linux.png b/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-lightmode-launcher-should-open-on-click-1-linux.png
new file mode 100644
index 000000000..4f3183a2f
Binary files /dev/null and b/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-lightmode-launcher-should-open-on-click-1-linux.png differ
diff --git a/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-renders-default-header-correctly-1-linux.png b/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-lightmode-renders-default-header-correctly-1-linux.png
similarity index 57%
rename from packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-renders-default-header-correctly-1-linux.png
rename to packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-lightmode-renders-default-header-correctly-1-linux.png
index a5863d7b1..7e036ee88 100644
Binary files a/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-renders-default-header-correctly-1-linux.png and b/packages/core/src/components/header/test/default/header.e2e.ts-snapshots/tds-header-default-lightmode-renders-default-header-correctly-1-linux.png differ
diff --git a/packages/core/src/components/link/test/default/link.e2e.ts b/packages/core/src/components/link/test/default/link.e2e.ts
index 5d18e6b49..f4cd2d737 100644
--- a/packages/core/src/components/link/test/default/link.e2e.ts
+++ b/packages/core/src/components/link/test/default/link.e2e.ts
@@ -1,18 +1,37 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/link/test/default/index.html';
+const componentName = 'tds-link';
+const testDescription = 'tds-link-default';
 
-test.describe.parallel('tds-link-default', () => {
-  test('is default link rendered correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    const tdsLink = page.getByTestId('tds-link-testid');
+    test('is default link rendered correctly', async ({ page }) => {
+      await page.goto(componentTestPath);
 
-    await expect(tdsLink).toHaveCount(1);
+      const tdsLink = page.getByTestId('tds-link-testid');
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      await expect(tdsLink).toHaveCount(1);
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('text shows on page', async ({ page }) => {
diff --git a/packages/core/src/components/link/test/default/link.e2e.ts-snapshots/tds-link-default-is-default-link-rendered-correctly-1-linux.png b/packages/core/src/components/link/test/default/link.e2e.ts-snapshots/tds-link-default-darkmode-is-default-link-rendered-correctly-1-linux.png
similarity index 100%
rename from packages/core/src/components/link/test/default/link.e2e.ts-snapshots/tds-link-default-is-default-link-rendered-correctly-1-linux.png
rename to packages/core/src/components/link/test/default/link.e2e.ts-snapshots/tds-link-default-darkmode-is-default-link-rendered-correctly-1-linux.png
diff --git a/packages/core/src/components/link/test/default/link.e2e.ts-snapshots/tds-link-default-lightmode-is-default-link-rendered-correctly-1-linux.png b/packages/core/src/components/link/test/default/link.e2e.ts-snapshots/tds-link-default-lightmode-is-default-link-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..9ffaa230d
Binary files /dev/null and b/packages/core/src/components/link/test/default/link.e2e.ts-snapshots/tds-link-default-lightmode-is-default-link-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/link/test/disabled/link.e2e.ts b/packages/core/src/components/link/test/disabled/link.e2e.ts
index e49ab7504..1383c3a55 100644
--- a/packages/core/src/components/link/test/disabled/link.e2e.ts
+++ b/packages/core/src/components/link/test/disabled/link.e2e.ts
@@ -1,15 +1,34 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/link/test/disabled/index.html';
+const componentName = 'tds-link';
+const testDescription = 'tds-link-disabled';
 
-test.describe.parallel('tds-link-disabled', () => {
-  test('disabled link is rendered correctly', async ({ page }) => {
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('disabled link is rendered correctly', async ({ page }) => {
+      await page.goto(componentTestPath);
+      const tdsLink = page.getByTestId('tds-link-testid');
+      await expect(tdsLink).toHaveCount(1);
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-    const tdsLink = page.getByTestId('tds-link-testid');
-    await expect(tdsLink).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 
   test('text shows on page', async ({ page }) => {
diff --git a/packages/core/src/components/link/test/disabled/link.e2e.ts-snapshots/tds-link-disabled-disabled-link-is-rendered-correctly-1-linux.png b/packages/core/src/components/link/test/disabled/link.e2e.ts-snapshots/tds-link-disabled-darkmode-disabled-link-is-rendered-correctly-1-linux.png
similarity index 100%
rename from packages/core/src/components/link/test/disabled/link.e2e.ts-snapshots/tds-link-disabled-disabled-link-is-rendered-correctly-1-linux.png
rename to packages/core/src/components/link/test/disabled/link.e2e.ts-snapshots/tds-link-disabled-darkmode-disabled-link-is-rendered-correctly-1-linux.png
diff --git a/packages/core/src/components/link/test/disabled/link.e2e.ts-snapshots/tds-link-disabled-lightmode-disabled-link-is-rendered-correctly-1-linux.png b/packages/core/src/components/link/test/disabled/link.e2e.ts-snapshots/tds-link-disabled-lightmode-disabled-link-is-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..14b6f33a9
Binary files /dev/null and b/packages/core/src/components/link/test/disabled/link.e2e.ts-snapshots/tds-link-disabled-lightmode-disabled-link-is-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/basic/message.e2e.ts b/packages/core/src/components/message/test/basic/message.e2e.ts
index fc6227053..985ca076b 100644
--- a/packages/core/src/components/message/test/basic/message.e2e.ts
+++ b/packages/core/src/components/message/test/basic/message.e2e.ts
@@ -1,18 +1,34 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/message/test/basic/index.html';
+const componentName = 'tds-message';
+const testDescription = 'tds-message-basic';
 
-test.describe.parallel('tds-message-basic', () => {
-  test('is basic message rendered correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('is basic message rendered correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('has icon', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('has icon', async ({ page }) => {
     const messageIcon = page.getByRole('img');
     await expect(messageIcon).toHaveCount(1);
     await expect(messageIcon).toBeVisible();
diff --git a/packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-primary-darkmode-is-basic-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-primary-darkmode-is-basic-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..e62e22a26
Binary files /dev/null and b/packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-primary-darkmode-is-basic-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-primary-lightmode-is-basic-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-primary-lightmode-is-basic-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..74efee726
Binary files /dev/null and b/packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-primary-lightmode-is-basic-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-secondary-darkmode-is-basic-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-secondary-darkmode-is-basic-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..cf5230d1e
Binary files /dev/null and b/packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-secondary-darkmode-is-basic-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-secondary-lightmode-is-basic-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-secondary-lightmode-is-basic-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..b8b83d4f2
Binary files /dev/null and b/packages/core/src/components/message/test/basic/message.e2e.ts-snapshots/tds-message-basic-secondary-lightmode-is-basic-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/error/message.e2e.ts b/packages/core/src/components/message/test/error/message.e2e.ts
index f9c26baa8..d379c2b5e 100644
--- a/packages/core/src/components/message/test/error/message.e2e.ts
+++ b/packages/core/src/components/message/test/error/message.e2e.ts
@@ -1,32 +1,46 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/message/test/error/index.html';
+const componentName = 'tds-message';
+const testDescription = 'tds-message-error';
 
-test.describe.parallel('tds-message-error', () => {
-  test('is error message rendered correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('is error message rendered correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('has header text', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('has header text', async ({ page }) => {
     const messageComponentHeader = page.getByText('Message header', { exact: true });
     await expect(messageComponentHeader).toHaveCount(1);
     await expect(messageComponentHeader).toBeVisible();
   });
 
   test('has subheader text', async ({ page }) => {
-    await page.goto(componentTestPath);
     const messageComponentSubHeader = page.getByText('Longer Message text can be placed here.');
     await expect(messageComponentSubHeader).toHaveCount(1);
     await expect(messageComponentSubHeader).toBeVisible();
   });
 
   test('has error icon', async ({ page }) => {
-    await page.goto(componentTestPath);
     const messageIcon = page.getByRole('img');
     await expect(messageIcon).toHaveCount(1);
     await expect(messageIcon).toBeVisible();
diff --git a/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-is-error-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-is-error-message-rendered-correctly-1-linux.png
deleted file mode 100644
index f11fe7f54..000000000
Binary files a/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-is-error-message-rendered-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-primary-darkmode-is-error-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-primary-darkmode-is-error-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..1f589c9f3
Binary files /dev/null and b/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-primary-darkmode-is-error-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-primary-lightmode-is-error-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-primary-lightmode-is-error-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..be50c5c6b
Binary files /dev/null and b/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-primary-lightmode-is-error-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-secondary-darkmode-is-error-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-secondary-darkmode-is-error-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..8f7a6aea2
Binary files /dev/null and b/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-secondary-darkmode-is-error-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-secondary-lightmode-is-error-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-secondary-lightmode-is-error-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..e0074cc20
Binary files /dev/null and b/packages/core/src/components/message/test/error/message.e2e.ts-snapshots/tds-message-error-secondary-lightmode-is-error-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/information/message.e2e.ts b/packages/core/src/components/message/test/information/message.e2e.ts
index 9dd2326d7..1a6266657 100644
--- a/packages/core/src/components/message/test/information/message.e2e.ts
+++ b/packages/core/src/components/message/test/information/message.e2e.ts
@@ -1,13 +1,24 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/message/test/information/index.html';
+const componentName = 'tds-message';
+const testDescription = 'tds-message-information';
 
-test.describe('tds-message-information', () => {
-  test('is information message rendered correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Take screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('is information message rendered correctly', async ({ page }) => {
+      /* Take screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-is-information-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-is-information-message-rendered-correctly-1-linux.png
deleted file mode 100644
index bb0e82bad..000000000
Binary files a/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-is-information-message-rendered-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-primary-darkmode-is-information-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-primary-darkmode-is-information-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..fb3d79298
Binary files /dev/null and b/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-primary-darkmode-is-information-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-primary-lightmode-is-information-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-primary-lightmode-is-information-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..f2316b21b
Binary files /dev/null and b/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-primary-lightmode-is-information-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-secondary-darkmode-is-information-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-secondary-darkmode-is-information-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..28de60c88
Binary files /dev/null and b/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-secondary-darkmode-is-information-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-secondary-lightmode-is-information-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-secondary-lightmode-is-information-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..2047708f8
Binary files /dev/null and b/packages/core/src/components/message/test/information/message.e2e.ts-snapshots/tds-message-information-secondary-lightmode-is-information-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/success/message.e2e.ts b/packages/core/src/components/message/test/success/message.e2e.ts
index 6ff774248..8694b1630 100644
--- a/packages/core/src/components/message/test/success/message.e2e.ts
+++ b/packages/core/src/components/message/test/success/message.e2e.ts
@@ -1,13 +1,24 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/message/test/success/index.html';
+const componentName = 'tds-message';
+const testDescription = 'tds-message-success';
 
-test.describe('tds-message-success', () => {
-  test('is success message rendered correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Take screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('is success message rendered correctly', async ({ page }) => {
+      /* Take screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-is-success-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-is-success-message-rendered-correctly-1-linux.png
deleted file mode 100644
index 7e5132629..000000000
Binary files a/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-is-success-message-rendered-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-primary-darkmode-is-success-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-primary-darkmode-is-success-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..10c0d6ef6
Binary files /dev/null and b/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-primary-darkmode-is-success-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-primary-lightmode-is-success-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-primary-lightmode-is-success-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..6408fb9e1
Binary files /dev/null and b/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-primary-lightmode-is-success-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-secondary-darkmode-is-success-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-secondary-darkmode-is-success-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..a164c5638
Binary files /dev/null and b/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-secondary-darkmode-is-success-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-secondary-lightmode-is-success-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-secondary-lightmode-is-success-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..f37ef66f2
Binary files /dev/null and b/packages/core/src/components/message/test/success/message.e2e.ts-snapshots/tds-message-success-secondary-lightmode-is-success-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/warning/message.e2e.ts b/packages/core/src/components/message/test/warning/message.e2e.ts
index 1df862a76..314d1dbeb 100644
--- a/packages/core/src/components/message/test/warning/message.e2e.ts
+++ b/packages/core/src/components/message/test/warning/message.e2e.ts
@@ -1,13 +1,24 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/message/test/warning/index.html';
+const componentName = 'tds-message';
+const testDescription = 'tds-message-warning';
 
-test.describe('tds-message-warning', () => {
-  test('is warning message rendered correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Take screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('is warning message rendered correctly', async ({ page }) => {
+      /* Take screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-is-warning-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-is-warning-message-rendered-correctly-1-linux.png
deleted file mode 100644
index de3038921..000000000
Binary files a/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-is-warning-message-rendered-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-primary-darkmode-is-warning-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-primary-darkmode-is-warning-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..8b5b825dd
Binary files /dev/null and b/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-primary-darkmode-is-warning-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-primary-lightmode-is-warning-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-primary-lightmode-is-warning-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..beede9b50
Binary files /dev/null and b/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-primary-lightmode-is-warning-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-secondary-darkmode-is-warning-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-secondary-darkmode-is-warning-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..f2cb4c187
Binary files /dev/null and b/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-secondary-darkmode-is-warning-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-secondary-lightmode-is-warning-message-rendered-correctly-1-linux.png b/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-secondary-lightmode-is-warning-message-rendered-correctly-1-linux.png
new file mode 100644
index 000000000..33cb01925
Binary files /dev/null and b/packages/core/src/components/message/test/warning/message.e2e.ts-snapshots/tds-message-warning-secondary-lightmode-is-warning-message-rendered-correctly-1-linux.png differ
diff --git a/packages/core/src/components/modal/test/closable-false/modal.e2e.ts b/packages/core/src/components/modal/test/closable-false/modal.e2e.ts
index 23eeb26bd..f59843b32 100644
--- a/packages/core/src/components/modal/test/closable-false/modal.e2e.ts
+++ b/packages/core/src/components/modal/test/closable-false/modal.e2e.ts
@@ -1,17 +1,32 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
-test('x button is hidden', async ({ page }) => {
-  await page.goto('src/components/modal/test/closable-false/index.html');
+import {
+  testConfigurations,
+  setupPage,
+  getTestDescribeText,
+} from '../../../../utils/testConfiguration';
 
-  const modalComponent = page.getByTestId('tds-modal-testid-1');
-  expect(modalComponent).toHaveCount(1);
-  // wait for it to show
-  await modalComponent.waitFor({ state: 'visible' });
+const componentTestPath = 'src/components/modal/test/closable-false/index.html';
+const componentName = 'tds-modal';
 
-  // Get the close button within the modal
-  const tdsModalCloseButton = modalComponent.locator('.tds-modal-close');
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  await expect(tdsModalCloseButton).toBeHidden();
-  await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('x button is hidden', async ({ page }) => {
+      const modalComponent = page.getByTestId('tds-modal-testid-1');
+      expect(modalComponent).toHaveCount(1);
+      // wait for it to show
+      await modalComponent.waitFor({ state: 'visible' });
+
+      // Get the close button within the modal
+      const tdsModalCloseButton = modalComponent.locator('.tds-modal-close');
+
+      await expect(tdsModalCloseButton).toBeHidden();
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
 });
diff --git a/packages/core/src/components/modal/test/closable-false/modal.e2e.ts-snapshots/tds-modal-darkmode-x-button-is-hidden-1-linux.png b/packages/core/src/components/modal/test/closable-false/modal.e2e.ts-snapshots/tds-modal-darkmode-x-button-is-hidden-1-linux.png
new file mode 100644
index 000000000..537006a42
Binary files /dev/null and b/packages/core/src/components/modal/test/closable-false/modal.e2e.ts-snapshots/tds-modal-darkmode-x-button-is-hidden-1-linux.png differ
diff --git a/packages/core/src/components/modal/test/closable-false/modal.e2e.ts-snapshots/x-button-is-hidden-1-linux.png b/packages/core/src/components/modal/test/closable-false/modal.e2e.ts-snapshots/tds-modal-lightmode-x-button-is-hidden-1-linux.png
similarity index 100%
rename from packages/core/src/components/modal/test/closable-false/modal.e2e.ts-snapshots/x-button-is-hidden-1-linux.png
rename to packages/core/src/components/modal/test/closable-false/modal.e2e.ts-snapshots/tds-modal-lightmode-x-button-is-hidden-1-linux.png
diff --git a/packages/core/src/components/modal/test/closable/modal.e2e.ts b/packages/core/src/components/modal/test/closable/modal.e2e.ts
index 5219e19f6..60af6edc5 100644
--- a/packages/core/src/components/modal/test/closable/modal.e2e.ts
+++ b/packages/core/src/components/modal/test/closable/modal.e2e.ts
@@ -1,29 +1,40 @@
 import { E2EPage, test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
-test.describe.parallel('tds-modal-closable', () => {
-  const isClosable = async (page: E2EPage, id: string) => {
-    // get modal by id
-    const modalComponent = page.getByTestId(id);
-    expect(modalComponent).toHaveCount(1);
-    // wait for it to show
-    await modalComponent.waitFor({ state: 'visible' });
-    // get close button within that modal
-    const tdsModalCloseButton = modalComponent.locator('.tds-modal-close');
-    // expect close button is visible, unless false
-    await expect(tdsModalCloseButton).toHaveCount(1);
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  };
+const componentTestPath = 'src/components/modal/test/closable/index.html';
+const componentName = 'tds-modal';
+const testDescription = 'tds-modal-closable';
 
-  test.beforeEach(async ({ page }) => {
-    await page.goto('src/components/modal/test/closable/index.html');
-  });
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('x button is visible', async ({ page }) => {
-    await isClosable(page, 'tds-modal-testid-0');
-  });
+    const isClosable = async (page: E2EPage, id: string) => {
+      // get modal by id
+      const modalComponent = page.getByTestId(id);
+      expect(modalComponent).toHaveCount(1);
+      // wait for it to show
+      await modalComponent.waitFor({ state: 'visible' });
+      // get close button within that modal
+      const tdsModalCloseButton = modalComponent.locator('.tds-modal-close');
+      // expect close button is visible, unless false
+      await expect(tdsModalCloseButton).toHaveCount(1);
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    };
+
+    test('x button is visible', async ({ page }) => {
+      await isClosable(page, 'tds-modal-testid-0');
+    });
 
-  test('x button defaults to true', async ({ page }) => {
-    await isClosable(page, 'tds-modal-testid-1');
+    test('x button defaults to true', async ({ page }) => {
+      await isClosable(page, 'tds-modal-testid-1');
+    });
   });
 });
diff --git a/packages/core/src/components/modal/test/closable/modal.e2e.ts-snapshots/tds-modal-closable-darkmode-x-button-defaults-to-true-1-linux.png b/packages/core/src/components/modal/test/closable/modal.e2e.ts-snapshots/tds-modal-closable-darkmode-x-button-defaults-to-true-1-linux.png
new file mode 100644
index 000000000..6c902e3ef
Binary files /dev/null and b/packages/core/src/components/modal/test/closable/modal.e2e.ts-snapshots/tds-modal-closable-darkmode-x-button-defaults-to-true-1-linux.png differ
diff --git a/packages/core/src/components/modal/test/closable/modal.e2e.ts-snapshots/tds-modal-closable-darkmode-x-button-is-visible-1-linux.png b/packages/core/src/components/modal/test/closable/modal.e2e.ts-snapshots/tds-modal-closable-darkmode-x-button-is-visible-1-linux.png
new file mode 100644
index 000000000..6c902e3ef
Binary files /dev/null and b/packages/core/src/components/modal/test/closable/modal.e2e.ts-snapshots/tds-modal-closable-darkmode-x-button-is-visible-1-linux.png differ
diff --git a/packages/core/src/components/modal/test/closable/modal.e2e.ts-snapshots/tds-modal-closable-x-button-defaults-to-true-1-linux.png b/packages/core/src/components/modal/test/closable/modal.e2e.ts-snapshots/tds-modal-closable-lightmode-x-button-defaults-to-true-1-linux.png
similarity index 100%
rename from packages/core/src/components/modal/test/closable/modal.e2e.ts-snapshots/tds-modal-closable-x-button-defaults-to-true-1-linux.png
rename to packages/core/src/components/modal/test/closable/modal.e2e.ts-snapshots/tds-modal-closable-lightmode-x-button-defaults-to-true-1-linux.png
diff --git a/packages/core/src/components/modal/test/closable/modal.e2e.ts-snapshots/tds-modal-closable-x-button-is-visible-1-linux.png b/packages/core/src/components/modal/test/closable/modal.e2e.ts-snapshots/tds-modal-closable-lightmode-x-button-is-visible-1-linux.png
similarity index 100%
rename from packages/core/src/components/modal/test/closable/modal.e2e.ts-snapshots/tds-modal-closable-x-button-is-visible-1-linux.png
rename to packages/core/src/components/modal/test/closable/modal.e2e.ts-snapshots/tds-modal-closable-lightmode-x-button-is-visible-1-linux.png
diff --git a/packages/core/src/components/modal/test/default/modal.e2e.ts b/packages/core/src/components/modal/test/default/modal.e2e.ts
index a746f5674..2fe547bd5 100644
--- a/packages/core/src/components/modal/test/default/modal.e2e.ts
+++ b/packages/core/src/components/modal/test/default/modal.e2e.ts
@@ -1,18 +1,35 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/modal/test/default/index.html';
+const componentName = 'tds-modal';
+const testDescription = 'tds-modal-default';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders modal correctly', async ({ page }) => {
+      const tdsModal = page.getByTestId('tds-modal-testid');
+      await expect(tdsModal).toHaveCount(1);
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
 test.describe.parallel('tds-modal-default', () => {
-  test('renders modal correctly', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-    const tdsModal = page.getByTestId('tds-modal-testid');
-    await expect(tdsModal).toHaveCount(1);
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 
   test('modal contains three buttons', async ({ page }) => {
-    await page.goto(componentTestPath);
     // Locate the buttons within the modal
     const modalButtons = page.getByRole('button');
 
@@ -21,8 +38,6 @@ test.describe.parallel('tds-modal-default', () => {
   });
 
   test('modal contains a header and a body', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     const modalHeader = page.getByText('This is a header', { exact: true });
     const modalBody = page.getByText('Where you can put anything you want!', {
       exact: true,
diff --git a/packages/core/src/components/modal/test/default/modal.e2e.ts-snapshots/tds-modal-default-darkmode-renders-modal-correctly-1-linux.png b/packages/core/src/components/modal/test/default/modal.e2e.ts-snapshots/tds-modal-default-darkmode-renders-modal-correctly-1-linux.png
new file mode 100644
index 000000000..438b78ba3
Binary files /dev/null and b/packages/core/src/components/modal/test/default/modal.e2e.ts-snapshots/tds-modal-default-darkmode-renders-modal-correctly-1-linux.png differ
diff --git a/packages/core/src/components/modal/test/default/modal.e2e.ts-snapshots/tds-modal-default-renders-modal-correctly-1-linux.png b/packages/core/src/components/modal/test/default/modal.e2e.ts-snapshots/tds-modal-default-lightmode-renders-modal-correctly-1-linux.png
similarity index 100%
rename from packages/core/src/components/modal/test/default/modal.e2e.ts-snapshots/tds-modal-default-renders-modal-correctly-1-linux.png
rename to packages/core/src/components/modal/test/default/modal.e2e.ts-snapshots/tds-modal-default-lightmode-renders-modal-correctly-1-linux.png
diff --git a/packages/core/src/components/modal/test/open-close/modal.e2e.ts b/packages/core/src/components/modal/test/open-close/modal.e2e.ts
index 75cb69869..469d1502f 100644
--- a/packages/core/src/components/modal/test/open-close/modal.e2e.ts
+++ b/packages/core/src/components/modal/test/open-close/modal.e2e.ts
@@ -1,19 +1,62 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/modal/test/open-close/index.html';
+const componentName = 'tds-modal';
+const testDescription = 'tds-modal-open';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('Modal is closed by default', async ({ page }) => {
+      const tdsModal = page.locator('tds-modal');
+      await expect(tdsModal).toBeHidden(); // Modal is initially closed
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('Clicking [Open Modal] button opens the modal', async ({ page }) => {
+      const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
+      const tdsModal = page.locator('tds-modal');
+
+      await openModalButton.dispatchEvent('click');
+
+      // Assert that the modal is visible
+      await expect(tdsModal).toBeVisible();
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('Clicking [Delete] button closes the modal', async ({ page }) => {
+      const deleteButton = page.getByRole('button').filter({ hasText: /Delete/ });
+      const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
+      const tdsModal = page.locator('tds-modal');
+
+      await openModalButton.dispatchEvent('click');
+
+      await expect(tdsModal).toBeVisible();
+      await expect(deleteButton).toBeVisible();
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+
+      await deleteButton.dispatchEvent('click'); // Click [Delete] button
+
+      await expect(deleteButton).toBeHidden(); // button is removed
+      await expect(tdsModal).toBeHidden();
+    });
+  });
+});
 
 test.describe.parallel('tds-modal-open', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
   });
 
-  test('Modal is closed by default', async ({ page }) => {
-    const tdsModal = page.locator('tds-modal');
-    await expect(tdsModal).toBeHidden(); // Modal is initially closed
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
   test('[Open Modal] button exists', async ({ page }) => {
     const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
     await expect(openModalButton).toBeVisible(); // [Open Modal] button exists and is visible
@@ -30,34 +73,6 @@ test.describe.parallel('tds-modal-open', () => {
     await expect(modal).toBeVisible(); // Modal should be open when using selector
   });
 
-  test('Clicking [Open Modal] button opens the modal', async ({ page }) => {
-    const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
-    const tdsModal = page.locator('tds-modal');
-
-    await openModalButton.dispatchEvent('click');
-
-    // Assert that the modal is visible
-    await expect(tdsModal).toBeVisible();
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('Clicking [Delete] button closes the modal', async ({ page }) => {
-    const deleteButton = page.getByRole('button').filter({ hasText: /Delete/ });
-    const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
-    const tdsModal = page.locator('tds-modal');
-
-    await openModalButton.dispatchEvent('click');
-
-    await expect(tdsModal).toBeVisible();
-    await expect(deleteButton).toBeVisible();
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-
-    await deleteButton.dispatchEvent('click'); // Click [Delete] button
-
-    await expect(deleteButton).toBeHidden(); // button is removed
-    await expect(tdsModal).toBeHidden();
-  });
-
   test('Clicking [Close] button closes the modal', async ({ page }) => {
     const closeButton = page.locator('button[aria-label="close"]');
     const tdsModal = page.locator('tds-modal');
diff --git a/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-Clicking-Delete-button-closes-the-modal-1-linux.png b/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-Clicking-Delete-button-closes-the-modal-1-linux.png
deleted file mode 100644
index 34eeda3de..000000000
Binary files a/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-Clicking-Delete-button-closes-the-modal-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-Clicking-Open-Modal-button-opens-the-modal-1-linux.png b/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-Clicking-Open-Modal-button-opens-the-modal-1-linux.png
deleted file mode 100644
index 34eeda3de..000000000
Binary files a/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-Clicking-Open-Modal-button-opens-the-modal-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-darkmode-Clicking-Delete-button-closes-the-modal-1-linux.png b/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-darkmode-Clicking-Delete-button-closes-the-modal-1-linux.png
new file mode 100644
index 000000000..a6a73de26
Binary files /dev/null and b/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-darkmode-Clicking-Delete-button-closes-the-modal-1-linux.png differ
diff --git a/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-darkmode-Clicking-Open-Modal-button-opens-the-modal-1-linux.png b/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-darkmode-Clicking-Open-Modal-button-opens-the-modal-1-linux.png
new file mode 100644
index 000000000..a6a73de26
Binary files /dev/null and b/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-darkmode-Clicking-Open-Modal-button-opens-the-modal-1-linux.png differ
diff --git a/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-darkmode-Modal-is-closed-by-default-1-linux.png b/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-darkmode-Modal-is-closed-by-default-1-linux.png
new file mode 100644
index 000000000..ba46bce3b
Binary files /dev/null and b/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-darkmode-Modal-is-closed-by-default-1-linux.png differ
diff --git a/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-lightmode-Clicking-Delete-button-closes-the-modal-1-linux.png b/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-lightmode-Clicking-Delete-button-closes-the-modal-1-linux.png
new file mode 100644
index 000000000..b67b19d89
Binary files /dev/null and b/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-lightmode-Clicking-Delete-button-closes-the-modal-1-linux.png differ
diff --git a/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-lightmode-Clicking-Open-Modal-button-opens-the-modal-1-linux.png b/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-lightmode-Clicking-Open-Modal-button-opens-the-modal-1-linux.png
new file mode 100644
index 000000000..b67b19d89
Binary files /dev/null and b/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-lightmode-Clicking-Open-Modal-button-opens-the-modal-1-linux.png differ
diff --git a/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-lightmode-Modal-is-closed-by-default-1-linux.png b/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-lightmode-Modal-is-closed-by-default-1-linux.png
new file mode 100644
index 000000000..f9d958490
Binary files /dev/null and b/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-lightmode-Modal-is-closed-by-default-1-linux.png differ
diff --git a/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts b/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts
index b4ddab380..9c48f1c2b 100644
--- a/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts
+++ b/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts
@@ -1,22 +1,39 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/popover-canvas/test/default/index.html';
+const componentName = 'tds-popover-canvas';
+const testDescription = 'tds-popover-canvas-default';
 
-test.describe.parallel('tds-popover-canvas-default', () => {
-  test('renders default popover-canvas correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const triggerButton = page.getByRole('button');
-    await triggerButton.click();
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default popover-canvas correctly', async ({ page }) => {
+      const triggerButton = page.getByRole('button');
+      await triggerButton.click();
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('make sure popover canvas shows after trigger button is pressed and content is displayed', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button');
     const popoverCanvasHeader = page.getByRole('heading');
     const popoverCanvasBody = page.getByText('Where you can put anything you want!', {
@@ -37,7 +54,6 @@ test.describe.parallel('tds-popover-canvas-default', () => {
   });
 
   test('activating close method should close the dialog', async ({ page }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button');
     await triggerButton.click();
 
diff --git a/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-default-darkmode-renders-default-popover-canvas-correctly-1-linux.png b/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-default-darkmode-renders-default-popover-canvas-correctly-1-linux.png
new file mode 100644
index 000000000..1850aeac7
Binary files /dev/null and b/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-default-darkmode-renders-default-popover-canvas-correctly-1-linux.png differ
diff --git a/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-default-lightmode-renders-default-popover-canvas-correctly-1-linux.png b/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-default-lightmode-renders-default-popover-canvas-correctly-1-linux.png
new file mode 100644
index 000000000..4a6df3692
Binary files /dev/null and b/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-default-lightmode-renders-default-popover-canvas-correctly-1-linux.png differ
diff --git a/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-default-renders-default-popover-canvas-correctly-1-linux.png b/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-default-renders-default-popover-canvas-correctly-1-linux.png
deleted file mode 100644
index f68cbad3d..000000000
Binary files a/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-default-renders-default-popover-canvas-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts b/packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts
index 8cc248f75..7f21d15e1 100644
--- a/packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts
+++ b/packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts
@@ -1,22 +1,39 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/popover-canvas/test/show-false/index.html';
+const componentName = 'tds-popover-canvas';
+const testDescription = 'tds-popover-canvas-show-false';
 
-test.describe.parallel('tds-popover-canvas-show-false', () => {
-  test('renders show=false popover-canvas correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const triggerButton = page.getByRole('button');
-    await triggerButton.click();
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders show=false popover-canvas correctly', async ({ page }) => {
+      const triggerButton = page.getByRole('button');
+      await triggerButton.click();
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('make sure popover canvas does not show after trigger button is pressed and content is not displayed before or after button click', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button');
     const popoverCanvasHeader = page.getByRole('heading');
     const popoverCanvasBody = page.getByText('Where you can put anything you want!', {
diff --git a/packages/core/src/components/breadcrumbs/test/default/darkmode/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-darkmode-renders-default-breadcrumbs-correctly-1-linux.png b/packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-false-darkmode-renders-show-false-popover-canvas-correctly-1-linux.png
similarity index 55%
rename from packages/core/src/components/breadcrumbs/test/default/darkmode/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-darkmode-renders-default-breadcrumbs-correctly-1-linux.png
rename to packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-false-darkmode-renders-show-false-popover-canvas-correctly-1-linux.png
index ff732df46..c28332c1b 100644
Binary files a/packages/core/src/components/breadcrumbs/test/default/darkmode/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-darkmode-renders-default-breadcrumbs-correctly-1-linux.png and b/packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-false-darkmode-renders-show-false-popover-canvas-correctly-1-linux.png differ
diff --git a/packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-false-lightmode-renders-show-false-popover-canvas-correctly-1-linux.png b/packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-false-lightmode-renders-show-false-popover-canvas-correctly-1-linux.png
new file mode 100644
index 000000000..a5d5bbd4b
Binary files /dev/null and b/packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-false-lightmode-renders-show-false-popover-canvas-correctly-1-linux.png differ
diff --git a/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts b/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts
index 68cff4243..abf0884e2 100644
--- a/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts
+++ b/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts
@@ -1,28 +1,45 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/popover-canvas/test/show-true/index.html';
+const componentName = 'tds-popover-canvas';
+const testDescription = 'tds-popover-canvas-show-true';
 
-test.describe.parallel('tds-popover-canvas-show-true', () => {
-  test('renders show=true popover-canvas correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const triggerButton = page.getByRole('button');
-    await triggerButton.click();
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders show=true popover-canvas correctly', async ({ page }) => {
+      const triggerButton = page.getByRole('button');
+      await triggerButton.click();
 
-    // get popover element
-    const popover = page.locator('tds-popover-core');
+      // get popover element
+      const popover = page.locator('tds-popover-core');
 
-    // wait for it to be visible
-    await popover.waitFor({ state: 'visible' });
+      // wait for it to be visible
+      await popover.waitFor({ state: 'visible' });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.05 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.05 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('make sure the popover canvas content is displayed both before and after the trigger button is pressed', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button');
     const popoverCanvasHeader = page.getByRole('heading');
     const popoverCanvasBody = page.getByText('Where you can put anything you want!', {
diff --git a/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-true-darkmode-renders-show-true-popover-canvas-correctly-1-linux.png b/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-true-darkmode-renders-show-true-popover-canvas-correctly-1-linux.png
new file mode 100644
index 000000000..373f8a95c
Binary files /dev/null and b/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-true-darkmode-renders-show-true-popover-canvas-correctly-1-linux.png differ
diff --git a/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-true-lightmode-renders-show-true-popover-canvas-correctly-1-linux.png b/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-true-lightmode-renders-show-true-popover-canvas-correctly-1-linux.png
new file mode 100644
index 000000000..ebbb2fd1c
Binary files /dev/null and b/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-true-lightmode-renders-show-true-popover-canvas-correctly-1-linux.png differ
diff --git a/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-true-renders-show-true-popover-canvas-correctly-1-linux.png b/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-true-renders-show-true-popover-canvas-correctly-1-linux.png
deleted file mode 100644
index ebe558bb7..000000000
Binary files a/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-true-renders-show-true-popover-canvas-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/popover-menu/test/default/popover-menu.e2e.ts b/packages/core/src/components/popover-menu/test/default/popover-menu.e2e.ts
index 961845d37..5ee9b1227 100644
--- a/packages/core/src/components/popover-menu/test/default/popover-menu.e2e.ts
+++ b/packages/core/src/components/popover-menu/test/default/popover-menu.e2e.ts
@@ -1,20 +1,37 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/popover-menu/test/default/index.html';
+const componentName = 'tds-popover-menu';
+const testDescription = 'tds-popover-menu-default';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default popover-menu correctly', async ({ page }) => {
+      const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
+      await triggerButton.click();
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
-test.describe.parallel('tds-popover-menu-default', () => {
-  test('renders default popover-menu correctly', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-    const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
-    await triggerButton.click();
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 
   test('clicking the trigger button should open the popover menu dialog', async ({ page }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
     const dropDownList = page.getByRole('list');
 
@@ -37,7 +54,6 @@ test.describe.parallel('tds-popover-menu-default', () => {
   });
 
   test('hover active menu item -> active item should be clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
     const dropDownList = page.getByRole('list');
     await triggerButton.click();
@@ -57,7 +73,6 @@ test.describe.parallel('tds-popover-menu-default', () => {
   test('hover inactive menu item -> inactive menu item should not be clickable', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
     await triggerButton.click();
 
@@ -72,7 +87,6 @@ test.describe.parallel('tds-popover-menu-default', () => {
   });
 
   test('icons are not existing for menu items', async ({ page }) => {
-    await page.goto(componentTestPath);
     const tdsMenuItemListItemIcons = page
       .getByRole('listitem')
       .filter({ has: page.getByRole('img') });
@@ -80,7 +94,6 @@ test.describe.parallel('tds-popover-menu-default', () => {
   });
 
   test('activating close method should close the dialog', async ({ page }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
     await triggerButton.click();
 
diff --git a/packages/core/src/components/popover-menu/test/default/popover-menu.e2e.ts-snapshots/tds-popover-menu-default-darkmode-renders-default-popover-menu-correctly-1-linux.png b/packages/core/src/components/popover-menu/test/default/popover-menu.e2e.ts-snapshots/tds-popover-menu-default-darkmode-renders-default-popover-menu-correctly-1-linux.png
new file mode 100644
index 000000000..5968a430d
Binary files /dev/null and b/packages/core/src/components/popover-menu/test/default/popover-menu.e2e.ts-snapshots/tds-popover-menu-default-darkmode-renders-default-popover-menu-correctly-1-linux.png differ
diff --git a/packages/core/src/components/popover-menu/test/default/popover-menu.e2e.ts-snapshots/tds-popover-menu-default-lightmode-renders-default-popover-menu-correctly-1-linux.png b/packages/core/src/components/popover-menu/test/default/popover-menu.e2e.ts-snapshots/tds-popover-menu-default-lightmode-renders-default-popover-menu-correctly-1-linux.png
new file mode 100644
index 000000000..933a957d1
Binary files /dev/null and b/packages/core/src/components/popover-menu/test/default/popover-menu.e2e.ts-snapshots/tds-popover-menu-default-lightmode-renders-default-popover-menu-correctly-1-linux.png differ
diff --git a/packages/core/src/components/popover-menu/test/default/popover-menu.e2e.ts-snapshots/tds-popover-menu-default-renders-default-popover-menu-correctly-1-linux.png b/packages/core/src/components/popover-menu/test/default/popover-menu.e2e.ts-snapshots/tds-popover-menu-default-renders-default-popover-menu-correctly-1-linux.png
deleted file mode 100644
index b11de5143..000000000
Binary files a/packages/core/src/components/popover-menu/test/default/popover-menu.e2e.ts-snapshots/tds-popover-menu-default-renders-default-popover-menu-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/popover-menu/test/icons-fluid/popover-menu.e2e.ts b/packages/core/src/components/popover-menu/test/icons-fluid/popover-menu.e2e.ts
index 9b83e097e..c6cf25f05 100644
--- a/packages/core/src/components/popover-menu/test/icons-fluid/popover-menu.e2e.ts
+++ b/packages/core/src/components/popover-menu/test/icons-fluid/popover-menu.e2e.ts
@@ -1,27 +1,43 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/popover-menu/test/icons-fluid/index.html';
+const componentName = 'tds-popover-menu';
+const testDescription = 'tds-popover-menu-icons-fluid';
 
-test.describe.parallel('tds-popover-menu-icons-fluid', () => {
-  test('renders icons-fluid popover-menu correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
-    await triggerButton.click();
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders icons-fluid popover-menu correctly', async ({ page }) => {
+      const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
+      await triggerButton.click();
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('menu item "The menu with adjusts to the widest word" exists', async ({ page }) => {
-    await page.goto(componentTestPath);
     const tdsMenuItemListLongText = page.getByText('The menu width adjusts to the widest word');
     await expect(tdsMenuItemListLongText).toHaveCount(1);
     await expect(tdsMenuItemListLongText).toBeHidden();
   });
 
   test('icons are existing for menu items', async ({ page }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
     await triggerButton.click();
 
diff --git a/packages/core/src/components/popover-menu/test/icons-fluid/popover-menu.e2e.ts-snapshots/tds-popover-menu-icons-fluid-darkmode-renders-icons-fluid-popover-menu-correctly-1-linux.png b/packages/core/src/components/popover-menu/test/icons-fluid/popover-menu.e2e.ts-snapshots/tds-popover-menu-icons-fluid-darkmode-renders-icons-fluid-popover-menu-correctly-1-linux.png
new file mode 100644
index 000000000..bf314e09b
Binary files /dev/null and b/packages/core/src/components/popover-menu/test/icons-fluid/popover-menu.e2e.ts-snapshots/tds-popover-menu-icons-fluid-darkmode-renders-icons-fluid-popover-menu-correctly-1-linux.png differ
diff --git a/packages/core/src/components/popover-menu/test/icons-fluid/popover-menu.e2e.ts-snapshots/tds-popover-menu-icons-fluid-lightmode-renders-icons-fluid-popover-menu-correctly-1-linux.png b/packages/core/src/components/popover-menu/test/icons-fluid/popover-menu.e2e.ts-snapshots/tds-popover-menu-icons-fluid-lightmode-renders-icons-fluid-popover-menu-correctly-1-linux.png
new file mode 100644
index 000000000..9c41ba371
Binary files /dev/null and b/packages/core/src/components/popover-menu/test/icons-fluid/popover-menu.e2e.ts-snapshots/tds-popover-menu-icons-fluid-lightmode-renders-icons-fluid-popover-menu-correctly-1-linux.png differ
diff --git a/packages/core/src/components/popover-menu/test/icons-fluid/popover-menu.e2e.ts-snapshots/tds-popover-menu-icons-fluid-renders-icons-fluid-popover-menu-correctly-1-linux.png b/packages/core/src/components/popover-menu/test/icons-fluid/popover-menu.e2e.ts-snapshots/tds-popover-menu-icons-fluid-renders-icons-fluid-popover-menu-correctly-1-linux.png
deleted file mode 100644
index 51f5380b7..000000000
Binary files a/packages/core/src/components/popover-menu/test/icons-fluid/popover-menu.e2e.ts-snapshots/tds-popover-menu-icons-fluid-renders-icons-fluid-popover-menu-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/popover-menu/test/show-false/popover-menu.e2e.ts b/packages/core/src/components/popover-menu/test/show-false/popover-menu.e2e.ts
index c1d2a9618..e2404ac79 100644
--- a/packages/core/src/components/popover-menu/test/show-false/popover-menu.e2e.ts
+++ b/packages/core/src/components/popover-menu/test/show-false/popover-menu.e2e.ts
@@ -1,20 +1,36 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/popover-menu/test/show-false/index.html';
+const componentName = 'tds-popover-menu';
+const testDescription = 'tds-popover-menu-show-false';
 
-test.describe.parallel('tds-popover-menu-show-false', () => {
-  test('renders show=false popover-menu correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders show=false popover-menu correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('clicking the trigger button should not open the popover menu dialog when show is false', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
     const dropDownList = page.getByRole('list');
 
diff --git a/packages/core/src/components/popover-menu/test/show-false/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-false-darkmode-renders-show-false-popover-menu-correctly-1-linux.png b/packages/core/src/components/popover-menu/test/show-false/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-false-darkmode-renders-show-false-popover-menu-correctly-1-linux.png
new file mode 100644
index 000000000..4f9d23f4e
Binary files /dev/null and b/packages/core/src/components/popover-menu/test/show-false/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-false-darkmode-renders-show-false-popover-menu-correctly-1-linux.png differ
diff --git a/packages/core/src/components/slider/test/default/slider.e2e.ts-snapshots/tds-slider-default-renders-default-slider-correctly-1-linux.png b/packages/core/src/components/popover-menu/test/show-false/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-false-lightmode-renders-show-false-popover-menu-correctly-1-linux.png
similarity index 55%
rename from packages/core/src/components/slider/test/default/slider.e2e.ts-snapshots/tds-slider-default-renders-default-slider-correctly-1-linux.png
rename to packages/core/src/components/popover-menu/test/show-false/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-false-lightmode-renders-show-false-popover-menu-correctly-1-linux.png
index f5ddef92a..f0aeea171 100644
Binary files a/packages/core/src/components/slider/test/default/slider.e2e.ts-snapshots/tds-slider-default-renders-default-slider-correctly-1-linux.png and b/packages/core/src/components/popover-menu/test/show-false/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-false-lightmode-renders-show-false-popover-menu-correctly-1-linux.png differ
diff --git a/packages/core/src/components/popover-menu/test/show/popover-menu.e2e.ts b/packages/core/src/components/popover-menu/test/show/popover-menu.e2e.ts
index 4f759c7c5..a7b77485c 100644
--- a/packages/core/src/components/popover-menu/test/show/popover-menu.e2e.ts
+++ b/packages/core/src/components/popover-menu/test/show/popover-menu.e2e.ts
@@ -1,20 +1,36 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/popover-menu/test/show/index.html';
+const componentName = 'tds-popover-menu';
+const testDescription = 'tds-popover-menu-show';
 
-test.describe.parallel('tds-popover-menu-show', () => {
-  test('renders show=true popover-menu correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders show=true popover-menu correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.05 });
+    });
+  });
+});
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.05 });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('clicking the trigger button should keep the popover menu dialog open when it is open by default', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button').filter({ has: page.getByRole('img') });
     const dropDownList = page.getByRole('list');
 
diff --git a/packages/core/src/components/popover-menu/test/show/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-darkmode-renders-show-true-popover-menu-correctly-1-linux.png b/packages/core/src/components/popover-menu/test/show/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-darkmode-renders-show-true-popover-menu-correctly-1-linux.png
new file mode 100644
index 000000000..988c29d73
Binary files /dev/null and b/packages/core/src/components/popover-menu/test/show/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-darkmode-renders-show-true-popover-menu-correctly-1-linux.png differ
diff --git a/packages/core/src/components/popover-menu/test/show/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-lightmode-renders-show-true-popover-menu-correctly-1-linux.png b/packages/core/src/components/popover-menu/test/show/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-lightmode-renders-show-true-popover-menu-correctly-1-linux.png
new file mode 100644
index 000000000..2ca8efd9d
Binary files /dev/null and b/packages/core/src/components/popover-menu/test/show/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-lightmode-renders-show-true-popover-menu-correctly-1-linux.png differ
diff --git a/packages/core/src/components/popover-menu/test/show/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-renders-show-true-popover-menu-correctly-1-linux.png b/packages/core/src/components/popover-menu/test/show/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-renders-show-true-popover-menu-correctly-1-linux.png
deleted file mode 100644
index c23150147..000000000
Binary files a/packages/core/src/components/popover-menu/test/show/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-renders-show-true-popover-menu-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/radio-button/test/default/radio-button.e2e.ts b/packages/core/src/components/radio-button/test/default/radio-button.e2e.ts
index be820600a..20c8364a9 100644
--- a/packages/core/src/components/radio-button/test/default/radio-button.e2e.ts
+++ b/packages/core/src/components/radio-button/test/default/radio-button.e2e.ts
@@ -1,21 +1,36 @@
 import { expect } from '@playwright/test';
 import { test } from 'stencil-playwright';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
-test.describe.parallel('TdsRadioButton component tests', () => {
-  test.beforeEach(async ({ page }) => {
-    // Navigate to the index.html page where your component is rendered
-    // Adjust the path to the index.html as necessary based on your project structure
-    await page.goto('src/components/radio-button/test/default/index.html');
+const componentTestPath = 'src/components/radio-button/test/default/index.html';
+const componentName = 'tds-radio-button';
+const testDescription = 'TdsRadioButton component tests';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('Radio buttons with Label text = "Label text 1" and "Label text 2" render on the page', async ({
+      page,
+    }) => {
+      const radioButton1 = page.locator('tds-radio-button', { hasText: 'Label text 1' });
+      const radioButton2 = page.locator('tds-radio-button', { hasText: 'Label text 2' });
+      await expect(radioButton1).toBeVisible();
+      await expect(radioButton2).toBeVisible();
+      await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0 });
+    });
   });
+});
 
-  test('Radio buttons with Label text = "Label text 1" and "Label text 2" render on the page', async ({
-    page,
-  }) => {
-    const radioButton1 = page.locator('tds-radio-button', { hasText: 'Label text 1' });
-    const radioButton2 = page.locator('tds-radio-button', { hasText: 'Label text 2' });
-    await expect(radioButton1).toBeVisible();
-    await expect(radioButton2).toBeVisible();
-    await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0 });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('"Label text 1" radio button is not disabled and can be clicked', async ({ page }) => {
diff --git a/packages/core/src/components/radio-button/test/default/radio-button.e2e.ts-snapshots/TdsRadioButton-component-tests-darkmode-Radio--4c625-text-1-and-Label-text-2-render-on-the-page-1-linux.png b/packages/core/src/components/radio-button/test/default/radio-button.e2e.ts-snapshots/TdsRadioButton-component-tests-darkmode-Radio--4c625-text-1-and-Label-text-2-render-on-the-page-1-linux.png
new file mode 100644
index 000000000..2f638066c
Binary files /dev/null and b/packages/core/src/components/radio-button/test/default/radio-button.e2e.ts-snapshots/TdsRadioButton-component-tests-darkmode-Radio--4c625-text-1-and-Label-text-2-render-on-the-page-1-linux.png differ
diff --git a/packages/core/src/components/radio-button/test/default/radio-button.e2e.ts-snapshots/TdsRadioButton-component-tests-lightmode-Radio-7994d-text-1-and-Label-text-2-render-on-the-page-1-linux.png b/packages/core/src/components/radio-button/test/default/radio-button.e2e.ts-snapshots/TdsRadioButton-component-tests-lightmode-Radio-7994d-text-1-and-Label-text-2-render-on-the-page-1-linux.png
new file mode 100644
index 000000000..2b3763b87
Binary files /dev/null and b/packages/core/src/components/radio-button/test/default/radio-button.e2e.ts-snapshots/TdsRadioButton-component-tests-lightmode-Radio-7994d-text-1-and-Label-text-2-render-on-the-page-1-linux.png differ
diff --git a/packages/core/src/components/radio-button/test/disabled/radio-button.e2e.ts b/packages/core/src/components/radio-button/test/disabled/radio-button.e2e.ts
index f01f9e902..5c50cbc49 100644
--- a/packages/core/src/components/radio-button/test/disabled/radio-button.e2e.ts
+++ b/packages/core/src/components/radio-button/test/disabled/radio-button.e2e.ts
@@ -1,19 +1,36 @@
 import { expect } from '@playwright/test';
 import { test } from 'stencil-playwright';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
-test.describe.parallel('Radio button - disabled state', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('src/components/radio-button/test/disabled/index.html');
+const componentTestPath = 'src/components/radio-button/test/disabled/index.html';
+const componentName = 'tds-radio-button';
+const testDescription = 'Radio button - disabled state';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('Radio buttons with Label text = "Label text 1" and "Label text 2" renders on the page', async ({
+      page,
+    }) => {
+      const radioButton1 = page.locator('tds-radio-button', { hasText: 'Label text 1' });
+      const radioButton2 = page.locator('tds-radio-button', { hasText: 'Label text 2' });
+      await expect(radioButton1).toBeVisible();
+      await expect(radioButton2).toBeVisible();
+      await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0 });
+    });
   });
+});
 
-  test('Radio buttons with Label text = "Label text 1" and "Label text 2" renders on the page', async ({
-    page,
-  }) => {
-    const radioButton1 = page.locator('tds-radio-button', { hasText: 'Label text 1' });
-    const radioButton2 = page.locator('tds-radio-button', { hasText: 'Label text 2' });
-    await expect(radioButton1).toBeVisible();
-    await expect(radioButton2).toBeVisible();
-    await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0 });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('1st radio button is disabled', async ({ page }) => {
diff --git a/packages/core/src/components/radio-button/test/disabled/radio-button.e2e.ts-snapshots/Radio-button---disabled-state-darkmode-Radio-b-cfe87-ext-1-and-Label-text-2-renders-on-the-page-1-linux.png b/packages/core/src/components/radio-button/test/disabled/radio-button.e2e.ts-snapshots/Radio-button---disabled-state-darkmode-Radio-b-cfe87-ext-1-and-Label-text-2-renders-on-the-page-1-linux.png
new file mode 100644
index 000000000..542bcd79e
Binary files /dev/null and b/packages/core/src/components/radio-button/test/disabled/radio-button.e2e.ts-snapshots/Radio-button---disabled-state-darkmode-Radio-b-cfe87-ext-1-and-Label-text-2-renders-on-the-page-1-linux.png differ
diff --git a/packages/core/src/components/radio-button/test/disabled/radio-button.e2e.ts-snapshots/Radio-button---disabled-state-lightmode-Radio--dd8a1-ext-1-and-Label-text-2-renders-on-the-page-1-linux.png b/packages/core/src/components/radio-button/test/disabled/radio-button.e2e.ts-snapshots/Radio-button---disabled-state-lightmode-Radio--dd8a1-ext-1-and-Label-text-2-renders-on-the-page-1-linux.png
new file mode 100644
index 000000000..3e26936d8
Binary files /dev/null and b/packages/core/src/components/radio-button/test/disabled/radio-button.e2e.ts-snapshots/Radio-button---disabled-state-lightmode-Radio--dd8a1-ext-1-and-Label-text-2-renders-on-the-page-1-linux.png differ
diff --git a/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts b/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts
index 1f5526931..9dba2ad9f 100644
--- a/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts
+++ b/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts
@@ -1,34 +1,50 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/side-menu/test/collapsible/index.html';
+const componentName = 'tds-side-menu';
+const testDescription = 'tds-side-menu-collapsible';
 
-test.describe.parallel('tds-side-menu-collapsible', () => {
-  test('renders collapsible side-menu correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const sideMenuNavigation = page.getByRole('navigation');
-    await expect(sideMenuNavigation).toHaveCount(1);
-    await expect(sideMenuNavigation).toBeVisible();
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders collapsible side-menu correctly', async ({ page }) => {
+      const sideMenuNavigation = page.getByRole('navigation');
+      await expect(sideMenuNavigation).toHaveCount(1);
+      await expect(sideMenuNavigation).toBeVisible();
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('click collapse button to close the menu', async ({ page }) => {
+      const sideMenuCollapseButton = page.getByRole('button').filter({ hasText: /Collapse/ });
+      await sideMenuCollapseButton.click();
+      await expect(sideMenuCollapseButton).toHaveCount(1);
+      await expect(sideMenuCollapseButton).toBeVisible();
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('collapse button exists on the bottom of side menu', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-    const sideMenuCollapseButton = page.getByRole('button').filter({ hasText: /Collapse/ });
-    await expect(sideMenuCollapseButton).toHaveCount(1);
-    await expect(sideMenuCollapseButton).toBeVisible();
   });
 
-  test('click collapse button to close the menu', async ({ page }) => {
-    await page.goto(componentTestPath);
+  test('collapse button exists on the bottom of side menu', async ({ page }) => {
     const sideMenuCollapseButton = page.getByRole('button').filter({ hasText: /Collapse/ });
-    await sideMenuCollapseButton.click();
     await expect(sideMenuCollapseButton).toHaveCount(1);
     await expect(sideMenuCollapseButton).toBeVisible();
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 });
diff --git a/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-click-collapse-button-to-close-the-menu-1-linux.png b/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-click-collapse-button-to-close-the-menu-1-linux.png
deleted file mode 100644
index 7a8ade248..000000000
Binary files a/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-click-collapse-button-to-close-the-menu-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-darkmode-click-collapse-button-to-close-the-menu-1-linux.png b/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-darkmode-click-collapse-button-to-close-the-menu-1-linux.png
new file mode 100644
index 000000000..fa7bae731
Binary files /dev/null and b/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-darkmode-click-collapse-button-to-close-the-menu-1-linux.png differ
diff --git a/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-darkmode-renders-collapsible-side-menu-correctly-1-linux.png b/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-darkmode-renders-collapsible-side-menu-correctly-1-linux.png
new file mode 100644
index 000000000..3ded27214
Binary files /dev/null and b/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-darkmode-renders-collapsible-side-menu-correctly-1-linux.png differ
diff --git a/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-lightmode-click-collapse-button-to-close-the-menu-1-linux.png b/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-lightmode-click-collapse-button-to-close-the-menu-1-linux.png
new file mode 100644
index 000000000..42aa875a3
Binary files /dev/null and b/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-lightmode-click-collapse-button-to-close-the-menu-1-linux.png differ
diff --git a/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-lightmode-renders-collapsible-side-menu-correctly-1-linux.png b/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-lightmode-renders-collapsible-side-menu-correctly-1-linux.png
new file mode 100644
index 000000000..de1db8736
Binary files /dev/null and b/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-lightmode-renders-collapsible-side-menu-correctly-1-linux.png differ
diff --git a/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-renders-collapsible-side-menu-correctly-1-linux.png b/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-renders-collapsible-side-menu-correctly-1-linux.png
deleted file mode 100644
index c6acdef25..000000000
Binary files a/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts-snapshots/tds-side-menu-collapsible-renders-collapsible-side-menu-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts b/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts
index 3a94d06c7..578d66277 100644
--- a/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts
+++ b/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts
@@ -1,21 +1,38 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/side-menu/test/default/index.html';
+const componentName = 'tds-side-menu';
+const testDescription = 'tds-side-menu-default';
 
-test.describe.parallel('tds-side-menu-default', () => {
-  test('renders default side-menu correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const sideMenuNavigation = page.getByRole('navigation');
-    await expect(sideMenuNavigation).toHaveCount(1);
-    await expect(sideMenuNavigation).toBeVisible();
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default side-menu correctly', async ({ page }) => {
+      const sideMenuNavigation = page.getByRole('navigation');
+      await expect(sideMenuNavigation).toHaveCount(1);
+      await expect(sideMenuNavigation).toBeVisible();
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('all side menu buttons to be visible', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('all side menu buttons to be visible', async ({ page }) => {
     const sideMenuButtons = page.getByRole('button');
     await expect(sideMenuButtons).toHaveCount(4);
     const promises = [];
@@ -30,8 +47,6 @@ test.describe.parallel('tds-side-menu-default', () => {
   test('wheel type list is open by default and under Wheel types there are two sublink', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
-
     /* Make sure first list item is there and visible */
     const sideMenuWheelTypeListItemOne = page
       .getByRole('listitem')
diff --git a/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts-snapshots/tds-side-menu-default-darkmode-renders-default-side-menu-correctly-1-linux.png b/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts-snapshots/tds-side-menu-default-darkmode-renders-default-side-menu-correctly-1-linux.png
new file mode 100644
index 000000000..7e96a6708
Binary files /dev/null and b/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts-snapshots/tds-side-menu-default-darkmode-renders-default-side-menu-correctly-1-linux.png differ
diff --git a/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts-snapshots/tds-side-menu-default-lightmode-renders-default-side-menu-correctly-1-linux.png b/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts-snapshots/tds-side-menu-default-lightmode-renders-default-side-menu-correctly-1-linux.png
new file mode 100644
index 000000000..610758515
Binary files /dev/null and b/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts-snapshots/tds-side-menu-default-lightmode-renders-default-side-menu-correctly-1-linux.png differ
diff --git a/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts-snapshots/tds-side-menu-default-renders-default-side-menu-correctly-1-linux.png b/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts-snapshots/tds-side-menu-default-renders-default-side-menu-correctly-1-linux.png
deleted file mode 100644
index cabf23f2f..000000000
Binary files a/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts-snapshots/tds-side-menu-default-renders-default-side-menu-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts b/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts
index 0a3dd40d0..3c2785841 100644
--- a/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts
+++ b/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts
@@ -1,43 +1,52 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/side-menu/test/expand-toggle/index.html';
+const componentName = 'tds-side-menu';
+const testDescription = 'tds-side-menu-toggle-expand';
 
-test.describe.parallel('tds-side-menu-toggle-expand', () => {
-  test('toggle collapse and expand programmatically', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    const wrapper = await page.locator('tds-side-menu-dropdown > .wrapper');
-    await expect(wrapper).toHaveClass(/state-open/);
+    test('toggle collapse and expand programmatically', async ({ page }) => {
+      const wrapper = await page.locator('tds-side-menu-dropdown > .wrapper');
+      await expect(wrapper).toHaveClass(/state-open/);
 
-    const dropdown = await page.locator('tds-side-menu-dropdown');
-    await dropdown.evaluate((element) => {
-      element.setAttribute('open', 'false');
-    });
-    await expect(wrapper).not.toHaveClass(/state-open/);
+      const dropdown = await page.locator('tds-side-menu-dropdown');
+      await dropdown.evaluate((element) => {
+        element.setAttribute('open', 'false');
+      });
+      await expect(wrapper).not.toHaveClass(/state-open/);
+
+      await dropdown.evaluate((element) => {
+        element.setAttribute('open', 'true');
+      });
+      await expect(wrapper).toHaveClass(/state-open/);
 
-    await dropdown.evaluate((element) => {
-      element.setAttribute('open', 'true');
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
     });
-    await expect(wrapper).toHaveClass(/state-open/);
 
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+    test('collapse programmatically and expand on the UI', async ({ page }) => {
+      const wrapper = await page.locator('tds-side-menu-dropdown > .wrapper');
 
-  test('collapse programmatically and expand on the UI', async ({ page }) => {
-    await page.goto(componentTestPath);
+      const dropdown = await page.locator('tds-side-menu-dropdown');
+      await dropdown.evaluate((element) => {
+        element.setAttribute('open', 'false');
+      });
+      await expect(wrapper).not.toHaveClass(/state-open/);
 
-    const wrapper = await page.locator('tds-side-menu-dropdown > .wrapper');
+      await await page.getByText('Wheel types').click();
+      await expect(wrapper).toHaveClass(/state-open/);
 
-    const dropdown = await page.locator('tds-side-menu-dropdown');
-    await dropdown.evaluate((element) => {
-      element.setAttribute('open', 'false');
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
     });
-    await expect(wrapper).not.toHaveClass(/state-open/);
-
-    await await page.getByText('Wheel types').click();
-    await expect(wrapper).toHaveClass(/state-open/);
-
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 });
diff --git a/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-collapse-programmatically-and-expand-on-the-UI-1-linux.png b/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-collapse-programmatically-and-expand-on-the-UI-1-linux.png
deleted file mode 100644
index 9e2cd5281..000000000
Binary files a/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-collapse-programmatically-and-expand-on-the-UI-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-darkmode-collapse-programmatically-and-expand-on-the-UI-1-linux.png b/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-darkmode-collapse-programmatically-and-expand-on-the-UI-1-linux.png
new file mode 100644
index 000000000..37a18204e
Binary files /dev/null and b/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-darkmode-collapse-programmatically-and-expand-on-the-UI-1-linux.png differ
diff --git a/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-darkmode-toggle-collapse-and-expand-programmatically-1-linux.png b/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-darkmode-toggle-collapse-and-expand-programmatically-1-linux.png
new file mode 100644
index 000000000..3eebba0ca
Binary files /dev/null and b/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-darkmode-toggle-collapse-and-expand-programmatically-1-linux.png differ
diff --git a/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-lightmode-collapse-programmatically-and-expand-on-the-UI-1-linux.png b/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-lightmode-collapse-programmatically-and-expand-on-the-UI-1-linux.png
new file mode 100644
index 000000000..b92159f2d
Binary files /dev/null and b/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-lightmode-collapse-programmatically-and-expand-on-the-UI-1-linux.png differ
diff --git a/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-lightmode-toggle-collapse-and-expand-programmatically-1-linux.png b/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-lightmode-toggle-collapse-and-expand-programmatically-1-linux.png
new file mode 100644
index 000000000..b40118daf
Binary files /dev/null and b/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-lightmode-toggle-collapse-and-expand-programmatically-1-linux.png differ
diff --git a/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-toggle-collapse-and-expand-programmatically-1-linux.png b/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-toggle-collapse-and-expand-programmatically-1-linux.png
deleted file mode 100644
index 054b1ffe0..000000000
Binary files a/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts-snapshots/tds-side-menu-toggle-expand-toggle-collapse-and-expand-programmatically-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/slider/test/default/slider.e2e.ts b/packages/core/src/components/slider/test/default/slider.e2e.ts
index b54d5118f..0cd26f5df 100644
--- a/packages/core/src/components/slider/test/default/slider.e2e.ts
+++ b/packages/core/src/components/slider/test/default/slider.e2e.ts
@@ -1,26 +1,42 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/slider/test/default/index.html';
+const componentName = 'tds-slider';
+const testDescription = 'tds-slider-default';
 
-test.describe.parallel('tds-slider-default', () => {
-  test('renders default slider correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const slider = page.locator('tds-slider');
-    await expect(slider).toHaveCount(1);
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('renders default slider correctly', async ({ page }) => {
+      const slider = page.locator('tds-slider');
+      await expect(slider).toHaveCount(1);
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('value is set to 50', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('value is set to 50', async ({ page }) => {
     const sliderValue = page.locator('.tds-slider__value');
     await expect(sliderValue).toHaveText('50');
   });
 
   test('min value is set to 0', async ({ page }) => {
-    await page.goto(componentTestPath);
     /* Find thumb and pull it towards a left and check if min value is 0 */
     await page.locator('.tds-slider__thumb-inner').hover();
     await page.mouse.down();
@@ -33,7 +49,6 @@ test.describe.parallel('tds-slider-default', () => {
   });
 
   test('max value is set to 100', async ({ page }) => {
-    await page.goto(componentTestPath);
     /* Find thumb and pull it towards a right and check if min value is 0 */
     await page.locator('.tds-slider__thumb-inner').hover();
     await page.mouse.down();
@@ -46,15 +61,12 @@ test.describe.parallel('tds-slider-default', () => {
   });
 
   test('label is hidden', async ({ page }) => {
-    await page.goto(componentTestPath);
     const slider = page.locator('tds-slider');
     const sliderLabel = slider.locator('label');
     await expect(sliderLabel).toHaveText('');
   });
 
   test('slider is not read only or disabled', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     /* Find thumb and pull it towards a left and check if value in thumb is changing */
     await page.locator('.tds-slider__thumb-inner').hover();
     await page.mouse.down();
@@ -67,7 +79,6 @@ test.describe.parallel('tds-slider-default', () => {
   });
 
   test('thumb is size large', async ({ page }) => {
-    await page.goto(componentTestPath);
     const sliderThumb = page.locator('.tds-slider__thumb-inner');
     const sliderThumbWidth = await sliderThumb.evaluate((style) => getComputedStyle(style).width);
     const sliderThumbHeight = await sliderThumb.evaluate((style) => getComputedStyle(style).height);
diff --git a/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-Modal-is-closed-by-default-1-linux.png b/packages/core/src/components/slider/test/default/slider.e2e.ts-snapshots/tds-slider-default-darkmode-renders-default-slider-correctly-1-linux.png
similarity index 56%
rename from packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-Modal-is-closed-by-default-1-linux.png
rename to packages/core/src/components/slider/test/default/slider.e2e.ts-snapshots/tds-slider-default-darkmode-renders-default-slider-correctly-1-linux.png
index 60af15ec0..25c820f71 100644
Binary files a/packages/core/src/components/modal/test/open-close/modal.e2e.ts-snapshots/tds-modal-open-Modal-is-closed-by-default-1-linux.png and b/packages/core/src/components/slider/test/default/slider.e2e.ts-snapshots/tds-slider-default-darkmode-renders-default-slider-correctly-1-linux.png differ
diff --git a/packages/core/src/components/slider/test/default/slider.e2e.ts-snapshots/tds-slider-default-lightmode-renders-default-slider-correctly-1-linux.png b/packages/core/src/components/slider/test/default/slider.e2e.ts-snapshots/tds-slider-default-lightmode-renders-default-slider-correctly-1-linux.png
new file mode 100644
index 000000000..47d0d2a81
Binary files /dev/null and b/packages/core/src/components/slider/test/default/slider.e2e.ts-snapshots/tds-slider-default-lightmode-renders-default-slider-correctly-1-linux.png differ
diff --git a/packages/core/src/components/slider/test/disabled/slider.e2e.ts b/packages/core/src/components/slider/test/disabled/slider.e2e.ts
index cc9b21860..759fa9da6 100644
--- a/packages/core/src/components/slider/test/disabled/slider.e2e.ts
+++ b/packages/core/src/components/slider/test/disabled/slider.e2e.ts
@@ -1,27 +1,46 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/slider/test/disabled/index.html';
-test.describe.parallel('tds-slider-disabled', () => {
-  test('read-only is false', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const slider = page.locator('tds-slider');
-    await expect(slider).not.toHaveAttribute('read-only');
+const componentName = 'tds-slider';
+const testDescription = 'tds-slider-disabled';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('slider is disabled', async ({ page }) => {
+      const slider = page.locator('tds-slider input');
+      const sliderThumb = page.locator('.tds-slider__thumb');
+      const sliderCursorStyle = await sliderThumb.evaluate(
+        (style) => getComputedStyle(style).cursor,
+      );
+      expect(sliderCursorStyle).toBe('not-allowed');
+      /* Check diff on screenshot as disabled state changes colors of a component */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      await expect(slider).toBeDisabled();
+    });
   });
+});
 
-  test('slider is disabled', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-    const slider = page.locator('tds-slider input');
-    const sliderThumb = page.locator('.tds-slider__thumb');
-    const sliderCursorStyle = await sliderThumb.evaluate((style) => getComputedStyle(style).cursor);
-    expect(sliderCursorStyle).toBe('not-allowed');
-    /* Check diff on screenshot as disabled state changes colors of a component */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    await expect(slider).toBeDisabled();
+  });
+
+  test('read-only is false', async ({ page }) => {
+    const slider = page.locator('tds-slider');
+    await expect(slider).not.toHaveAttribute('read-only');
   });
 
   test('slider can not be clicked on', async ({ page }) => {
-    await page.goto(componentTestPath);
     const sliderThumb = page.locator('.tds-slider__thumb-inner');
     const sliderPointerEvents = await sliderThumb.evaluate(
       (style) => getComputedStyle(style).pointerEvents,
diff --git a/packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-renders-icon-button-correctly-1-linux.png b/packages/core/src/components/slider/test/disabled/slider.e2e.ts-snapshots/tds-slider-disabled-darkmode-slider-is-disabled-1-linux.png
similarity index 76%
rename from packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-renders-icon-button-correctly-1-linux.png
rename to packages/core/src/components/slider/test/disabled/slider.e2e.ts-snapshots/tds-slider-disabled-darkmode-slider-is-disabled-1-linux.png
index 5c05f8587..a8b7bebd5 100644
Binary files a/packages/core/src/components/button/test/icon/button.e2e.ts-snapshots/tds-button-icon-renders-icon-button-correctly-1-linux.png and b/packages/core/src/components/slider/test/disabled/slider.e2e.ts-snapshots/tds-slider-disabled-darkmode-slider-is-disabled-1-linux.png differ
diff --git a/packages/core/src/components/slider/test/disabled/slider.e2e.ts-snapshots/tds-slider-disabled-lightmode-slider-is-disabled-1-linux.png b/packages/core/src/components/slider/test/disabled/slider.e2e.ts-snapshots/tds-slider-disabled-lightmode-slider-is-disabled-1-linux.png
new file mode 100644
index 000000000..c26b81f96
Binary files /dev/null and b/packages/core/src/components/slider/test/disabled/slider.e2e.ts-snapshots/tds-slider-disabled-lightmode-slider-is-disabled-1-linux.png differ
diff --git a/packages/core/src/components/slider/test/read-only/slider.e2e.ts b/packages/core/src/components/slider/test/read-only/slider.e2e.ts
index 54b01663a..8a0c890fb 100644
--- a/packages/core/src/components/slider/test/read-only/slider.e2e.ts
+++ b/packages/core/src/components/slider/test/read-only/slider.e2e.ts
@@ -1,25 +1,44 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/slider/test/read-only/index.html';
-test.describe.parallel('tds-slider-read-only', () => {
-  test('read-only is true', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const slider = page.locator('tds-slider');
-    await expect(slider).toHaveAttribute('read-only');
+const componentName = 'tds-slider';
+const testDescription = 'tds-slider-read-only';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('is not disabled', async ({ page }) => {
+      const sliderThumb = page.locator('.tds-slider__thumb-inner');
+      const sliderCursorStyle = await sliderThumb.evaluate(
+        (style) => getComputedStyle(style).cursor,
+      );
+      expect(sliderCursorStyle).toBe('pointer');
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('is not disabled', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-    const sliderThumb = page.locator('.tds-slider__thumb-inner');
-    const sliderCursorStyle = await sliderThumb.evaluate((style) => getComputedStyle(style).cursor);
-    expect(sliderCursorStyle).toBe('pointer');
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+
+  test('read-only is true', async ({ page }) => {
+    const slider = page.locator('tds-slider');
+    await expect(slider).toHaveAttribute('read-only');
   });
 
   test('slider can not be clicked on', async ({ page }) => {
-    await page.goto(componentTestPath);
     const sliderThumb = page.locator('.tds-slider__thumb-inner');
     const sliderThumbStyle = await sliderThumb.evaluate(
       (style) => getComputedStyle(style).pointerEvents,
diff --git a/packages/core/src/components/slider/test/read-only/slider.e2e.ts-snapshots/tds-slider-read-only-darkmode-is-not-disabled-1-linux.png b/packages/core/src/components/slider/test/read-only/slider.e2e.ts-snapshots/tds-slider-read-only-darkmode-is-not-disabled-1-linux.png
new file mode 100644
index 000000000..25c820f71
Binary files /dev/null and b/packages/core/src/components/slider/test/read-only/slider.e2e.ts-snapshots/tds-slider-read-only-darkmode-is-not-disabled-1-linux.png differ
diff --git a/packages/core/src/components/slider/test/read-only/slider.e2e.ts-snapshots/tds-slider-read-only-lightmode-is-not-disabled-1-linux.png b/packages/core/src/components/slider/test/read-only/slider.e2e.ts-snapshots/tds-slider-read-only-lightmode-is-not-disabled-1-linux.png
new file mode 100644
index 000000000..47d0d2a81
Binary files /dev/null and b/packages/core/src/components/slider/test/read-only/slider.e2e.ts-snapshots/tds-slider-read-only-lightmode-is-not-disabled-1-linux.png differ
diff --git a/packages/core/src/components/spinner/test/inverted/spinner.e2e.ts b/packages/core/src/components/spinner/test/inverted/spinner.e2e.ts
index ae52bf035..e9ce85fc5 100644
--- a/packages/core/src/components/spinner/test/inverted/spinner.e2e.ts
+++ b/packages/core/src/components/spinner/test/inverted/spinner.e2e.ts
@@ -1,13 +1,31 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import { getTestDescribeText, setupPage } from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/spinner/test/inverted/index.html';
+const componentName = 'tds-spinner';
+const testDescription = 'tds-spinner-inverted';
 
-test.describe.parallel('tds-spinner-inverted', () => {
-  test('renders inverted spinner correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+const spinnerTestConfiguration = [
+  {
+    theme: 'lightmode',
+    backgroundColor: 'var(--tds-grey-50)',
+  },
+  {
+    theme: 'darkmode',
+    backgroundColor: 'var(--tds-grey-958)',
+  },
+];
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+spinnerTestConfiguration.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders inverted spinner correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/spinner/test/inverted/spinner.e2e.ts-snapshots/tds-spinner-inverted-darkmode-renders-inverted-spinner-correctly-1-linux.png b/packages/core/src/components/spinner/test/inverted/spinner.e2e.ts-snapshots/tds-spinner-inverted-darkmode-renders-inverted-spinner-correctly-1-linux.png
new file mode 100644
index 000000000..184d9d354
Binary files /dev/null and b/packages/core/src/components/spinner/test/inverted/spinner.e2e.ts-snapshots/tds-spinner-inverted-darkmode-renders-inverted-spinner-correctly-1-linux.png differ
diff --git a/packages/core/src/components/spinner/test/inverted/spinner.e2e.ts-snapshots/tds-spinner-inverted-lightmode-renders-inverted-spinner-correctly-1-linux.png b/packages/core/src/components/spinner/test/inverted/spinner.e2e.ts-snapshots/tds-spinner-inverted-lightmode-renders-inverted-spinner-correctly-1-linux.png
new file mode 100644
index 000000000..35001a9f8
Binary files /dev/null and b/packages/core/src/components/spinner/test/inverted/spinner.e2e.ts-snapshots/tds-spinner-inverted-lightmode-renders-inverted-spinner-correctly-1-linux.png differ
diff --git a/packages/core/src/components/spinner/test/inverted/spinner.e2e.ts-snapshots/tds-spinner-inverted-renders-inverted-spinner-correctly-1-linux.png b/packages/core/src/components/spinner/test/inverted/spinner.e2e.ts-snapshots/tds-spinner-inverted-renders-inverted-spinner-correctly-1-linux.png
deleted file mode 100644
index ad97f59b6..000000000
Binary files a/packages/core/src/components/spinner/test/inverted/spinner.e2e.ts-snapshots/tds-spinner-inverted-renders-inverted-spinner-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/spinner/test/standard/spinner.e2e.ts b/packages/core/src/components/spinner/test/standard/spinner.e2e.ts
index e7999620a..cdb9c6ab9 100644
--- a/packages/core/src/components/spinner/test/standard/spinner.e2e.ts
+++ b/packages/core/src/components/spinner/test/standard/spinner.e2e.ts
@@ -1,19 +1,41 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import { getTestDescribeText, setupPage } from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/spinner/test/standard/index.html';
+const componentName = 'tds-spinner';
+const testDescription = 'tds-spinner-standard';
 
-test.describe.parallel('tds-spinner-standard', () => {
-  test('renders basic spinner correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+const spinnerTestConfiguration = [
+  {
+    theme: 'lightmode',
+    backgroundColor: 'var(--tds-grey-50)',
+  },
+  {
+    theme: 'darkmode',
+    backgroundColor: 'var(--tds-grey-958)',
+  },
+];
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+spinnerTestConfiguration.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders basic spinner correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('Check if animation is present', async ({ page }) => {
+test.describe.parallel('tds-spinner-standard', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('Check if animation is present', async ({ page }) => {
     const spinner = page.locator('tds-spinner:first-child circle');
     const spinnerStyle = await spinner.evaluate((style) => getComputedStyle(style).animationName);
     expect(spinnerStyle).toBe('dash');
diff --git a/packages/core/src/components/spinner/test/standard/spinner.e2e.ts-snapshots/tds-spinner-standard-darkmode-renders-basic-spinner-correctly-1-linux.png b/packages/core/src/components/spinner/test/standard/spinner.e2e.ts-snapshots/tds-spinner-standard-darkmode-renders-basic-spinner-correctly-1-linux.png
new file mode 100644
index 000000000..079ef1874
Binary files /dev/null and b/packages/core/src/components/spinner/test/standard/spinner.e2e.ts-snapshots/tds-spinner-standard-darkmode-renders-basic-spinner-correctly-1-linux.png differ
diff --git a/packages/core/src/components/spinner/test/standard/spinner.e2e.ts-snapshots/tds-spinner-standard-lightmode-renders-basic-spinner-correctly-1-linux.png b/packages/core/src/components/spinner/test/standard/spinner.e2e.ts-snapshots/tds-spinner-standard-lightmode-renders-basic-spinner-correctly-1-linux.png
new file mode 100644
index 000000000..5da7003cb
Binary files /dev/null and b/packages/core/src/components/spinner/test/standard/spinner.e2e.ts-snapshots/tds-spinner-standard-lightmode-renders-basic-spinner-correctly-1-linux.png differ
diff --git a/packages/core/src/components/spinner/test/standard/spinner.e2e.ts-snapshots/tds-spinner-standard-renders-basic-spinner-correctly-1-linux.png b/packages/core/src/components/spinner/test/standard/spinner.e2e.ts-snapshots/tds-spinner-standard-renders-basic-spinner-correctly-1-linux.png
deleted file mode 100644
index a648ab2e6..000000000
Binary files a/packages/core/src/components/spinner/test/standard/spinner.e2e.ts-snapshots/tds-spinner-standard-renders-basic-spinner-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/stepper/test/large-horizontal-text-below/stepper.e2e.ts b/packages/core/src/components/stepper/test/large-horizontal-text-below/stepper.e2e.ts
index cb934fbd8..a96b03306 100644
--- a/packages/core/src/components/stepper/test/large-horizontal-text-below/stepper.e2e.ts
+++ b/packages/core/src/components/stepper/test/large-horizontal-text-below/stepper.e2e.ts
@@ -1,12 +1,25 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/stepper/test/large-horizontal-text-below/index.html';
+const componentName = 'tds-stepper';
 
-//Test if component renders and take a screenshot of the component
-test('Stepper - Large horizontal with text below', async ({ page }) => {
-  await page.goto(componentTestPath);
-  const stepper = page.locator('[data-testid="tds-stepper-testid"]');
-  await stepper.waitFor({ state: 'visible' });
-  await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    // Test if component renders and take a screenshot of the component
+    test('Stepper - Large horizontal with text below', async ({ page }) => {
+      const stepper = page.locator('[data-testid="tds-stepper-testid"]');
+      await stepper.waitFor({ state: 'visible' });
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
 });
diff --git a/packages/core/src/components/stepper/test/large-horizontal-text-below/stepper.e2e.ts-snapshots/Stepper---Large-horizontal-with-text-below-1-linux.png b/packages/core/src/components/stepper/test/large-horizontal-text-below/stepper.e2e.ts-snapshots/Stepper---Large-horizontal-with-text-below-1-linux.png
deleted file mode 100644
index 32b8fcc28..000000000
Binary files a/packages/core/src/components/stepper/test/large-horizontal-text-below/stepper.e2e.ts-snapshots/Stepper---Large-horizontal-with-text-below-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/stepper/test/large-horizontal-text-below/stepper.e2e.ts-snapshots/tds-stepper-darkmode-Stepper---Large-horizontal-with-text-below-1-linux.png b/packages/core/src/components/stepper/test/large-horizontal-text-below/stepper.e2e.ts-snapshots/tds-stepper-darkmode-Stepper---Large-horizontal-with-text-below-1-linux.png
new file mode 100644
index 000000000..3c3dbaf74
Binary files /dev/null and b/packages/core/src/components/stepper/test/large-horizontal-text-below/stepper.e2e.ts-snapshots/tds-stepper-darkmode-Stepper---Large-horizontal-with-text-below-1-linux.png differ
diff --git a/packages/core/src/components/stepper/test/large-horizontal-text-below/stepper.e2e.ts-snapshots/tds-stepper-lightmode-Stepper---Large-horizontal-with-text-below-1-linux.png b/packages/core/src/components/stepper/test/large-horizontal-text-below/stepper.e2e.ts-snapshots/tds-stepper-lightmode-Stepper---Large-horizontal-with-text-below-1-linux.png
new file mode 100644
index 000000000..44875d96c
Binary files /dev/null and b/packages/core/src/components/stepper/test/large-horizontal-text-below/stepper.e2e.ts-snapshots/tds-stepper-lightmode-Stepper---Large-horizontal-with-text-below-1-linux.png differ
diff --git a/packages/core/src/components/stepper/test/large-vertical-with-text/stepper.e2e.ts b/packages/core/src/components/stepper/test/large-vertical-with-text/stepper.e2e.ts
index 1efaf5e97..988119a0a 100644
--- a/packages/core/src/components/stepper/test/large-vertical-with-text/stepper.e2e.ts
+++ b/packages/core/src/components/stepper/test/large-vertical-with-text/stepper.e2e.ts
@@ -1,12 +1,25 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/stepper/test/large-vertical-with-text/index.html';
+const componentName = 'tds-stepper';
 
-//Test if component renders and take a screenshot of the component
-test('Stepper - Large vertical with text', async ({ page }) => {
-  await page.goto(componentTestPath);
-  const stepper = page.locator('[data-testid="tds-stepper-testid"]');
-  await stepper.waitFor({ state: 'visible' });
-  await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    // Test if component renders and take a screenshot of the component
+    test('Stepper - Large vertical with text', async ({ page }) => {
+      const stepper = page.locator('[data-testid="tds-stepper-testid"]');
+      await stepper.waitFor({ state: 'visible' });
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
 });
diff --git a/packages/core/src/components/stepper/test/large-vertical-with-text/stepper.e2e.ts-snapshots/Stepper---Large-vertical-with-text-1-linux.png b/packages/core/src/components/stepper/test/large-vertical-with-text/stepper.e2e.ts-snapshots/Stepper---Large-vertical-with-text-1-linux.png
deleted file mode 100644
index 5b9e3564f..000000000
Binary files a/packages/core/src/components/stepper/test/large-vertical-with-text/stepper.e2e.ts-snapshots/Stepper---Large-vertical-with-text-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/stepper/test/large-vertical-with-text/stepper.e2e.ts-snapshots/tds-stepper-darkmode-Stepper---Large-vertical-with-text-1-linux.png b/packages/core/src/components/stepper/test/large-vertical-with-text/stepper.e2e.ts-snapshots/tds-stepper-darkmode-Stepper---Large-vertical-with-text-1-linux.png
new file mode 100644
index 000000000..c4edffb07
Binary files /dev/null and b/packages/core/src/components/stepper/test/large-vertical-with-text/stepper.e2e.ts-snapshots/tds-stepper-darkmode-Stepper---Large-vertical-with-text-1-linux.png differ
diff --git a/packages/core/src/components/stepper/test/large-vertical-with-text/stepper.e2e.ts-snapshots/tds-stepper-lightmode-Stepper---Large-vertical-with-text-1-linux.png b/packages/core/src/components/stepper/test/large-vertical-with-text/stepper.e2e.ts-snapshots/tds-stepper-lightmode-Stepper---Large-vertical-with-text-1-linux.png
new file mode 100644
index 000000000..39119259b
Binary files /dev/null and b/packages/core/src/components/stepper/test/large-vertical-with-text/stepper.e2e.ts-snapshots/tds-stepper-lightmode-Stepper---Large-vertical-with-text-1-linux.png differ
diff --git a/packages/core/src/components/stepper/test/small-vertical-text-aside/stepper.e2e.ts b/packages/core/src/components/stepper/test/small-vertical-text-aside/stepper.e2e.ts
index 5cf68e381..5478cd1b8 100644
--- a/packages/core/src/components/stepper/test/small-vertical-text-aside/stepper.e2e.ts
+++ b/packages/core/src/components/stepper/test/small-vertical-text-aside/stepper.e2e.ts
@@ -1,12 +1,25 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/stepper/test/small-vertical-text-aside/index.html';
+const componentName = 'tds-stepper';
 
-//Test if component renders and take a screenshot of the component
-test('Stepper - Small vertical text aside', async ({ page }) => {
-  await page.goto(componentTestPath);
-  const stepper = page.locator('[data-testid="tds-stepper-testid"]');
-  await stepper.waitFor({ state: 'visible' });
-  await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    // Test if component renders and take a screenshot of the component
+    test('Stepper - Small vertical text aside', async ({ page }) => {
+      const stepper = page.locator('[data-testid="tds-stepper-testid"]');
+      await stepper.waitFor({ state: 'visible' });
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
 });
diff --git a/packages/core/src/components/stepper/test/small-vertical-text-aside/stepper.e2e.ts-snapshots/Stepper---Small-vertical-text-aside-1-linux.png b/packages/core/src/components/stepper/test/small-vertical-text-aside/stepper.e2e.ts-snapshots/Stepper---Small-vertical-text-aside-1-linux.png
deleted file mode 100644
index 62338997c..000000000
Binary files a/packages/core/src/components/stepper/test/small-vertical-text-aside/stepper.e2e.ts-snapshots/Stepper---Small-vertical-text-aside-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/stepper/test/small-vertical-text-aside/stepper.e2e.ts-snapshots/tds-stepper-darkmode-Stepper---Small-vertical-text-aside-1-linux.png b/packages/core/src/components/stepper/test/small-vertical-text-aside/stepper.e2e.ts-snapshots/tds-stepper-darkmode-Stepper---Small-vertical-text-aside-1-linux.png
new file mode 100644
index 000000000..30882f8f2
Binary files /dev/null and b/packages/core/src/components/stepper/test/small-vertical-text-aside/stepper.e2e.ts-snapshots/tds-stepper-darkmode-Stepper---Small-vertical-text-aside-1-linux.png differ
diff --git a/packages/core/src/components/stepper/test/small-vertical-text-aside/stepper.e2e.ts-snapshots/tds-stepper-lightmode-Stepper---Small-vertical-text-aside-1-linux.png b/packages/core/src/components/stepper/test/small-vertical-text-aside/stepper.e2e.ts-snapshots/tds-stepper-lightmode-Stepper---Small-vertical-text-aside-1-linux.png
new file mode 100644
index 000000000..978f6a2ce
Binary files /dev/null and b/packages/core/src/components/stepper/test/small-vertical-text-aside/stepper.e2e.ts-snapshots/tds-stepper-lightmode-Stepper---Small-vertical-text-aside-1-linux.png differ
diff --git a/packages/core/src/components/stepper/test/small-vertical-with-no-text/stepper.e2e.ts b/packages/core/src/components/stepper/test/small-vertical-with-no-text/stepper.e2e.ts
index 20880cdff..878d41f9b 100644
--- a/packages/core/src/components/stepper/test/small-vertical-with-no-text/stepper.e2e.ts
+++ b/packages/core/src/components/stepper/test/small-vertical-with-no-text/stepper.e2e.ts
@@ -1,12 +1,25 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/stepper/test/small-vertical-with-no-text/index.html';
+const componentName = 'tds-stepper';
 
-//Test if component renders and take a screenshot of the component
-test('Stepper - Small vertical with no text', async ({ page }) => {
-  await page.goto(componentTestPath);
-  const stepper = page.locator('[data-testid="tds-stepper-testid"]');
-  await stepper.waitFor({ state: 'visible' });
-  await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    // Test if component renders and take a screenshot of the component
+    test('Stepper - Small vertical with no text', async ({ page }) => {
+      const stepper = page.locator('[data-testid="tds-stepper-testid"]');
+      await stepper.waitFor({ state: 'visible' });
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
 });
diff --git a/packages/core/src/components/stepper/test/small-vertical-with-no-text/stepper.e2e.ts-snapshots/Stepper---Small-vertical-with-no-text-1-linux.png b/packages/core/src/components/stepper/test/small-vertical-with-no-text/stepper.e2e.ts-snapshots/Stepper---Small-vertical-with-no-text-1-linux.png
deleted file mode 100644
index edcf24b71..000000000
Binary files a/packages/core/src/components/stepper/test/small-vertical-with-no-text/stepper.e2e.ts-snapshots/Stepper---Small-vertical-with-no-text-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/stepper/test/small-vertical-with-no-text/stepper.e2e.ts-snapshots/tds-stepper-darkmode-Stepper---Small-vertical-with-no-text-1-linux.png b/packages/core/src/components/stepper/test/small-vertical-with-no-text/stepper.e2e.ts-snapshots/tds-stepper-darkmode-Stepper---Small-vertical-with-no-text-1-linux.png
new file mode 100644
index 000000000..9f016017c
Binary files /dev/null and b/packages/core/src/components/stepper/test/small-vertical-with-no-text/stepper.e2e.ts-snapshots/tds-stepper-darkmode-Stepper---Small-vertical-with-no-text-1-linux.png differ
diff --git a/packages/core/src/components/stepper/test/small-vertical-with-no-text/stepper.e2e.ts-snapshots/tds-stepper-lightmode-Stepper---Small-vertical-with-no-text-1-linux.png b/packages/core/src/components/stepper/test/small-vertical-with-no-text/stepper.e2e.ts-snapshots/tds-stepper-lightmode-Stepper---Small-vertical-with-no-text-1-linux.png
new file mode 100644
index 000000000..40c014905
Binary files /dev/null and b/packages/core/src/components/stepper/test/small-vertical-with-no-text/stepper.e2e.ts-snapshots/tds-stepper-lightmode-Stepper---Small-vertical-with-no-text-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/batch/table.e2e.ts b/packages/core/src/components/table/table/test/batch/table.e2e.ts
index ff6e8c3c4..f49f38143 100644
--- a/packages/core/src/components/table/table/test/batch/table.e2e.ts
+++ b/packages/core/src/components/table/table/test/batch/table.e2e.ts
@@ -1,27 +1,43 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/batch/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-batch';
 
-test.describe.parallel('tds-table-batch', () => {
-  test('renders batch table correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders batch table correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('table has a settings button', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('table has a settings button', async ({ page }) => {
     const tdsTableToolbarSettings = page.getByRole('img');
     await expect(tdsTableToolbarSettings).toHaveCount(1);
     await expect(tdsTableToolbarSettings).toBeVisible();
   });
 
   test('table has a [Download] button', async ({ page }) => {
-    await page.goto(componentTestPath);
     const tdsTableToolbarDownloadButton = page.getByRole('button', { name: /Download/ });
     await expect(tdsTableToolbarDownloadButton).toHaveCount(1);
     await expect(tdsTableToolbarDownloadButton).toBeVisible();
diff --git a/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-primary-darkmode-renders-batch-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-primary-darkmode-renders-batch-table-correctly-1-linux.png
new file mode 100644
index 000000000..c6e5395d3
Binary files /dev/null and b/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-primary-darkmode-renders-batch-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-primary-lightmode-renders-batch-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-primary-lightmode-renders-batch-table-correctly-1-linux.png
new file mode 100644
index 000000000..06d10b416
Binary files /dev/null and b/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-primary-lightmode-renders-batch-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-renders-batch-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-renders-batch-table-correctly-1-linux.png
deleted file mode 100644
index cb9f1af88..000000000
Binary files a/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-renders-batch-table-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-secondary-darkmode-renders-batch-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-secondary-darkmode-renders-batch-table-correctly-1-linux.png
new file mode 100644
index 000000000..0af1fbaa3
Binary files /dev/null and b/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-secondary-darkmode-renders-batch-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-secondary-lightmode-renders-batch-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-secondary-lightmode-renders-batch-table-correctly-1-linux.png
new file mode 100644
index 000000000..099586cfe
Binary files /dev/null and b/packages/core/src/components/table/table/test/batch/table.e2e.ts-snapshots/tds-table-batch-secondary-lightmode-renders-batch-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts
index 8afea04f1..5d2b71a68 100644
--- a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts
+++ b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts
@@ -1,23 +1,34 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath =
   'src/components/table/table/test/column-filtering/header-input-wrapper/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-column-filtering fill';
 
-test.describe.parallel('tds-table-column-filtering fill', () => {
-  test('expect slotted inputs to persist inputed value', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    const inputfield = page.getByTestId('firstHeaderInput');
-    await inputfield.fill('Hello World!');
+    test('expect slotted inputs to persist inputed value', async ({ page }) => {
+      const inputfield = page.getByTestId('firstHeaderInput');
+      await inputfield.fill('Hello World!');
 
-    await inputfield.blur();
+      await inputfield.blur();
 
-    let value = await inputfield.inputValue();
+      let value = await inputfield.inputValue();
 
-    expect(value).toBe('Hello World!');
+      expect(value).toBe('Hello World!');
 
-    /* Check diff of screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
deleted file mode 100644
index db2a1160f..000000000
Binary files a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-expect-slotted-inputs-to-persist-inputed-value-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-primary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-primary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
new file mode 100644
index 000000000..e4c80734c
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-primary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-primary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-primary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
new file mode 100644
index 000000000..ab5d9460d
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-primary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-secondary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-secondary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
new file mode 100644
index 000000000..3710521a3
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-secondary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-secondary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-secondary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
new file mode 100644
index 000000000..9218b3c55
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-column-filtering-fill-secondary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts
index 53e7910f6..cc3d94b4f 100644
--- a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts
+++ b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts
@@ -1,24 +1,38 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath =
   'src/components/table/table/test/column-filtering/header-input-wrapper/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-column-filtering focus';
 
-test.describe.parallel('tds-table-column-filtering focus', () => {
-  test('expect wrapper to effect slotted inputs style on focus', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    const inputfield = page.getByTestId('firstHeaderInput');
+    test('expect wrapper to effect slotted inputs style on focus', async ({ page }) => {
+      const inputfield = page.getByTestId('firstHeaderInput');
 
-    await inputfield.focus();
+      await inputfield.focus();
 
-    const color = await inputfield.evaluate((el) => {
-      return window.getComputedStyle(el).getPropertyValue('background-color');
-    });
+      // only check the color if no mode variant or mode is set:
+      if (!config) {
+        const color = await inputfield.evaluate((el) => {
+          return window.getComputedStyle(el).getPropertyValue('background-color');
+        });
 
-    expect(color).toBe('rgb(255, 255, 255)'); // white
+        expect(color).toBe('rgb(255, 255, 255)'); // white
+      }
 
-    /* Check diff of screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-expect-wrapper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-expect-wrapper-to-effect-slotted-inputs-style-on-focus-1-linux.png
deleted file mode 100644
index 9eb5a6ca1..000000000
Binary files a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-expect-wrapper-to-effect-slotted-inputs-style-on-focus-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-primary-darkm-ab933-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-primary-darkm-ab933-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png
new file mode 100644
index 000000000..6859d83ce
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-primary-darkm-ab933-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-primary-light-43327-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-primary-light-43327-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png
new file mode 100644
index 000000000..fadab4b79
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-primary-light-43327-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-secondary-dar-76991-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-secondary-dar-76991-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png
new file mode 100644
index 000000000..08d559e30
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-secondary-dar-76991-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-secondary-lig-76aa6-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-secondary-lig-76aa6-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png
new file mode 100644
index 000000000..60147e737
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-column-filtering-focus-secondary-lig-76aa6-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts
index 661470683..0a2661904 100644
--- a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts
+++ b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts
@@ -1,30 +1,45 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath =
   'src/components/table/table/test/column-filtering/header-input-wrapper/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-column-filtering hover';
 
-test.describe.parallel('tds-table-column-filtering hover', () => {
-  test('expect wrapper to effect slotted inputs style on hover', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    const inputfield = page.getByTestId('firstHeaderInput');
+    test('expect wrapper to effect slotted inputs style on hover', async ({ page }) => {
+      const inputfield = page.getByTestId('firstHeaderInput');
 
-    await inputfield.hover();
+      await inputfield.hover();
 
-    const color = await inputfield.evaluate((el) => {
-      return window.getComputedStyle(el).getPropertyValue('background-color');
-    });
+      const color = await inputfield.evaluate((el) => {
+        return window.getComputedStyle(el).getPropertyValue('background-color');
+      });
 
-    expect(color).toBe('rgba(0, 0, 0, 0)');
+      expect(color).toBe('rgba(0, 0, 0, 0)');
 
-    /* Check diff of screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
+});
 
-  test('expect slotted input to show search icon on hover', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('expect slotted input to show search icon on hover', async ({ page }) => {
     const inputfield = page.getByTestId('firstHeaderInput');
 
     await inputfield.hover();
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-expect-wrapper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-expect-wrapper-to-effect-slotted-inputs-style-on-hover-1-linux.png
deleted file mode 100644
index 855a05b90..000000000
Binary files a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-expect-wrapper-to-effect-slotted-inputs-style-on-hover-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-primary-darkm-1683d-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-primary-darkm-1683d-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png
new file mode 100644
index 000000000..0f9867a95
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-primary-darkm-1683d-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-primary-light-7b6df-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-primary-light-7b6df-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png
new file mode 100644
index 000000000..a23e63efa
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-primary-light-7b6df-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-secondary-dar-03d45-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-secondary-dar-03d45-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png
new file mode 100644
index 000000000..5a7b0581d
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-secondary-dar-03d45-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-secondary-lig-9096d-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-secondary-lig-9096d-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png
new file mode 100644
index 000000000..8b5a5c9e6
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-column-filtering-hover-secondary-lig-9096d-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts
index b240d76fb..b22af5762 100644
--- a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts
+++ b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts
@@ -1,16 +1,28 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath =
   'src/components/table/table/test/column-filtering/header-input-wrapper/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-column-filtering';
 
-test.describe.parallel('tds-table-column-filtering', () => {
-  test('renders table with editable header cell correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Check diff of screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    test('renders table with editable header cell correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
+
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-primary-darkmode-renders-table-with-editable-header-cell-correctly-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-primary-darkmode-renders-table-with-editable-header-cell-correctly-1-linux.png
new file mode 100644
index 000000000..dd7d08aab
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-primary-darkmode-renders-table-with-editable-header-cell-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-primary-lightmode-renders-table-with-editable-header-cell-correctly-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-primary-lightmode-renders-table-with-editable-header-cell-correctly-1-linux.png
new file mode 100644
index 000000000..c0924a920
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-primary-lightmode-renders-table-with-editable-header-cell-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-renders-table-with-editable-header-cell-correctly-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-renders-table-with-editable-header-cell-correctly-1-linux.png
deleted file mode 100644
index 1f4eeec9d..000000000
Binary files a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-renders-table-with-editable-header-cell-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-secondary-darkmode-renders-table-with-editable-header-cell-correctly-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-secondary-darkmode-renders-table-with-editable-header-cell-correctly-1-linux.png
new file mode 100644
index 000000000..1b3d3f237
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-secondary-darkmode-renders-table-with-editable-header-cell-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-secondary-lightmode-renders-table-with-editable-header-cell-correctly-1-linux.png b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-secondary-lightmode-renders-table-with-editable-header-cell-correctly-1-linux.png
new file mode 100644
index 000000000..e997516ef
Binary files /dev/null and b/packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts-snapshots/tds-table-column-filtering-secondary-lightmode-renders-table-with-editable-header-cell-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/default/table.e2e.ts b/packages/core/src/components/table/table/test/default/table.e2e.ts
index d3aabad51..9eaffba8d 100644
--- a/packages/core/src/components/table/table/test/default/table.e2e.ts
+++ b/packages/core/src/components/table/table/test/default/table.e2e.ts
@@ -1,27 +1,42 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/default/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-default';
 
-test.describe.parallel('tds-table-default', () => {
-  test('renders default table correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default table correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
 
-    /** Check screenshot diff */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /** Check screenshot diff */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('table has four columns', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('table has four columns', async ({ page }) => {
     const tableHeaderCells = page.locator('tds-header-cell');
     await expect(tableHeaderCells).toHaveCount(4);
   });
 
   test('columns are: Truck type, Driver name, Country, Mileage', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     /* Expect each header to be visible */
     await expect(page.getByText('Truck type')).toBeVisible();
     await expect(page.getByText('Driver name')).toBeVisible();
@@ -30,16 +45,12 @@ test.describe.parallel('tds-table-default', () => {
   });
 
   test('Row should contain the correct number of rows with', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     /* Expect the number of rows to be correct amount */
     const tableBodyRows = page.locator('tds-table-body-row');
     await expect(tableBodyRows).toHaveCount(6);
   });
 
   test('table has the correct text inside each cell', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     /* Checks all rows to see that they have the correct amount of tds-body-cells with values provided */
     const promises = [];
     for (let i = 1; i <= 8; i++) {
diff --git a/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-primary-darkmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-primary-darkmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..91805499e
Binary files /dev/null and b/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-primary-darkmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-primary-lightmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-primary-lightmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..a04465d89
Binary files /dev/null and b/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-primary-lightmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-renders-default-table-correctly-1-linux.png
deleted file mode 100644
index d484f826d..000000000
Binary files a/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-renders-default-table-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-secondary-darkmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-secondary-darkmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..74439f66f
Binary files /dev/null and b/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-secondary-darkmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-secondary-lightmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-secondary-lightmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..9ac5e34df
Binary files /dev/null and b/packages/core/src/components/table/table/test/default/table.e2e.ts-snapshots/tds-table-default-secondary-lightmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts
index bdee8c60e..9026e652b 100644
--- a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts
+++ b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts
@@ -1,22 +1,33 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/editing/body-input-wrapper/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-editable-cells fill';
 
-test.describe.parallel('tds-table-editable-cells fill', () => {
-  test('expect slotted inputs to persist inputed value', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    const inputfield = page.getByTestId('firstInput');
-    await inputfield.fill('Hello World!');
+    test('expect slotted inputs to persist inputed value', async ({ page }) => {
+      const inputfield = page.getByTestId('firstInput');
+      await inputfield.fill('Hello World!');
 
-    await inputfield.blur();
+      await inputfield.blur();
 
-    let value = await inputfield.inputValue();
+      let value = await inputfield.inputValue();
 
-    expect(value).toBe('Hello World!');
+      expect(value).toBe('Hello World!');
 
-    /* Check diff of screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
deleted file mode 100644
index 05fd4e0e7..000000000
Binary files a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-expect-slotted-inputs-to-persist-inputed-value-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-primary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-primary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
new file mode 100644
index 000000000..926581656
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-primary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-primary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-primary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
new file mode 100644
index 000000000..083009074
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-primary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-secondary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-secondary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
new file mode 100644
index 000000000..fe1bf701d
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-secondary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-secondary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-secondary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
new file mode 100644
index 000000000..044d74bee
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts-snapshots/tds-table-editable-cells-fill-secondary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts
index 2027dc56c..ea69111a5 100644
--- a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts
+++ b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts
@@ -1,23 +1,37 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/editing/body-input-wrapper/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-editable-cells focus';
 
-test.describe.parallel('tds-table-editable-cells focus', () => {
-  test('expect wrapper to effect slotted inputs style on focus', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    const inputfield = page.getByTestId('firstInput');
+    test('expect wrapper to effect slotted inputs style on focus', async ({ page }) => {
+      const inputfield = page.getByTestId('firstInput');
 
-    await inputfield.focus();
+      await inputfield.focus();
 
-    const color = await inputfield.evaluate((el) => {
-      return window.getComputedStyle(el).getPropertyValue('background-color');
-    });
+      // only check the color if no mode variant or mode is set:
+      if (!config) {
+        const color = await inputfield.evaluate((el) => {
+          return window.getComputedStyle(el).getPropertyValue('background-color');
+        });
 
-    expect(color).toBe('rgb(255, 255, 255)'); // white
+        expect(color).toBe('rgb(255, 255, 255)'); // white
+      }
 
-    /* Check diff of screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-expect-wrapper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-expect-wrapper-to-effect-slotted-inputs-style-on-focus-1-linux.png
deleted file mode 100644
index 99fb71677..000000000
Binary files a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-expect-wrapper-to-effect-slotted-inputs-style-on-focus-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-primary-darkmod-1a483-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-primary-darkmod-1a483-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png
new file mode 100644
index 000000000..c0a1ccbd3
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-primary-darkmod-1a483-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-primary-lightmo-e9c27-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-primary-lightmo-e9c27-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png
new file mode 100644
index 000000000..6b8ca804c
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-primary-lightmo-e9c27-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-secondary-darkm-e29ee-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-secondary-darkm-e29ee-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png
new file mode 100644
index 000000000..5dbb075c3
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-secondary-darkm-e29ee-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-secondary-light-b5085-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-secondary-light-b5085-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png
new file mode 100644
index 000000000..1db6d9fac
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-focus.e2e.ts-snapshots/tds-table-editable-cells-focus-secondary-light-b5085-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts
index 6b41d75b5..19c446d16 100644
--- a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts
+++ b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts
@@ -1,29 +1,47 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/editing/body-input-wrapper/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-editable-cells hover';
 
-test.describe.parallel('tds-table-editable-cells hover', () => {
-  test('expect wrapper to effect slotted inputs style on hover', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    const inputfield = page.getByTestId('firstInput');
+    test('expect wrapper to effect slotted inputs style on hover', async ({ page }) => {
+      const inputfield = page.getByTestId('firstInput');
 
-    await inputfield.hover();
+      await inputfield.hover();
 
-    const color = await inputfield.evaluate((el) => {
-      return window.getComputedStyle(el).getPropertyValue('background-color');
-    });
+      // only check the color if no mode variant or mode is set:
+      if (!config) {
+        const color = await inputfield.evaluate((el) => {
+          return window.getComputedStyle(el).getPropertyValue('background-color');
+        });
 
-    expect(color).toBe('rgba(13, 15, 19, 0.05)');
+        expect(color).toBe('rgba(13, 15, 19, 0.05)');
+      }
 
-    /* Check diff of screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
+});
 
-  test('expect slotted input to show pen icon on hover', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('expect slotted input to show pen icon on hover', async ({ page }) => {
     const inputfield = page.getByTestId('firstInput');
 
     await inputfield.hover();
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-expect-wrapper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-expect-wrapper-to-effect-slotted-inputs-style-on-hover-1-linux.png
deleted file mode 100644
index 16390541e..000000000
Binary files a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-expect-wrapper-to-effect-slotted-inputs-style-on-hover-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-primary-darkmod-ea13d-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-primary-darkmod-ea13d-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png
new file mode 100644
index 000000000..5842d1c5a
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-primary-darkmod-ea13d-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-primary-lightmo-07ecf-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-primary-lightmo-07ecf-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png
new file mode 100644
index 000000000..0f55231b1
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-primary-lightmo-07ecf-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-secondary-darkm-accd8-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-secondary-darkm-accd8-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png
new file mode 100644
index 000000000..1015d4596
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-secondary-darkm-accd8-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-secondary-light-1a02e-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-secondary-light-1a02e-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png
new file mode 100644
index 000000000..cd80cca7f
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-hover.e2e.ts-snapshots/tds-table-editable-cells-hover-secondary-light-1a02e-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts b/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts
index f97e5c2f6..91da36228 100644
--- a/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts
+++ b/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts
@@ -1,15 +1,27 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/editing/body-input-wrapper/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-editable-cells';
 
-test.describe.parallel('tds-table-editable-cells', () => {
-  test('renders table with editable cells correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Check diff of screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    test('renders table with editable cells correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
+
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-primary-darkmode-renders-table-with-editable-cells-correctly-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-primary-darkmode-renders-table-with-editable-cells-correctly-1-linux.png
new file mode 100644
index 000000000..1b9956bf6
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-primary-darkmode-renders-table-with-editable-cells-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-primary-lightmode-renders-table-with-editable-cells-correctly-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-primary-lightmode-renders-table-with-editable-cells-correctly-1-linux.png
new file mode 100644
index 000000000..874bda820
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-primary-lightmode-renders-table-with-editable-cells-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-renders-table-with-editable-cells-correctly-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-renders-table-with-editable-cells-correctly-1-linux.png
deleted file mode 100644
index 975e0d968..000000000
Binary files a/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-renders-table-with-editable-cells-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-secondary-darkmode-renders-table-with-editable-cells-correctly-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-secondary-darkmode-renders-table-with-editable-cells-correctly-1-linux.png
new file mode 100644
index 000000000..ab293ceb0
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-secondary-darkmode-renders-table-with-editable-cells-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-secondary-lightmode-renders-table-with-editable-cells-correctly-1-linux.png b/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-secondary-lightmode-renders-table-with-editable-cells-correctly-1-linux.png
new file mode 100644
index 000000000..e4d066dfb
Binary files /dev/null and b/packages/core/src/components/table/table/test/editing/body-input-wrapper/table.e2e.ts-snapshots/tds-table-editable-cells-secondary-lightmode-renders-table-with-editable-cells-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts
index b7537f121..d187b038a 100644
--- a/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts
+++ b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts
@@ -1,45 +1,65 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/expandable-row-expanded/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-expandable-row-expanded';
 
-test.describe.parallel('tds-table-expandable-row-expanded', () => {
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
+      await tableComponent.waitFor({ state: 'visible' });
+    });
+
+    test('first row is expanded', async ({ page }) => {
+      const tableBodyRowFirstInput = page.getByRole('cell').nth(1);
+      const tableBodyExpandableRowSlot = page.getByText(/Hello world 1/);
+      await expect(tableBodyRowFirstInput).toHaveCount(1);
+      await expect(tableBodyExpandableRowSlot).toHaveCount(1);
+      await expect(tableBodyExpandableRowSlot).toBeVisible();
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
+    });
+
+    test('click on expand-input -> should become unchecked for row-id 1', async ({ page }) => {
+      // Locate the expandable row with row-id="1"
+      const tableRow = page.locator('tds-table-body-row-expandable[row-id="1"]');
+      const expandInput = tableRow.locator('td > label > input[type="checkbox"]');
+      const tableBodyExpandableRowSlot = tableRow.locator('div[slot="expand-row"]');
+
+      // Click to collapse
+      await page.evaluate(
+        (checkbox) => (checkbox as HTMLElement).click(),
+        await expandInput.elementHandle(),
+      );
+      await page.waitForChanges(); // wait for the state change
+
+      // Check if the input is unchecked and the row is collapsed
+      const isCheckedAfter = await expandInput.isChecked();
+      expect(isCheckedAfter).toBe(false);
+      await expect(tableBodyExpandableRowSlot).toBeHidden();
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+
     const tableComponent = page.getByRole('table');
     await expect(tableComponent).toHaveCount(1);
     await tableComponent.waitFor({ state: 'visible' });
   });
 
-  test('first row is expanded', async ({ page }) => {
-    const tableBodyRowFirstInput = page.getByRole('cell').nth(1);
-    const tableBodyExpandableRowSlot = page.getByText(/Hello world 1/);
-    await expect(tableBodyRowFirstInput).toHaveCount(1);
-    await expect(tableBodyExpandableRowSlot).toHaveCount(1);
-    await expect(tableBodyExpandableRowSlot).toBeVisible();
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
-  });
-
-  test('click on expand-input -> should become unchecked for row-id 1', async ({ page }) => {
-    // Locate the expandable row with row-id="1"
-    const tableRow = page.locator('tds-table-body-row-expandable[row-id="1"]');
-    const expandInput = tableRow.locator('td > label > input[type="checkbox"]');
-    const tableBodyExpandableRowSlot = tableRow.locator('div[slot="expand-row"]');
-
-    // Click to collapse
-    await page.evaluate(
-      (checkbox) => (checkbox as HTMLElement).click(),
-      await expandInput.elementHandle(),
-    );
-    await page.waitForChanges(); // wait for the state change
-
-    // Check if the input is unchecked and the row is collapsed
-    const isCheckedAfter = await expandInput.isChecked();
-    expect(isCheckedAfter).toBe(false);
-    await expect(tableBodyExpandableRowSlot).toBeHidden();
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
   test('has a set rowId attribute', async ({ page }) => {
     const tableRow = page.locator('tds-table-body-row-expandable').first();
     const rowId = await tableRow.getAttribute('row-id');
diff --git a/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-click-on-expand-input---should-become-unchecked-for-row-id-1-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-click-on-expand-input---should-become-unchecked-for-row-id-1-1-linux.png
deleted file mode 100644
index f33d4e368..000000000
Binary files a/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-click-on-expand-input---should-become-unchecked-for-row-id-1-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-first-row-is-expanded-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-first-row-is-expanded-1-linux.png
deleted file mode 100644
index a73515dea..000000000
Binary files a/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-first-row-is-expanded-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-primary-dark-bf48f-input---should-become-unchecked-for-row-id-1-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-primary-dark-bf48f-input---should-become-unchecked-for-row-id-1-1-linux.png
new file mode 100644
index 000000000..5e8c93d84
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-primary-dark-bf48f-input---should-become-unchecked-for-row-id-1-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-primary-darkmode-first-row-is-expanded-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-primary-darkmode-first-row-is-expanded-1-linux.png
new file mode 100644
index 000000000..5945b1007
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-primary-darkmode-first-row-is-expanded-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-primary-ligh-faadb-input---should-become-unchecked-for-row-id-1-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-primary-ligh-faadb-input---should-become-unchecked-for-row-id-1-1-linux.png
new file mode 100644
index 000000000..93acfaefe
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-primary-ligh-faadb-input---should-become-unchecked-for-row-id-1-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-primary-lightmode-first-row-is-expanded-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-primary-lightmode-first-row-is-expanded-1-linux.png
new file mode 100644
index 000000000..32cf54728
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-primary-lightmode-first-row-is-expanded-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-secondary-da-94851-input---should-become-unchecked-for-row-id-1-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-secondary-da-94851-input---should-become-unchecked-for-row-id-1-1-linux.png
new file mode 100644
index 000000000..ca163501c
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-secondary-da-94851-input---should-become-unchecked-for-row-id-1-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-secondary-darkmode-first-row-is-expanded-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-secondary-darkmode-first-row-is-expanded-1-linux.png
new file mode 100644
index 000000000..d47adc064
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-secondary-darkmode-first-row-is-expanded-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-secondary-li-d52ad-input---should-become-unchecked-for-row-id-1-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-secondary-li-d52ad-input---should-become-unchecked-for-row-id-1-1-linux.png
new file mode 100644
index 000000000..a6971e3a5
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-secondary-li-d52ad-input---should-become-unchecked-for-row-id-1-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-secondary-lightmode-first-row-is-expanded-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-secondary-lightmode-first-row-is-expanded-1-linux.png
new file mode 100644
index 000000000..6a6755a45
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-expanded/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-expanded-secondary-lightmode-first-row-is-expanded-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts
index eaf546792..65a81e1ac 100644
--- a/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts
+++ b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts
@@ -1,7 +1,14 @@
 import { E2EPage, test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/expandable-row-methods/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-expandable-row-methods';
 
 const click = async (page: E2EPage, id: string) => {
   const expandButton = page.locator(id);
@@ -11,22 +18,24 @@ const click = async (page: E2EPage, id: string) => {
   await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
 };
 
-test.describe('tds-table-expandable-row-methods', () => {
-  // Setup beforeEach hook
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
-    await tableComponent.waitFor({ state: 'visible' });
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
 
-  // Test for clicking the expand button
-  test('click expand button', async ({ page }) => {
-    await click(page, '#expand-button');
-  });
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
+      await tableComponent.waitFor({ state: 'visible' });
+    });
+
+    // Test for clicking the expand button
+    test('click expand button', async ({ page }) => {
+      await click(page, '#expand-button');
+    });
 
-  // Test for clicking the collapse button
-  test('click collapse button', async ({ page }) => {
-    await click(page, '#collapse-button');
+    // Test for clicking the collapse button
+    test('click collapse button', async ({ page }) => {
+      await click(page, '#collapse-button');
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-click-collapse-button-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-click-collapse-button-1-linux.png
deleted file mode 100644
index 4a1f4f995..000000000
Binary files a/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-click-collapse-button-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-click-expand-button-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-click-expand-button-1-linux.png
deleted file mode 100644
index 426313527..000000000
Binary files a/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-click-expand-button-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-primary-darkmode-click-collapse-button-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-primary-darkmode-click-collapse-button-1-linux.png
new file mode 100644
index 000000000..dd862fa23
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-primary-darkmode-click-collapse-button-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-primary-darkmode-click-expand-button-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-primary-darkmode-click-expand-button-1-linux.png
new file mode 100644
index 000000000..3e6a5253c
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-primary-darkmode-click-expand-button-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-primary-lightmode-click-collapse-button-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-primary-lightmode-click-collapse-button-1-linux.png
new file mode 100644
index 000000000..75b586ae0
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-primary-lightmode-click-collapse-button-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-primary-lightmode-click-expand-button-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-primary-lightmode-click-expand-button-1-linux.png
new file mode 100644
index 000000000..3905ba22d
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-primary-lightmode-click-expand-button-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-secondary-darkmode-click-collapse-button-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-secondary-darkmode-click-collapse-button-1-linux.png
new file mode 100644
index 000000000..1955a2eaa
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-secondary-darkmode-click-collapse-button-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-secondary-darkmode-click-expand-button-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-secondary-darkmode-click-expand-button-1-linux.png
new file mode 100644
index 000000000..a80e58b7f
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-secondary-darkmode-click-expand-button-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-secondary-lightmode-click-collapse-button-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-secondary-lightmode-click-collapse-button-1-linux.png
new file mode 100644
index 000000000..cb095a6b8
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-secondary-lightmode-click-collapse-button-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-secondary-lightmode-click-expand-button-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-secondary-lightmode-click-expand-button-1-linux.png
new file mode 100644
index 000000000..c4c5f5ee3
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-methods/methods.e2e.ts-snapshots/tds-table-expandable-row-methods-secondary-lightmode-click-expand-button-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts b/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts
index 47bead34c..6fe4f8bf3 100644
--- a/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts
+++ b/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts
@@ -1,27 +1,38 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/expandable-row-part-selector/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-expandable-row-part-selector';
 
-test.describe.parallel('tds-table-expandable-row-part-selector', () => {
-  test('part selector is passing on correct background color', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    // Find the table and make sure it is visible
-    const table = page.locator('tds-table');
-    await table.waitFor({ state: 'visible' });
+    test('part selector is passing on correct background color', async ({ page }) => {
+      // Find the table and make sure it is visible
+      const table = page.locator('tds-table');
+      await table.waitFor({ state: 'visible' });
 
-    // Find the row, make sure it is visible and has the correct background color
-    const row = table.locator('tds-table-body-row-expandable:first-child tr:nth-child(1)');
-    await row.waitFor({ state: 'visible' });
-    await expect(row).toHaveCSS('background-color', 'rgb(250, 219, 220)');
+      // Find the row, make sure it is visible and has the correct background color
+      const row = table.locator('tds-table-body-row-expandable:first-child tr:nth-child(1)');
+      await row.waitFor({ state: 'visible' });
+      await expect(row).toHaveCSS('background-color', 'rgb(250, 219, 220)');
 
-    // Find the expandable row, make sure it is visible and has the correct background color
-    const expandRow = table.locator('tds-table-body-row-expandable:first-child tr:nth-child(2)');
-    await expandRow.waitFor({ state: 'visible' });
-    await expect(expandRow).toHaveCSS('background-color', 'rgb(202, 235, 208)');
+      // Find the expandable row, make sure it is visible and has the correct background color
+      const expandRow = table.locator('tds-table-body-row-expandable:first-child tr:nth-child(2)');
+      await expandRow.waitFor({ state: 'visible' });
+      await expect(expandRow).toHaveCSS('background-color', 'rgb(202, 235, 208)');
 
-    // Take screenshot
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      // Take screenshot
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-part-selector-is-passing-on-correct-background-color-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-part-selector-is-passing-on-correct-background-color-1-linux.png
deleted file mode 100644
index 7848cf163..000000000
Binary files a/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-part-selector-is-passing-on-correct-background-color-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-primary-6f3cc-lector-is-passing-on-correct-background-color-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-primary-6f3cc-lector-is-passing-on-correct-background-color-1-linux.png
new file mode 100644
index 000000000..21462e0ac
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-primary-6f3cc-lector-is-passing-on-correct-background-color-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-primary-87f61-lector-is-passing-on-correct-background-color-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-primary-87f61-lector-is-passing-on-correct-background-color-1-linux.png
new file mode 100644
index 000000000..0dc277973
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-primary-87f61-lector-is-passing-on-correct-background-color-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-seconda-9fa9d-lector-is-passing-on-correct-background-color-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-seconda-9fa9d-lector-is-passing-on-correct-background-color-1-linux.png
new file mode 100644
index 000000000..c137c96d3
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-seconda-9fa9d-lector-is-passing-on-correct-background-color-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-seconda-e5f72-lector-is-passing-on-correct-background-color-1-linux.png b/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-seconda-e5f72-lector-is-passing-on-correct-background-color-1-linux.png
new file mode 100644
index 000000000..08e87b09c
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row-part-selector/expandable-row-expanded.e2e.ts-snapshots/tds-table-expandable-row-part-selector-seconda-e5f72-lector-is-passing-on-correct-background-color-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts b/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts
index 847992741..06b579872 100644
--- a/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts
+++ b/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts
@@ -1,21 +1,33 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/expandable-row/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-expandable-row-first';
 
-test.describe('tds-table-expandable-row-first', () => {
-  test('under first row opened expanded row with text "Hello world 1"', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableBodyRowFirstInput = page.getByRole('cell').nth(1);
-    const tableBodyExpandableRowSlot = page.getByText(/Hello world 1/);
-    await expect(tableBodyRowFirstInput).toHaveCount(1);
-    await expect(tableBodyExpandableRowSlot).toHaveCount(1);
-    await expect(tableBodyExpandableRowSlot).toBeHidden();
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    await tableBodyRowFirstInput.click();
-    await expect(tableBodyExpandableRowSlot).toBeVisible();
+    test('under first row opened expanded row with text "Hello world 1"', async ({ page }) => {
+      const tableBodyRowFirstInput = page.getByRole('cell').nth(1);
+      const tableBodyExpandableRowSlot = page.getByText(/Hello world 1/);
+      await expect(tableBodyRowFirstInput).toHaveCount(1);
+      await expect(tableBodyExpandableRowSlot).toHaveCount(1);
+      await expect(tableBodyExpandableRowSlot).toBeHidden();
 
-    /* check input screenshot diff */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
+      await tableBodyRowFirstInput.click();
+      await expect(tableBodyExpandableRowSlot).toBeVisible();
+
+      /* check input screenshot diff */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-primary-darkmod-1a2b7-opened-expanded-row-with-text-Hello-world-1-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-primary-darkmod-1a2b7-opened-expanded-row-with-text-Hello-world-1-1-linux.png
new file mode 100644
index 000000000..563a65aff
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-primary-darkmod-1a2b7-opened-expanded-row-with-text-Hello-world-1-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-primary-lightmo-216c9-opened-expanded-row-with-text-Hello-world-1-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-primary-lightmo-216c9-opened-expanded-row-with-text-Hello-world-1-1-linux.png
new file mode 100644
index 000000000..e47be3471
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-primary-lightmo-216c9-opened-expanded-row-with-text-Hello-world-1-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-secondary-darkm-1f66b-opened-expanded-row-with-text-Hello-world-1-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-secondary-darkm-1f66b-opened-expanded-row-with-text-Hello-world-1-1-linux.png
new file mode 100644
index 000000000..afe01547a
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-secondary-darkm-1f66b-opened-expanded-row-with-text-Hello-world-1-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-secondary-light-e27d2-opened-expanded-row-with-text-Hello-world-1-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-secondary-light-e27d2-opened-expanded-row-with-text-Hello-world-1-1-linux.png
new file mode 100644
index 000000000..0a708a01f
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-secondary-light-e27d2-opened-expanded-row-with-text-Hello-world-1-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-under-first-row-opened-expanded-row-with-text-Hello-world-1-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-under-first-row-opened-expanded-row-with-text-Hello-world-1-1-linux.png
deleted file mode 100644
index 4214ad223..000000000
Binary files a/packages/core/src/components/table/table/test/expandable-row/interaction-1.e2e.ts-snapshots/tds-table-expandable-row-first-under-first-row-opened-expanded-row-with-text-Hello-world-1-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts b/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts
index 7cca5833c..0a44c4bc4 100644
--- a/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts
+++ b/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts
@@ -1,21 +1,33 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/expandable-row/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-expandable-row-second';
 
-test.describe('tds-table-expandable-row-second', () => {
-  test('under second row opened expanded row with text "Hello to you too"', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableBodyRowSecondInput = page.getByRole('cell').nth(2);
-    const tableBodyExpandableRowSlot = page.getByText(/Hello to you too/);
-    await expect(tableBodyRowSecondInput).toHaveCount(1);
-    await expect(tableBodyExpandableRowSlot).toHaveCount(1);
-    await expect(tableBodyExpandableRowSlot).toBeHidden();
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    await tableBodyRowSecondInput.click();
-    await expect(tableBodyExpandableRowSlot).toBeVisible();
+    test('under second row opened expanded row with text "Hello to you too"', async ({ page }) => {
+      const tableBodyRowSecondInput = page.getByRole('cell').nth(2);
+      const tableBodyExpandableRowSlot = page.getByText(/Hello to you too/);
+      await expect(tableBodyRowSecondInput).toHaveCount(1);
+      await expect(tableBodyExpandableRowSlot).toHaveCount(1);
+      await expect(tableBodyExpandableRowSlot).toBeHidden();
 
-    /* check input screenshot diff */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
+      await tableBodyRowSecondInput.click();
+      await expect(tableBodyExpandableRowSlot).toBeVisible();
+
+      /* check input screenshot diff */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-primary-darkmo-98f84-ned-expanded-row-with-text-Hello-to-you-too-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-primary-darkmo-98f84-ned-expanded-row-with-text-Hello-to-you-too-1-linux.png
new file mode 100644
index 000000000..fd3a303e7
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-primary-darkmo-98f84-ned-expanded-row-with-text-Hello-to-you-too-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-primary-lightm-29f60-ned-expanded-row-with-text-Hello-to-you-too-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-primary-lightm-29f60-ned-expanded-row-with-text-Hello-to-you-too-1-linux.png
new file mode 100644
index 000000000..263f8acf2
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-primary-lightm-29f60-ned-expanded-row-with-text-Hello-to-you-too-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-secondary-dark-d8d8c-ned-expanded-row-with-text-Hello-to-you-too-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-secondary-dark-d8d8c-ned-expanded-row-with-text-Hello-to-you-too-1-linux.png
new file mode 100644
index 000000000..fe92ee25d
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-secondary-dark-d8d8c-ned-expanded-row-with-text-Hello-to-you-too-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-secondary-ligh-7413e-ned-expanded-row-with-text-Hello-to-you-too-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-secondary-ligh-7413e-ned-expanded-row-with-text-Hello-to-you-too-1-linux.png
new file mode 100644
index 000000000..04514ed89
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-secondary-ligh-7413e-ned-expanded-row-with-text-Hello-to-you-too-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-under-second-row-opened-expanded-row-with-text-Hello-to-you-too-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-under-second-row-opened-expanded-row-with-text-Hello-to-you-too-1-linux.png
deleted file mode 100644
index c1e8cbaee..000000000
Binary files a/packages/core/src/components/table/table/test/expandable-row/interaction-2.e2e.ts-snapshots/tds-table-expandable-row-second-under-second-row-opened-expanded-row-with-text-Hello-to-you-too-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts b/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts
index cdab99d3d..dbc07065f 100644
--- a/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts
+++ b/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts
@@ -1,23 +1,35 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/expandable-row/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-expandable-row-third';
 
-test.describe('tds-table-expandable-row-third', () => {
-  test('under third row opened expanded row with a button with text "Call to action"', async ({
-    page,
-  }) => {
-    await page.goto(componentTestPath);
-    const tableBodyRowThirdInput = page.getByRole('cell').nth(3);
-    const tableBodyRowButton = page.getByText(/Call to action/);
-    await expect(tableBodyRowThirdInput).toHaveCount(1);
-    await expect(tableBodyRowButton).toHaveCount(1);
-    await expect(tableBodyRowButton).toBeHidden();
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    await tableBodyRowThirdInput.click();
-    await expect(tableBodyRowButton).toBeVisible();
+    test('under third row opened expanded row with a button with text "Call to action"', async ({
+      page,
+    }) => {
+      const tableBodyRowThirdInput = page.getByRole('cell').nth(3);
+      const tableBodyRowButton = page.getByText(/Call to action/);
+      await expect(tableBodyRowThirdInput).toHaveCount(1);
+      await expect(tableBodyRowButton).toHaveCount(1);
+      await expect(tableBodyRowButton).toBeHidden();
 
-    /* check input screenshot diff */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
+      await tableBodyRowThirdInput.click();
+      await expect(tableBodyRowButton).toBeVisible();
+
+      /* check input screenshot diff */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-primary-darkmod-3c549--row-with-a-button-with-text-Call-to-action-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-primary-darkmod-3c549--row-with-a-button-with-text-Call-to-action-1-linux.png
new file mode 100644
index 000000000..54618fd56
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-primary-darkmod-3c549--row-with-a-button-with-text-Call-to-action-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-primary-lightmo-b9273--row-with-a-button-with-text-Call-to-action-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-primary-lightmo-b9273--row-with-a-button-with-text-Call-to-action-1-linux.png
new file mode 100644
index 000000000..29a855adf
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-primary-lightmo-b9273--row-with-a-button-with-text-Call-to-action-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-secondary-darkm-25e6f--row-with-a-button-with-text-Call-to-action-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-secondary-darkm-25e6f--row-with-a-button-with-text-Call-to-action-1-linux.png
new file mode 100644
index 000000000..847e611a6
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-secondary-darkm-25e6f--row-with-a-button-with-text-Call-to-action-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-secondary-light-1dd2e--row-with-a-button-with-text-Call-to-action-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-secondary-light-1dd2e--row-with-a-button-with-text-Call-to-action-1-linux.png
new file mode 100644
index 000000000..07b021a39
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-secondary-light-1dd2e--row-with-a-button-with-text-Call-to-action-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-under-third-row-38f81--row-with-a-button-with-text-Call-to-action-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-under-third-row-38f81--row-with-a-button-with-text-Call-to-action-1-linux.png
deleted file mode 100644
index 57937efdf..000000000
Binary files a/packages/core/src/components/table/table/test/expandable-row/interaction-3.e2e.ts-snapshots/tds-table-expandable-row-third-under-third-row-38f81--row-with-a-button-with-text-Call-to-action-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/interaction-4.e2e.ts b/packages/core/src/components/table/table/test/expandable-row/interaction-4.e2e.ts
index 10d71c7e8..6e960e54b 100644
--- a/packages/core/src/components/table/table/test/expandable-row/interaction-4.e2e.ts
+++ b/packages/core/src/components/table/table/test/expandable-row/interaction-4.e2e.ts
@@ -2,12 +2,16 @@ import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
 const componentTestPath = 'src/components/table/table/test/expandable-row/index.html';
+const testDescription = 'tds-table-expandable-row-double-click-first';
+
+test.describe.parallel(testDescription, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
 
-test.describe('tds-table-expandable-row-double-click-first', () => {
   test('double click on expand button in first row -> expanded row should be closed', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const tableBodyRowFirstInput = page.getByRole('cell').nth(1);
     await tableBodyRowFirstInput.dblclick();
 
diff --git a/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts b/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts
index d2d03183f..ac50342f1 100644
--- a/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts
+++ b/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts
@@ -1,23 +1,43 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/expandable-row/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-expandable-row';
 
-test.describe.parallel('tds-table-expandable-row', () => {
-  // Inject beforeEach hook here
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
+      // Wait for the component to be visible
+      await tableComponent.waitFor({ state: 'visible' });
+    });
+
+    test('render expandable-row table correctly', async ({ page }) => {
+      /* check of diff in component screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+
     const tableComponent = page.getByRole('table');
     await expect(tableComponent).toHaveCount(1);
     // Wait for the component to be visible
     await tableComponent.waitFor({ state: 'visible' });
   });
 
-  test('render expandable-row table correctly', async ({ page }) => {
-    /* check of diff in component screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
-  });
-
   test('each row has expand checkbox', async ({ page }) => {
     const tableBodyRowsExpandInput = page.getByRole('cell').getByRole('checkbox');
     await expect(tableBodyRowsExpandInput).toHaveCount(3);
diff --git a/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts-snapshots/tds-table-expandable-row-primary-darkmode-render-expandable-row-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts-snapshots/tds-table-expandable-row-primary-darkmode-render-expandable-row-table-correctly-1-linux.png
new file mode 100644
index 000000000..5e8c93d84
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts-snapshots/tds-table-expandable-row-primary-darkmode-render-expandable-row-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts-snapshots/tds-table-expandable-row-primary-lightmode-render-expandable-row-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts-snapshots/tds-table-expandable-row-primary-lightmode-render-expandable-row-table-correctly-1-linux.png
new file mode 100644
index 000000000..931afcfcc
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts-snapshots/tds-table-expandable-row-primary-lightmode-render-expandable-row-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts-snapshots/tds-table-expandable-row-secondary-darkmode-render-expandable-row-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts-snapshots/tds-table-expandable-row-secondary-darkmode-render-expandable-row-table-correctly-1-linux.png
new file mode 100644
index 000000000..ca163501c
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts-snapshots/tds-table-expandable-row-secondary-darkmode-render-expandable-row-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts-snapshots/tds-table-expandable-row-secondary-lightmode-render-expandable-row-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts-snapshots/tds-table-expandable-row-secondary-lightmode-render-expandable-row-table-correctly-1-linux.png
new file mode 100644
index 000000000..a6971e3a5
Binary files /dev/null and b/packages/core/src/components/table/table/test/expandable-row/table.e2e.ts-snapshots/tds-table-expandable-row-secondary-lightmode-render-expandable-row-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts
index 297f1ae34..fe46313a1 100644
--- a/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts
+++ b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts
@@ -1,38 +1,49 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/filtering/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-search';
 
-test.describe.parallel('tds-table-search', () => {
-  test('look for textbox and click it', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tdsTableToolbarSearchInput = page.getByRole('textbox');
-    await tdsTableToolbarSearchInput.click();
-    await expect(tdsTableToolbarSearchInput).toHaveCSS('width', '208px');
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Check diff of screenshot after click */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
-  });
+    test('look for textbox and click it', async ({ page }) => {
+      const tdsTableToolbarSearchInput = page.getByRole('textbox');
+      await tdsTableToolbarSearchInput.click();
+      await expect(tdsTableToolbarSearchInput).toHaveCSS('width', '208px');
+
+      /* Check diff of screenshot after click */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
 
-  test('clicking on search button opens field for entering data', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tdsTableToolbarSearchInput = page.getByRole('textbox');
-    await expect(tdsTableToolbarSearchInput).toHaveCount(1);
+    test('clicking on search button opens field for entering data', async ({ page }) => {
+      const tdsTableToolbarSearchInput = page.getByRole('textbox');
+      await expect(tdsTableToolbarSearchInput).toHaveCount(1);
 
-    /* Click on search button, make sure input expands and it is visible. 
+      /* Click on search button, make sure input expands and it is visible. 
     Input text and make sure it is filled + make sure active class is added to it. 
     We do all of this to make sure the searchbar is opened and ready to use. 
     That increases chances of getting the proper screenshot */
-    await tdsTableToolbarSearchInput.click();
-    await expect(tdsTableToolbarSearchInput).toHaveCSS('width', '208px');
-    await expect(tdsTableToolbarSearchInput).toBeVisible();
-    await tdsTableToolbarSearchInput.fill('Some test text');
+      await tdsTableToolbarSearchInput.click();
+      await expect(tdsTableToolbarSearchInput).toHaveCSS('width', '208px');
+      await expect(tdsTableToolbarSearchInput).toBeVisible();
+      await tdsTableToolbarSearchInput.fill('Some test text');
 
-    await expect(tdsTableToolbarSearchInput).toHaveValue('Some test text');
-    const activeStateClasses = page.locator('tds-table .tds-table__searchbar--active');
-    expect(activeStateClasses).toBeTruthy();
+      await expect(tdsTableToolbarSearchInput).toHaveValue('Some test text');
+      const activeStateClasses = page.locator('tds-table .tds-table__searchbar--active');
+      expect(activeStateClasses).toBeTruthy();
 
-    /* Check diff of screenshot after filled */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+      /* Check diff of screenshot after filled */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-clicking-on-search-button-opens-field-for-entering-data-1-linux.png b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-clicking-on-search-button-opens-field-for-entering-data-1-linux.png
deleted file mode 100644
index 7bf281964..000000000
Binary files a/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-clicking-on-search-button-opens-field-for-entering-data-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-look-for-textbox-and-click-it-1-linux.png b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-look-for-textbox-and-click-it-1-linux.png
deleted file mode 100644
index 5660fed6b..000000000
Binary files a/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-look-for-textbox-and-click-it-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-primary-darkmode-clicking-on-search-button-opens-field-for-entering-data-1-linux.png b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-primary-darkmode-clicking-on-search-button-opens-field-for-entering-data-1-linux.png
new file mode 100644
index 000000000..d278e2624
Binary files /dev/null and b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-primary-darkmode-clicking-on-search-button-opens-field-for-entering-data-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-primary-darkmode-look-for-textbox-and-click-it-1-linux.png b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-primary-darkmode-look-for-textbox-and-click-it-1-linux.png
new file mode 100644
index 000000000..da8160039
Binary files /dev/null and b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-primary-darkmode-look-for-textbox-and-click-it-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-primary-lightmode-clicking-on-search-button-opens-field-for-entering-data-1-linux.png b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-primary-lightmode-clicking-on-search-button-opens-field-for-entering-data-1-linux.png
new file mode 100644
index 000000000..28ede716b
Binary files /dev/null and b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-primary-lightmode-clicking-on-search-button-opens-field-for-entering-data-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-primary-lightmode-look-for-textbox-and-click-it-1-linux.png b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-primary-lightmode-look-for-textbox-and-click-it-1-linux.png
new file mode 100644
index 000000000..89521df72
Binary files /dev/null and b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-primary-lightmode-look-for-textbox-and-click-it-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-secondary-darkmode-clicking-on-search-button-opens-field-for-entering-data-1-linux.png b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-secondary-darkmode-clicking-on-search-button-opens-field-for-entering-data-1-linux.png
new file mode 100644
index 000000000..5f844e7ed
Binary files /dev/null and b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-secondary-darkmode-clicking-on-search-button-opens-field-for-entering-data-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-secondary-darkmode-look-for-textbox-and-click-it-1-linux.png b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-secondary-darkmode-look-for-textbox-and-click-it-1-linux.png
new file mode 100644
index 000000000..69c378e94
Binary files /dev/null and b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-secondary-darkmode-look-for-textbox-and-click-it-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-secondary-lightmode-clicking-on-search-button-opens-field-for-entering-data-1-linux.png b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-secondary-lightmode-clicking-on-search-button-opens-field-for-entering-data-1-linux.png
new file mode 100644
index 000000000..f8c0c70db
Binary files /dev/null and b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-secondary-lightmode-clicking-on-search-button-opens-field-for-entering-data-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-secondary-lightmode-look-for-textbox-and-click-it-1-linux.png b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-secondary-lightmode-look-for-textbox-and-click-it-1-linux.png
new file mode 100644
index 000000000..222c778a0
Binary files /dev/null and b/packages/core/src/components/table/table/test/filtering/interaction.e2e.ts-snapshots/tds-table-search-secondary-lightmode-look-for-textbox-and-click-it-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/filtering/table.e2e.ts b/packages/core/src/components/table/table/test/filtering/table.e2e.ts
index ac889d558..da0de10b6 100644
--- a/packages/core/src/components/table/table/test/filtering/table.e2e.ts
+++ b/packages/core/src/components/table/table/test/filtering/table.e2e.ts
@@ -1,21 +1,37 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/filtering/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-filtering';
 
-test.describe.parallel('tds-table-filtering', () => {
-  test('renders filtering table correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders filtering table correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
 
-    /* Check diff of screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
+});
 
-  test('table has header "Filter"', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('table has header "Filter"', async ({ page }) => {
     /* Search for header by text and see if it exists */
     const tdsTableToolbarCaption = page.getByText('Filter');
     await expect(tdsTableToolbarCaption).toHaveCount(1);
@@ -23,7 +39,6 @@ test.describe.parallel('tds-table-filtering', () => {
   });
 
   test('search button inside the header exists', async ({ page }) => {
-    await page.goto(componentTestPath);
     const tdsTableToolbarSearchIcon = page.getByRole('img');
     await expect(tdsTableToolbarSearchIcon).toHaveCount(1);
     await expect(tdsTableToolbarSearchIcon).toBeVisible();
diff --git a/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-primary-darkmode-renders-filtering-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-primary-darkmode-renders-filtering-table-correctly-1-linux.png
new file mode 100644
index 000000000..ef7d3cf6d
Binary files /dev/null and b/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-primary-darkmode-renders-filtering-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-primary-lightmode-renders-filtering-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-primary-lightmode-renders-filtering-table-correctly-1-linux.png
new file mode 100644
index 000000000..28751931e
Binary files /dev/null and b/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-primary-lightmode-renders-filtering-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-renders-filtering-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-renders-filtering-table-correctly-1-linux.png
deleted file mode 100644
index 9b12cdb4b..000000000
Binary files a/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-renders-filtering-table-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-secondary-darkmode-renders-filtering-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-secondary-darkmode-renders-filtering-table-correctly-1-linux.png
new file mode 100644
index 000000000..83a94e44c
Binary files /dev/null and b/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-secondary-darkmode-renders-filtering-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-secondary-lightmode-renders-filtering-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-secondary-lightmode-renders-filtering-table-correctly-1-linux.png
new file mode 100644
index 000000000..5b86d7c23
Binary files /dev/null and b/packages/core/src/components/table/table/test/filtering/table.e2e.ts-snapshots/tds-table-filtering-secondary-lightmode-renders-filtering-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts
index f905d7003..813101386 100644
--- a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts
+++ b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts
@@ -1,27 +1,65 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/multiselect/default/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-multiselect';
 
-test.describe.parallel('tds-table-multiselect', () => {
-  test('renders multiselect table correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders multiselect table correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
+
+      /* Check diff on screenshot for component */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('can check every checkbox in the table', async ({ page }) => {
+      const tableCheckboxes = page.getByRole('cell');
+      await expect(tableCheckboxes).toHaveCount(5);
+
+      const myEventSpyAll = await page.spyOnEvent('tdsSelectAll');
+      const myEventSpy = await page.spyOnEvent('tdsSelect');
 
-    /* Check diff on screenshot for component */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Click each one */
+      await tableCheckboxes.first().click();
+      await tableCheckboxes.nth(1).click();
+      await tableCheckboxes.nth(2).click();
+      await tableCheckboxes.nth(3).click();
+      await tableCheckboxes.last().click();
+
+      /* check so correct events have been called */
+      expect(myEventSpyAll).toHaveReceivedEventTimes(1);
+      expect(myEventSpy).toHaveReceivedEventTimes(4);
+
+      /* Check diff on screenshot for component */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('table header contains checkbox', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('table header contains checkbox', async ({ page }) => {
     const tableHeaderCheckbox = page.getByRole('checkbox').first();
     await expect(tableHeaderCheckbox).toHaveCount(1);
     await expect(tableHeaderCheckbox).toBeVisible();
   });
 
   test('row should contain the correct number of checkboxes in each row', async ({ page }) => {
-    await page.goto(componentTestPath);
     const tableBodyRowCheckboxes = page.getByRole('checkbox');
     await expect(tableBodyRowCheckboxes).toHaveCount(5);
 
@@ -32,27 +70,4 @@ test.describe.parallel('tds-table-multiselect', () => {
     }
     await Promise.all(promises);
   });
-
-  test('can check every checkbox in the table', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableCheckboxes = page.getByRole('cell');
-    await expect(tableCheckboxes).toHaveCount(5);
-
-    const myEventSpyAll = await page.spyOnEvent('tdsSelectAll');
-    const myEventSpy = await page.spyOnEvent('tdsSelect');
-
-    /* Click each one */
-    await tableCheckboxes.first().click();
-    await tableCheckboxes.nth(1).click();
-    await tableCheckboxes.nth(2).click();
-    await tableCheckboxes.nth(3).click();
-    await tableCheckboxes.last().click();
-
-    /* check so correct events have been called */
-    expect(myEventSpyAll).toHaveReceivedEventTimes(1);
-    expect(myEventSpy).toHaveReceivedEventTimes(4);
-
-    /* Check diff on screenshot for component */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
 });
diff --git a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-can-check-every-checkbox-in-the-table-1-linux.png b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-can-check-every-checkbox-in-the-table-1-linux.png
deleted file mode 100644
index 9bc638036..000000000
Binary files a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-can-check-every-checkbox-in-the-table-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-primary-darkmode-can-check-every-checkbox-in-the-table-1-linux.png b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-primary-darkmode-can-check-every-checkbox-in-the-table-1-linux.png
new file mode 100644
index 000000000..e6596da58
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-primary-darkmode-can-check-every-checkbox-in-the-table-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-primary-darkmode-renders-multiselect-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-primary-darkmode-renders-multiselect-table-correctly-1-linux.png
new file mode 100644
index 000000000..640b2dc1f
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-primary-darkmode-renders-multiselect-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-primary-lightmode-can-check-every-checkbox-in-the-table-1-linux.png b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-primary-lightmode-can-check-every-checkbox-in-the-table-1-linux.png
new file mode 100644
index 000000000..3657e8678
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-primary-lightmode-can-check-every-checkbox-in-the-table-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-primary-lightmode-renders-multiselect-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-primary-lightmode-renders-multiselect-table-correctly-1-linux.png
new file mode 100644
index 000000000..4fea4383d
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-primary-lightmode-renders-multiselect-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-renders-multiselect-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-renders-multiselect-table-correctly-1-linux.png
deleted file mode 100644
index 977f688fb..000000000
Binary files a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-renders-multiselect-table-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-secondary-darkmode-can-check-every-checkbox-in-the-table-1-linux.png b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-secondary-darkmode-can-check-every-checkbox-in-the-table-1-linux.png
new file mode 100644
index 000000000..108bbe41a
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-secondary-darkmode-can-check-every-checkbox-in-the-table-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-secondary-darkmode-renders-multiselect-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-secondary-darkmode-renders-multiselect-table-correctly-1-linux.png
new file mode 100644
index 000000000..71fb79481
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-secondary-darkmode-renders-multiselect-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-secondary-lightmode-can-check-every-checkbox-in-the-table-1-linux.png b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-secondary-lightmode-can-check-every-checkbox-in-the-table-1-linux.png
new file mode 100644
index 000000000..e56e089a3
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-secondary-lightmode-can-check-every-checkbox-in-the-table-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-secondary-lightmode-renders-multiselect-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-secondary-lightmode-renders-multiselect-table-correctly-1-linux.png
new file mode 100644
index 000000000..b97604a2e
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/default/table.e2e.ts-snapshots/tds-table-multiselect-secondary-lightmode-renders-multiselect-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts
index 7a6dfbe94..a1c49a57c 100644
--- a/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts
+++ b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts
@@ -1,27 +1,65 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/multiselect/disabled-rows/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-multiselect-disabled';
 
-test.describe.parallel('tds-table-multiselect-disabled', () => {
-  test('renders multiselect table correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders multiselect table correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
+
+      /* Check diff on screenshot for component */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('can check enabled checkbox in the table', async ({ page }) => {
+      const tableCheckboxes = page.getByRole('cell');
+      await expect(tableCheckboxes).toHaveCount(5);
+
+      const myEventSpyAll = await page.spyOnEvent('tdsSelectAll');
+      const myEventSpy = await page.spyOnEvent('tdsSelect');
 
-    /* Check diff on screenshot for component */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Click each one */
+      await tableCheckboxes.first().click();
+      await tableCheckboxes.nth(1).click();
+      await tableCheckboxes.nth(2).click();
+      await tableCheckboxes.nth(3).click();
+      await tableCheckboxes.last().click();
+
+      /* check so correct events have been called */
+      expect(myEventSpyAll).toHaveReceivedEventTimes(0);
+      expect(myEventSpy).toHaveReceivedEventTimes(2);
+
+      /* Check diff on screenshot for component */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('table header contains checkbox', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('table header contains checkbox', async ({ page }) => {
     const tableHeaderCheckbox = page.getByRole('checkbox').first();
     await expect(tableHeaderCheckbox).toHaveCount(1);
     await expect(tableHeaderCheckbox).toBeVisible();
   });
 
   test('row should contain the correct number of checkboxes in each row', async ({ page }) => {
-    await page.goto(componentTestPath);
     const tableBodyRowCheckboxes = page.getByRole('checkbox');
     await expect(tableBodyRowCheckboxes).toHaveCount(5);
 
@@ -32,27 +70,4 @@ test.describe.parallel('tds-table-multiselect-disabled', () => {
     }
     await Promise.all(promises);
   });
-
-  test('can check enabled checkbox in the table', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableCheckboxes = page.getByRole('cell');
-    await expect(tableCheckboxes).toHaveCount(5);
-
-    const myEventSpyAll = await page.spyOnEvent('tdsSelectAll');
-    const myEventSpy = await page.spyOnEvent('tdsSelect');
-
-    /* Click each one */
-    await tableCheckboxes.first().click();
-    await tableCheckboxes.nth(1).click();
-    await tableCheckboxes.nth(2).click();
-    await tableCheckboxes.nth(3).click();
-    await tableCheckboxes.last().click();
-
-    /* check so correct events have been called */
-    expect(myEventSpyAll).toHaveReceivedEventTimes(0);
-    expect(myEventSpy).toHaveReceivedEventTimes(2);
-
-    /* Check diff on screenshot for component */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
 });
diff --git a/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-can-check-enabled-checkbox-in-the-table-1-linux.png b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-can-check-enabled-checkbox-in-the-table-1-linux.png
deleted file mode 100644
index 490602658..000000000
Binary files a/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-can-check-enabled-checkbox-in-the-table-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-primary-darkmode-can-check-enabled-checkbox-in-the-table-1-linux.png b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-primary-darkmode-can-check-enabled-checkbox-in-the-table-1-linux.png
new file mode 100644
index 000000000..6e252b5a1
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-primary-darkmode-can-check-enabled-checkbox-in-the-table-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-primary-darkmode-renders-multiselect-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-primary-darkmode-renders-multiselect-table-correctly-1-linux.png
new file mode 100644
index 000000000..39f6d0987
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-primary-darkmode-renders-multiselect-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-primary-lightmode-can-check-enabled-checkbox-in-the-table-1-linux.png b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-primary-lightmode-can-check-enabled-checkbox-in-the-table-1-linux.png
new file mode 100644
index 000000000..3332608d6
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-primary-lightmode-can-check-enabled-checkbox-in-the-table-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-primary-lightmode-renders-multiselect-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-primary-lightmode-renders-multiselect-table-correctly-1-linux.png
new file mode 100644
index 000000000..ba31e1f33
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-primary-lightmode-renders-multiselect-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-renders-multiselect-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-renders-multiselect-table-correctly-1-linux.png
deleted file mode 100644
index cad5a683b..000000000
Binary files a/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-renders-multiselect-table-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-secondary-darkmode-can-check-enabled-checkbox-in-the-table-1-linux.png b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-secondary-darkmode-can-check-enabled-checkbox-in-the-table-1-linux.png
new file mode 100644
index 000000000..7b70ed627
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-secondary-darkmode-can-check-enabled-checkbox-in-the-table-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-secondary-darkmode-renders-multiselect-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-secondary-darkmode-renders-multiselect-table-correctly-1-linux.png
new file mode 100644
index 000000000..0a21b3482
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-secondary-darkmode-renders-multiselect-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-secondary-lightmode-can-check-enabled-checkbox-in-the-table-1-linux.png b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-secondary-lightmode-can-check-enabled-checkbox-in-the-table-1-linux.png
new file mode 100644
index 000000000..a4b151fed
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-secondary-lightmode-can-check-enabled-checkbox-in-the-table-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-secondary-lightmode-renders-multiselect-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-secondary-lightmode-renders-multiselect-table-correctly-1-linux.png
new file mode 100644
index 000000000..3173c0147
Binary files /dev/null and b/packages/core/src/components/table/table/test/multiselect/disabled-rows/table.e2e.ts-snapshots/tds-table-multiselect-disabled-secondary-lightmode-renders-multiselect-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/pagination/table.e2e.ts b/packages/core/src/components/table/table/test/pagination/table.e2e.ts
index cda575ed6..2558059cb 100644
--- a/packages/core/src/components/table/table/test/pagination/table.e2e.ts
+++ b/packages/core/src/components/table/table/test/pagination/table.e2e.ts
@@ -1,26 +1,50 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/pagination/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-pagination';
 
-test.describe.parallel('tds-table-pagination', () => {
-  test('renders pagination table correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders pagination table correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
+
+      /* Check screenshots for diffs */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-    /* Check screenshots for diffs */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('renders pagination dropdown list correctly', async ({ page }) => {
+      const dropdown = page.locator('tds-dropdown');
+      dropdown.click();
+
+      /* Check screenshots for diffs */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('table has a footer', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('table has a footer', async ({ page }) => {
     const tableFooter = page.locator('tds-table-footer');
     await expect(tableFooter).toHaveCount(1);
   });
 
   test('footer has field for number of page, value = 1', async ({ page }) => {
-    await page.goto(componentTestPath);
     const tableFooterPaginationSpinbutton = page.getByRole('spinbutton');
     await expect(tableFooterPaginationSpinbutton).toHaveCount(1);
     await expect(tableFooterPaginationSpinbutton).toBeVisible();
@@ -28,28 +52,24 @@ test.describe.parallel('tds-table-pagination', () => {
   });
 
   test('footer contains text "of 4 pages"', async ({ page }) => {
-    await page.goto(componentTestPath);
     const tableFooterOfPagesText = page.getByText(/of 4 pages/);
     await expect(tableFooterOfPagesText).toHaveCount(1);
     await expect(tableFooterOfPagesText).toBeVisible();
   });
 
   test('Footer contains left chevron button, it is disabled', async ({ page }) => {
-    await page.goto(componentTestPath);
     const tableFooterLeftChevronButton = page.getByRole('button').first();
     await expect(tableFooterLeftChevronButton).toBeVisible();
     await expect(tableFooterLeftChevronButton).toHaveAttribute('disabled');
   });
 
   test('Footer contains right chevron button, it is not disabled', async ({ page }) => {
-    await page.goto(componentTestPath);
     const tableFooterRightChevronButton = page.getByRole('button').nth(2);
     await expect(tableFooterRightChevronButton).toBeVisible();
     await expect(tableFooterRightChevronButton).not.toHaveAttribute('disabled');
   });
 
   test('Footer contains buttons that are clickable and change value in input', async ({ page }) => {
-    await page.goto(componentTestPath);
     const tableFooterPaginationSpinbutton = page.getByRole('spinbutton');
     await expect(tableFooterPaginationSpinbutton).toHaveValue('1');
     const tableFooterRightChevronButton = page.getByRole('button').nth(2);
@@ -63,7 +83,6 @@ test.describe.parallel('tds-table-pagination', () => {
   test('Footer contains skip to last and first page buttons that are clickable', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const tableFooterPaginationSpinbutton = page.getByRole('spinbutton');
     await expect(tableFooterPaginationSpinbutton).toHaveValue('1');
     const tableFooterRightSkipForwardButton = page.getByRole('button').nth(3);
@@ -75,7 +94,6 @@ test.describe.parallel('tds-table-pagination', () => {
   });
 
   test('Footer contains rowsperpage dropdown and text', async ({ page }) => {
-    await page.goto(componentTestPath);
     const tableFooterOfPagesText = page.getByText(/Rows per page/);
     await expect(tableFooterOfPagesText).toHaveCount(1);
     await expect(tableFooterOfPagesText).toBeVisible();
@@ -84,13 +102,4 @@ test.describe.parallel('tds-table-pagination', () => {
     await expect(dropdown).toHaveCount(1);
     await expect(dropdown).toBeVisible();
   });
-
-  test('renders pagination dropdown list correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdown = page.locator('tds-dropdown');
-    dropdown.click();
-
-    /* Check screenshots for diffs */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
 });
diff --git a/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-primary-darkmode-renders-pagination-dropdown-list-correctly-1-linux.png b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-primary-darkmode-renders-pagination-dropdown-list-correctly-1-linux.png
new file mode 100644
index 000000000..a98624828
Binary files /dev/null and b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-primary-darkmode-renders-pagination-dropdown-list-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-primary-darkmode-renders-pagination-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-primary-darkmode-renders-pagination-table-correctly-1-linux.png
new file mode 100644
index 000000000..305467baf
Binary files /dev/null and b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-primary-darkmode-renders-pagination-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-primary-lightmode-renders-pagination-dropdown-list-correctly-1-linux.png b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-primary-lightmode-renders-pagination-dropdown-list-correctly-1-linux.png
new file mode 100644
index 000000000..df38c0689
Binary files /dev/null and b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-primary-lightmode-renders-pagination-dropdown-list-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-primary-lightmode-renders-pagination-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-primary-lightmode-renders-pagination-table-correctly-1-linux.png
new file mode 100644
index 000000000..145143a49
Binary files /dev/null and b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-primary-lightmode-renders-pagination-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-renders-pagination-dropdown-list-correctly-1-linux.png b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-renders-pagination-dropdown-list-correctly-1-linux.png
deleted file mode 100644
index 40c486baa..000000000
Binary files a/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-renders-pagination-dropdown-list-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-renders-pagination-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-renders-pagination-table-correctly-1-linux.png
deleted file mode 100644
index 618d2b45b..000000000
Binary files a/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-renders-pagination-table-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-secondary-darkmode-renders-pagination-dropdown-list-correctly-1-linux.png b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-secondary-darkmode-renders-pagination-dropdown-list-correctly-1-linux.png
new file mode 100644
index 000000000..b0edda4bd
Binary files /dev/null and b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-secondary-darkmode-renders-pagination-dropdown-list-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-secondary-darkmode-renders-pagination-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-secondary-darkmode-renders-pagination-table-correctly-1-linux.png
new file mode 100644
index 000000000..abf76ec49
Binary files /dev/null and b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-secondary-darkmode-renders-pagination-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-secondary-lightmode-renders-pagination-dropdown-list-correctly-1-linux.png b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-secondary-lightmode-renders-pagination-dropdown-list-correctly-1-linux.png
new file mode 100644
index 000000000..eef38066c
Binary files /dev/null and b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-secondary-lightmode-renders-pagination-dropdown-list-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-secondary-lightmode-renders-pagination-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-secondary-lightmode-renders-pagination-table-correctly-1-linux.png
new file mode 100644
index 000000000..58c558d65
Binary files /dev/null and b/packages/core/src/components/table/table/test/pagination/table.e2e.ts-snapshots/tds-table-pagination-secondary-lightmode-renders-pagination-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts b/packages/core/src/components/table/table/test/sorting/table.e2e.ts
index 673d236f9..5e1a5624a 100644
--- a/packages/core/src/components/table/table/test/sorting/table.e2e.ts
+++ b/packages/core/src/components/table/table/test/sorting/table.e2e.ts
@@ -1,22 +1,68 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/sorting/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-sorting';
 
-test.describe.parallel('tds-table-sorting', () => {
-  let tableComponent;
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    let tableComponent;
 
-  test.beforeEach(async ({ page }) => {
-    await page.goto(componentTestPath);
-    tableComponent = page.getByRole('table');
-    await tableComponent.waitFor({ state: 'visible' });
-  });
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+
+      tableComponent = page.getByRole('table');
+      await tableComponent.waitFor({ state: 'visible' });
+    });
+
+    test('renders sorting table correctly', async ({ page }) => {
+      await expect(tableComponent).toHaveCount(1);
+
+      /* Check for diffs in screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
+    });
+
+    test('column headers are clickable', async ({ page }) => {
+      const myEventSpy = await page.spyOnEvent('tdsSort');
+      const truckTypeHeader = page.getByText('Truck type');
+      await truckTypeHeader.click();
+      expect(myEventSpy).toHaveReceivedEventTimes(1);
+      const driverNameHeader = page.getByText('Driver name');
+      await driverNameHeader.click();
+      expect(myEventSpy).toHaveReceivedEventTimes(2);
+
+      const countryHeader = page.getByText('Country');
+      await countryHeader.click();
+      expect(myEventSpy).toHaveReceivedEventTimes(3);
+      const mileageHeader = page.getByText('Mileage');
+      await mileageHeader.click();
+      expect(myEventSpy).toHaveReceivedEventTimes(4);
+
+      await mileageHeader.waitFor({ state: 'visible' });
+      await page.waitForTimeout(250);
 
-  test('renders sorting table correctly', async ({ page }) => {
-    await expect(tableComponent).toHaveCount(1);
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
+    });
 
-    /* Check for diffs in screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
+    test('hover on column header', async ({ page }) => {
+      const mileageHeader = page.getByText('Mileage');
+      await mileageHeader.hover();
+
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('table has header "Sorting"', async ({ page }) => {
@@ -25,25 +71,4 @@ test.describe.parallel('tds-table-sorting', () => {
     await expect(tdsTableToolbarCaption).toHaveCount(1);
     await expect(tdsTableToolbarCaption).toBeVisible();
   });
-
-  test('column headers are clickable', async ({ page }) => {
-    const myEventSpy = await page.spyOnEvent('tdsSort');
-    const truckTypeHeader = page.getByText('Truck type');
-    await truckTypeHeader.click();
-    expect(myEventSpy).toHaveReceivedEventTimes(1);
-    const driverNameHeader = page.getByText('Driver name');
-    await driverNameHeader.click();
-    expect(myEventSpy).toHaveReceivedEventTimes(2);
-    const countryHeader = page.getByText('Country');
-    await countryHeader.click();
-    expect(myEventSpy).toHaveReceivedEventTimes(3);
-    const mileageHeader = page.getByText('Mileage');
-    await mileageHeader.click();
-    expect(myEventSpy).toHaveReceivedEventTimes(4);
-
-    await mileageHeader.waitFor({ state: 'visible' });
-    await page.waitForTimeout(250);
-
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
-  });
 });
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-column-headers-are-clickable-1-linux.png b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-column-headers-are-clickable-1-linux.png
deleted file mode 100644
index 566c0863e..000000000
Binary files a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-column-headers-are-clickable-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-darkmode-column-headers-are-clickable-1-linux.png b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-darkmode-column-headers-are-clickable-1-linux.png
new file mode 100644
index 000000000..e36df7312
Binary files /dev/null and b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-darkmode-column-headers-are-clickable-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-darkmode-hover-on-column-header-1-linux.png b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-darkmode-hover-on-column-header-1-linux.png
new file mode 100644
index 000000000..d6acde76f
Binary files /dev/null and b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-darkmode-hover-on-column-header-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-darkmode-renders-sorting-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-darkmode-renders-sorting-table-correctly-1-linux.png
new file mode 100644
index 000000000..79741fa03
Binary files /dev/null and b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-darkmode-renders-sorting-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-lightmode-column-headers-are-clickable-1-linux.png b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-lightmode-column-headers-are-clickable-1-linux.png
new file mode 100644
index 000000000..e79167fbc
Binary files /dev/null and b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-lightmode-column-headers-are-clickable-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-lightmode-hover-on-column-header-1-linux.png b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-lightmode-hover-on-column-header-1-linux.png
new file mode 100644
index 000000000..0a93a4c97
Binary files /dev/null and b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-lightmode-hover-on-column-header-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-lightmode-renders-sorting-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-lightmode-renders-sorting-table-correctly-1-linux.png
new file mode 100644
index 000000000..b986ff4e7
Binary files /dev/null and b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-primary-lightmode-renders-sorting-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-renders-sorting-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-renders-sorting-table-correctly-1-linux.png
deleted file mode 100644
index 2e0831308..000000000
Binary files a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-renders-sorting-table-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-darkmode-column-headers-are-clickable-1-linux.png b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-darkmode-column-headers-are-clickable-1-linux.png
new file mode 100644
index 000000000..2e47736d8
Binary files /dev/null and b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-darkmode-column-headers-are-clickable-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-darkmode-hover-on-column-header-1-linux.png b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-darkmode-hover-on-column-header-1-linux.png
new file mode 100644
index 000000000..631429611
Binary files /dev/null and b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-darkmode-hover-on-column-header-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-darkmode-renders-sorting-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-darkmode-renders-sorting-table-correctly-1-linux.png
new file mode 100644
index 000000000..62d7a251f
Binary files /dev/null and b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-darkmode-renders-sorting-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-lightmode-column-headers-are-clickable-1-linux.png b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-lightmode-column-headers-are-clickable-1-linux.png
new file mode 100644
index 000000000..d436cc363
Binary files /dev/null and b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-lightmode-column-headers-are-clickable-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-lightmode-hover-on-column-header-1-linux.png b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-lightmode-hover-on-column-header-1-linux.png
new file mode 100644
index 000000000..3159ec8b3
Binary files /dev/null and b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-lightmode-hover-on-column-header-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-lightmode-renders-sorting-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-lightmode-renders-sorting-table-correctly-1-linux.png
new file mode 100644
index 000000000..beec88f7d
Binary files /dev/null and b/packages/core/src/components/table/table/test/sorting/table.e2e.ts-snapshots/tds-table-sorting-secondary-lightmode-renders-sorting-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts b/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts
index 5cde30944..6c392fd09 100644
--- a/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts
+++ b/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts
@@ -1,15 +1,27 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/zebra-mode/columns-even/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-zebra-mode-columns-even';
 
-test.describe.parallel('tds-table-zebra-mode-columns-even', () => {
-  test('renders default table correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /** Check screenshot diff */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('renders default table correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
+
+      /** Check screenshot diff */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-primary-darkmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-primary-darkmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..0ceec6830
Binary files /dev/null and b/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-primary-darkmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-primary-lightmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-primary-lightmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..1146751ec
Binary files /dev/null and b/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-primary-lightmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-renders-default-table-correctly-1-linux.png
deleted file mode 100644
index 1618d2224..000000000
Binary files a/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-renders-default-table-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-secondary-darkmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-secondary-darkmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..74439f66f
Binary files /dev/null and b/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-secondary-darkmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-secondary-lightmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-secondary-lightmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..3f762c05c
Binary files /dev/null and b/packages/core/src/components/table/table/test/zebra-mode/columns-even/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-even-secondary-lightmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts b/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts
index b70aba8df..331933ae0 100644
--- a/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts
+++ b/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts
@@ -1,15 +1,27 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/zebra-mode/columns-odd/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-zebra-mode-columns-odd';
 
-test.describe.parallel('tds-table-zebra-mode-columns-odd', () => {
-  test('renders default table correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /** Check screenshot diff */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('renders default table correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
+
+      /** Check screenshot diff */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-primary-darkmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-primary-darkmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..a287de8e3
Binary files /dev/null and b/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-primary-darkmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-primary-lightmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-primary-lightmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..130d759e1
Binary files /dev/null and b/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-primary-lightmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-renders-default-table-correctly-1-linux.png
deleted file mode 100644
index 9d3010b93..000000000
Binary files a/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-renders-default-table-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-secondary-darkmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-secondary-darkmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..74439f66f
Binary files /dev/null and b/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-secondary-darkmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-secondary-lightmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-secondary-lightmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..4174a348f
Binary files /dev/null and b/packages/core/src/components/table/table/test/zebra-mode/columns-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-columns-odd-secondary-lightmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts b/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts
index 4339a1499..45748505f 100644
--- a/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts
+++ b/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts
@@ -1,15 +1,27 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/zebra-mode/rows-even/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-zebra-mode-rows-even';
 
-test.describe.parallel('tds-table-zebra-mode-rows-even', () => {
-  test('renders default table correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /** Check screenshot diff */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('renders default table correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
+
+      /** Check screenshot diff */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-primary-darkmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-primary-darkmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..620fd7160
Binary files /dev/null and b/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-primary-darkmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-primary-lightmode-renders-default-table-correctly-1-linux.png
similarity index 89%
rename from packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-renders-default-table-correctly-1-linux.png
rename to packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-primary-lightmode-renders-default-table-correctly-1-linux.png
index 6344dda18..28f291eb7 100644
Binary files a/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-renders-default-table-correctly-1-linux.png and b/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-primary-lightmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-secondary-darkmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-secondary-darkmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..74439f66f
Binary files /dev/null and b/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-secondary-darkmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-secondary-lightmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-secondary-lightmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..db97a5a49
Binary files /dev/null and b/packages/core/src/components/table/table/test/zebra-mode/rows-even/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-even-secondary-lightmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts b/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts
index b78c3be4f..9fb1d2a93 100644
--- a/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts
+++ b/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts
@@ -1,15 +1,27 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/zebra-mode/rows-odd/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-zebra-mode-rows-odd';
 
-test.describe.parallel('tds-table-zebra-mode-rows-odd', () => {
-  test('renders default table correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /** Check screenshot diff */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('renders default table correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
+
+      /** Check screenshot diff */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-primary-darkmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-primary-darkmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..9cf7f17b0
Binary files /dev/null and b/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-primary-darkmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-primary-lightmode-renders-default-table-correctly-1-linux.png
similarity index 88%
rename from packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-renders-default-table-correctly-1-linux.png
rename to packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-primary-lightmode-renders-default-table-correctly-1-linux.png
index e0b8d52f4..d3fa010e7 100644
Binary files a/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-renders-default-table-correctly-1-linux.png and b/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-primary-lightmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-secondary-darkmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-secondary-darkmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..74439f66f
Binary files /dev/null and b/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-secondary-darkmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-secondary-lightmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-secondary-lightmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..574f5a65e
Binary files /dev/null and b/packages/core/src/components/table/table/test/zebra-mode/rows-odd/table.e2e.ts-snapshots/tds-table-zebra-mode-rows-odd-secondary-lightmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts
index 9176c914d..f6aa7ee61 100644
--- a/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts
+++ b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts
@@ -1,21 +1,57 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
-// Defined once for reuse
 const componentTestPath = 'src/components/tabs/test/folder-tabs/index.html';
+const componentName = 'tds-folder-tabs';
 
-test.describe.parallel('tds-folder-tabs', () => {
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    let folderTabs;
+    let firstTabDiv;
+    let secondTabDiv;
+
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+
+      // Define common locators
+      folderTabs = page.locator('tds-folder-tabs');
+      // Divs inside tabs specifically for click interactions
+      firstTabDiv = page.locator('tds-folder-tab:has-text("First tab") >> div');
+      secondTabDiv = page.locator('tds-folder-tab:has-text("Second tab is much longer") >> div');
+    });
+
+    test('renders folder-tabs correctly', async () => {
+      await expect(folderTabs).toHaveCount(1);
+      await expect(folderTabs.page()).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('Click on Second tab selects it and updates selected-index', async () => {
+      await secondTabDiv.click({ force: true });
+      await expect(folderTabs).toHaveAttribute('selected-index', '1', { timeout: 5000 });
+      await expect(folderTabs.page()).toHaveScreenshot({ maxDiffPixels: 0 });
+      await expect(firstTabDiv).not.toHaveClass(/selected/);
+      await expect(secondTabDiv).toHaveClass(/selected/);
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
   let folderTabs;
   let firstTab;
-  let firstTabDiv;
   let secondTab;
   let secondTabDiv;
   let thirdTab;
   let thirdTabDiv;
   let fourthTab;
+
   test.beforeEach(async ({ page }) => {
-    // Navigate to the component test page before each test
     await page.goto(componentTestPath);
+
     // Define common locators
     folderTabs = page.locator('tds-folder-tabs');
     firstTab = page.locator('button', { hasText: 'First tab' });
@@ -23,16 +59,10 @@ test.describe.parallel('tds-folder-tabs', () => {
     thirdTab = page.locator('button', { hasText: 'Third Tab' });
     fourthTab = page.locator('button', { hasText: 'Fourth Tab' });
     // Divs inside tabs specifically for click interactions
-    firstTabDiv = page.locator('tds-folder-tab:has-text("First tab") >> div');
     secondTabDiv = page.locator('tds-folder-tab:has-text("Second tab is much longer") >> div');
     thirdTabDiv = page.locator('tds-folder-tab:has-text("Third Tab") >> div');
   });
 
-  test('renders folder-tabs correctly', async () => {
-    await expect(folderTabs).toHaveCount(1);
-    await expect(folderTabs.page()).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
   test('selected tab index should be 0', async ({ page }) => {
     await page.waitForChanges();
     const selectedIndex = await folderTabs.getAttribute('selected-index');
@@ -64,14 +94,6 @@ test.describe.parallel('tds-folder-tabs', () => {
     await expect(fourthTab).toHaveCSS('cursor', 'not-allowed');
   });
 
-  test('Click on Second tab selects it and updates selected-index', async () => {
-    await secondTabDiv.click({ force: true });
-    await expect(folderTabs).toHaveAttribute('selected-index', '1', { timeout: 5000 });
-    await expect(folderTabs.page()).toHaveScreenshot({ maxDiffPixels: 0 });
-    await expect(firstTabDiv).not.toHaveClass(/selected/);
-    await expect(secondTabDiv).toHaveClass(/selected/);
-  });
-
   test('Click on Third tab selects it and updates selected-index', async () => {
     await thirdTabDiv.click({ force: true });
     await expect(folderTabs).toHaveAttribute('selected-index', '2', { timeout: 5000 });
diff --git a/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
deleted file mode 100644
index 2eff132ee..000000000
Binary files a/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-primary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-primary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
new file mode 100644
index 000000000..b9b968e54
Binary files /dev/null and b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-primary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-primary-darkmode-renders-folder-tabs-correctly-1-linux.png b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-primary-darkmode-renders-folder-tabs-correctly-1-linux.png
new file mode 100644
index 000000000..42f11dd23
Binary files /dev/null and b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-primary-darkmode-renders-folder-tabs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-primary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-primary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
new file mode 100644
index 000000000..87be986e2
Binary files /dev/null and b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-primary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-primary-lightmode-renders-folder-tabs-correctly-1-linux.png b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-primary-lightmode-renders-folder-tabs-correctly-1-linux.png
new file mode 100644
index 000000000..a1c3c442a
Binary files /dev/null and b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-primary-lightmode-renders-folder-tabs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-renders-folder-tabs-correctly-1-linux.png b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-renders-folder-tabs-correctly-1-linux.png
deleted file mode 100644
index 409a10a0c..000000000
Binary files a/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-renders-folder-tabs-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-secondary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-secondary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
new file mode 100644
index 000000000..80011b55e
Binary files /dev/null and b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-secondary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-secondary-darkmode-renders-folder-tabs-correctly-1-linux.png b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-secondary-darkmode-renders-folder-tabs-correctly-1-linux.png
new file mode 100644
index 000000000..25f4b5963
Binary files /dev/null and b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-secondary-darkmode-renders-folder-tabs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-secondary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-secondary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
new file mode 100644
index 000000000..02883b900
Binary files /dev/null and b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-secondary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-secondary-lightmode-renders-folder-tabs-correctly-1-linux.png b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-secondary-lightmode-renders-folder-tabs-correctly-1-linux.png
new file mode 100644
index 000000000..1761375ef
Binary files /dev/null and b/packages/core/src/components/tabs/test/folder-tabs/folder-tabs.e2e.ts-snapshots/tds-folder-tabs-secondary-lightmode-renders-folder-tabs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts
index 78d2d545a..6aaed7330 100644
--- a/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts
+++ b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts
@@ -1,13 +1,47 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 // Defined once for reuse
 const componentTestPath = 'src/components/tabs/test/inline-tabs/index.html';
+const componentName = 'tds-inline-tabs';
 
-test.describe.parallel('tds-inline-tabs', () => {
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    let inlineTabs;
+    let firstTabDiv;
+    let secondTabDiv;
+
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+
+      inlineTabs = page.locator('tds-inline-tabs');
+      // Divs inside tabs specifically for click interactions
+      firstTabDiv = page.locator('tds-inline-tab:has-text("First tab") >> div');
+      secondTabDiv = page.locator('tds-inline-tab:has-text("Second tab is much longer") >> div');
+    });
+
+    test('renders inline-tabs correctly', async () => {
+      await expect(inlineTabs).toHaveCount(1);
+      await expect(inlineTabs.page()).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('Click on Second tab selects it and updates selected-index', async () => {
+      await secondTabDiv.click({ force: true });
+      await expect(inlineTabs).toHaveAttribute('selected-index', '1', { timeout: 5000 });
+      await expect(inlineTabs.page()).toHaveScreenshot({ maxDiffPixels: 0 });
+      await expect(firstTabDiv).not.toHaveClass(/selected/);
+      await expect(secondTabDiv).toHaveClass(/selected/);
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
   let inlineTabs;
   let firstTab;
-  let firstTabDiv;
   let secondTab;
   let secondTabDiv;
   let thirdTab;
@@ -15,24 +49,18 @@ test.describe.parallel('tds-inline-tabs', () => {
   let fourthTab;
 
   test.beforeEach(async ({ page }) => {
-    // Navigate to the component test page before each test
     await page.goto(componentTestPath);
+
     inlineTabs = page.locator('tds-inline-tabs');
     firstTab = page.locator('button', { hasText: 'First tab' });
     secondTab = page.locator('button', { hasText: 'Second tab is much longer' });
     thirdTab = page.locator('button', { hasText: 'Third Tab' });
     fourthTab = page.locator('button', { hasText: 'Fourth Tab' });
     // Divs inside tabs specifically for click interactions
-    firstTabDiv = page.locator('tds-inline-tab:has-text("First tab") >> div');
     secondTabDiv = page.locator('tds-inline-tab:has-text("Second tab is much longer") >> div');
     thirdTabDiv = page.locator('tds-inline-tab:has-text("Third Tab") >> div');
   });
 
-  test('renders inline-tabs correctly', async () => {
-    await expect(inlineTabs).toHaveCount(1);
-    await expect(inlineTabs.page()).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
   test('selected tab index should be 0', async ({ page }) => {
     await page.waitForChanges();
     const selectedIndex = await inlineTabs.getAttribute('selected-index');
@@ -64,14 +92,6 @@ test.describe.parallel('tds-inline-tabs', () => {
     await expect(fourthTab).toHaveCSS('cursor', 'not-allowed');
   });
 
-  test('Click on Second tab selects it and updates selected-index', async () => {
-    await secondTabDiv.click({ force: true });
-    await expect(inlineTabs).toHaveAttribute('selected-index', '1', { timeout: 5000 });
-    await expect(inlineTabs.page()).toHaveScreenshot({ maxDiffPixels: 0 });
-    await expect(firstTabDiv).not.toHaveClass(/selected/);
-    await expect(secondTabDiv).toHaveClass(/selected/);
-  });
-
   test('Click on Third tab selects it and updates selected-index', async () => {
     await thirdTabDiv.click({ force: true });
     await expect(inlineTabs).toHaveAttribute('selected-index', '2', { timeout: 5000 });
diff --git a/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
deleted file mode 100644
index 12956d6ca..000000000
Binary files a/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-primary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-primary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
new file mode 100644
index 000000000..c58dc4bf2
Binary files /dev/null and b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-primary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-primary-darkmode-renders-inline-tabs-correctly-1-linux.png b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-primary-darkmode-renders-inline-tabs-correctly-1-linux.png
new file mode 100644
index 000000000..aec621f91
Binary files /dev/null and b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-primary-darkmode-renders-inline-tabs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-primary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-primary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
new file mode 100644
index 000000000..138765c7b
Binary files /dev/null and b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-primary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-primary-lightmode-renders-inline-tabs-correctly-1-linux.png b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-primary-lightmode-renders-inline-tabs-correctly-1-linux.png
new file mode 100644
index 000000000..5a8f0f82f
Binary files /dev/null and b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-primary-lightmode-renders-inline-tabs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-renders-inline-tabs-correctly-1-linux.png b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-renders-inline-tabs-correctly-1-linux.png
deleted file mode 100644
index 452cb39f9..000000000
Binary files a/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-renders-inline-tabs-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-secondary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-secondary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
new file mode 100644
index 000000000..b759b8328
Binary files /dev/null and b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-secondary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-secondary-darkmode-renders-inline-tabs-correctly-1-linux.png b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-secondary-darkmode-renders-inline-tabs-correctly-1-linux.png
new file mode 100644
index 000000000..f99eda0e2
Binary files /dev/null and b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-secondary-darkmode-renders-inline-tabs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-secondary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-secondary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
new file mode 100644
index 000000000..68697d565
Binary files /dev/null and b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-secondary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-secondary-lightmode-renders-inline-tabs-correctly-1-linux.png b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-secondary-lightmode-renders-inline-tabs-correctly-1-linux.png
new file mode 100644
index 000000000..b219421b6
Binary files /dev/null and b/packages/core/src/components/tabs/test/inline-tabs/inline-tabs.e2e.ts-snapshots/tds-inline-tabs-secondary-lightmode-renders-inline-tabs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts
index 19313fb19..e89d0e837 100644
--- a/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts
+++ b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts
@@ -1,13 +1,51 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 // Defined once for reuse
 const componentTestPath = 'src/components/tabs/test/navigation-tabs/index.html';
+const componentName = 'tds-navigation-tabs';
 
-test.describe.parallel('tds-navigation-tabs', () => {
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    let navigationTabs;
+    let firstTabDiv;
+    let secondTabDiv;
+
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+
+      // Define common locators
+      navigationTabs = page.locator('tds-navigation-tabs');
+      // Divs inside tabs specifically for click interactions
+      firstTabDiv = page.locator('tds-navigation-tab:has-text("First tab") >> div');
+      secondTabDiv = page.locator(
+        'tds-navigation-tab:has-text("Second tab is much longer") >> div',
+      );
+    });
+
+    test('renders navigation-tabs correctly', async () => {
+      await expect(navigationTabs).toHaveCount(1);
+      await expect(navigationTabs.page()).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('Click on Second tab selects it and updates selected-index', async () => {
+      await secondTabDiv.click({ force: true });
+      await expect(navigationTabs).toHaveAttribute('selected-index', '1', { timeout: 5000 });
+      await expect(navigationTabs.page()).toHaveScreenshot({ maxDiffPixels: 0 });
+      await expect(firstTabDiv).not.toHaveClass(/selected/);
+      await expect(secondTabDiv).toHaveClass(/selected/);
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
   let navigationTabs;
   let firstTab;
-  let firstTabDiv;
   let secondTab;
   let secondTabDiv;
   let thirdTab;
@@ -15,8 +53,8 @@ test.describe.parallel('tds-navigation-tabs', () => {
   let fourthTab;
 
   test.beforeEach(async ({ page }) => {
-    // Navigate to the component test page before each test
     await page.goto(componentTestPath);
+
     // Define common locators
     navigationTabs = page.locator('tds-navigation-tabs');
     firstTab = page.locator('button', { hasText: 'First tab' });
@@ -24,16 +62,10 @@ test.describe.parallel('tds-navigation-tabs', () => {
     thirdTab = page.locator('button', { hasText: 'Third Tab' });
     fourthTab = page.locator('button', { hasText: 'Fourth Tab' });
     // Divs inside tabs specifically for click interactions
-    firstTabDiv = page.locator('tds-navigation-tab:has-text("First tab") >> div');
     secondTabDiv = page.locator('tds-navigation-tab:has-text("Second tab is much longer") >> div');
     thirdTabDiv = page.locator('tds-navigation-tab:has-text("Third Tab") >> div');
   });
 
-  test('renders navigation-tabs correctly', async () => {
-    await expect(navigationTabs).toHaveCount(1);
-    await expect(navigationTabs.page()).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
   test('selected tab index should be 0', async ({ page }) => {
     await page.waitForChanges();
     const selectedIndex = await navigationTabs.getAttribute('selected-index');
@@ -65,14 +97,6 @@ test.describe.parallel('tds-navigation-tabs', () => {
     await expect(fourthTab).toHaveCSS('cursor', 'not-allowed');
   });
 
-  test('Click on Second tab selects it and updates selected-index', async () => {
-    await secondTabDiv.click({ force: true });
-    await expect(navigationTabs).toHaveAttribute('selected-index', '1', { timeout: 5000 });
-    await expect(navigationTabs.page()).toHaveScreenshot({ maxDiffPixels: 0 });
-    await expect(firstTabDiv).not.toHaveClass(/selected/);
-    await expect(secondTabDiv).toHaveClass(/selected/);
-  });
-
   test('Click on Third tab selects it and updates selected-index', async () => {
     await thirdTabDiv.click({ force: true });
     await expect(navigationTabs).toHaveAttribute('selected-index', '2', { timeout: 5000 });
diff --git a/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-primary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-primary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
new file mode 100644
index 000000000..9877704c7
Binary files /dev/null and b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-primary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-primary-darkmode-renders-navigation-tabs-correctly-1-linux.png b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-primary-darkmode-renders-navigation-tabs-correctly-1-linux.png
new file mode 100644
index 000000000..a539e10e4
Binary files /dev/null and b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-primary-darkmode-renders-navigation-tabs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-primary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
similarity index 97%
rename from packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
rename to packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-primary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
index 58576d382..a524e0cfe 100644
Binary files a/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png and b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-primary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-renders-navigation-tabs-correctly-1-linux.png b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-primary-lightmode-renders-navigation-tabs-correctly-1-linux.png
similarity index 96%
rename from packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-renders-navigation-tabs-correctly-1-linux.png
rename to packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-primary-lightmode-renders-navigation-tabs-correctly-1-linux.png
index f7cda0f75..17f090872 100644
Binary files a/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-renders-navigation-tabs-correctly-1-linux.png and b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-primary-lightmode-renders-navigation-tabs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-secondary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-secondary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
new file mode 100644
index 000000000..c9a10e5ec
Binary files /dev/null and b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-secondary-darkmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-secondary-darkmode-renders-navigation-tabs-correctly-1-linux.png b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-secondary-darkmode-renders-navigation-tabs-correctly-1-linux.png
new file mode 100644
index 000000000..4868e5196
Binary files /dev/null and b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-secondary-darkmode-renders-navigation-tabs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-secondary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-secondary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png
new file mode 100644
index 000000000..ef28da713
Binary files /dev/null and b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-secondary-lightmode-Click-on-Second-tab-selects-it-and-updates-selected-index-1-linux.png differ
diff --git a/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-secondary-lightmode-renders-navigation-tabs-correctly-1-linux.png b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-secondary-lightmode-renders-navigation-tabs-correctly-1-linux.png
new file mode 100644
index 000000000..74ff42d94
Binary files /dev/null and b/packages/core/src/components/tabs/test/navigation-tabs/navigation-tabs.e2e.ts-snapshots/tds-navigation-tabs-secondary-lightmode-renders-navigation-tabs-correctly-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/default/text-field.e2e.ts b/packages/core/src/components/text-field/test/default/text-field.e2e.ts
index 387687b43..34fa97110 100644
--- a/packages/core/src/components/text-field/test/default/text-field.e2e.ts
+++ b/packages/core/src/components/text-field/test/default/text-field.e2e.ts
@@ -1,22 +1,37 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 // Defined once for reuse
 const componentTestPath = 'src/components/text-field/test/default/index.html';
+const componentName = 'tds-text-field';
+const testDescription = 'TdsTextField - default state';
+
 const textFieldSelector = 'tds-text-field';
 
-test.describe.parallel('TdsTextField - default state', () => {
-  test.beforeEach(async ({ page }) => {
-    // Navigate to the component test page before each test
-    await page.goto(componentTestPath);
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('renders default text-field correctly', async ({ page }) => {
-    const textField = page.locator(textFieldSelector);
-    await expect(textField).toHaveCount(1);
+    test('renders default text-field correctly', async ({ page }) => {
+      const textField = page.locator(textFieldSelector);
+      await expect(textField).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('should have type "text"', async ({ page }) => {
diff --git a/packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-renders-default-chip-correctly-1-linux.png b/packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-primary-darkmode-renders-default-text-field-correctly-1-linux.png
similarity index 63%
rename from packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-renders-default-chip-correctly-1-linux.png
rename to packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-primary-darkmode-renders-default-text-field-correctly-1-linux.png
index 9256e8c5c..fcfa6cea6 100644
Binary files a/packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-renders-default-chip-correctly-1-linux.png and b/packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-primary-darkmode-renders-default-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-primary-lightmode-renders-default-text-field-correctly-1-linux.png b/packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-primary-lightmode-renders-default-text-field-correctly-1-linux.png
new file mode 100644
index 000000000..f2f786e1f
Binary files /dev/null and b/packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-primary-lightmode-renders-default-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-renders-default-text-field-correctly-1-linux.png b/packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-renders-default-text-field-correctly-1-linux.png
deleted file mode 100644
index 7720255e6..000000000
Binary files a/packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-renders-default-text-field-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-secondary-darkmode-renders-default-text-field-correctly-1-linux.png b/packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-secondary-darkmode-renders-default-text-field-correctly-1-linux.png
new file mode 100644
index 000000000..fa1d076cf
Binary files /dev/null and b/packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-secondary-darkmode-renders-default-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/secondary/secondary/lightmode/button.e2e.ts-snapshots/tds-button-secondary-secondary-lightmode-renders-secondary-button-correctly-1-linux.png b/packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-secondary-lightmode-renders-default-text-field-correctly-1-linux.png
similarity index 64%
rename from packages/core/src/components/button/test/secondary/secondary/lightmode/button.e2e.ts-snapshots/tds-button-secondary-secondary-lightmode-renders-secondary-button-correctly-1-linux.png
rename to packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-secondary-lightmode-renders-default-text-field-correctly-1-linux.png
index f0e426cc5..e4374f800 100644
Binary files a/packages/core/src/components/button/test/secondary/secondary/lightmode/button.e2e.ts-snapshots/tds-button-secondary-secondary-lightmode-renders-secondary-button-correctly-1-linux.png and b/packages/core/src/components/text-field/test/default/text-field.e2e.ts-snapshots/TdsTextField---default-state-secondary-lightmode-renders-default-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts b/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts
index 7ccc06624..5b928aeae 100644
--- a/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts
+++ b/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts
@@ -1,22 +1,37 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 // Defined once for reuse
 const componentTestPath = 'src/components/text-field/test/disabled/index.html';
+const componentName = 'tds-text-field';
+const testDescription = 'TdsTextField - default state';
+
 const textFieldSelector = 'tds-text-field';
 
-test.describe.parallel('TdsTextField - default state', () => {
-  test.beforeEach(async ({ page }) => {
-    // Navigate to the component test page before each test
-    await page.goto(componentTestPath);
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('renders disabled text-field correctly', async ({ page }) => {
-    const textField = page.locator(textFieldSelector);
-    await expect(textField).toHaveCount(1);
+    test('renders disabled text-field correctly', async ({ page }) => {
+      const textField = page.locator(textFieldSelector);
+      await expect(textField).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('should have disabled attribute', async ({ page }) => {
diff --git a/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-primary-darkmode-renders-disabled-text-field-correctly-1-linux.png b/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-primary-darkmode-renders-disabled-text-field-correctly-1-linux.png
new file mode 100644
index 000000000..e8d3a67b4
Binary files /dev/null and b/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-primary-darkmode-renders-disabled-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-primary-lightmode-renders-disabled-text-field-correctly-1-linux.png b/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-primary-lightmode-renders-disabled-text-field-correctly-1-linux.png
new file mode 100644
index 000000000..2575654df
Binary files /dev/null and b/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-primary-lightmode-renders-disabled-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-secondary-darkmode-renders-disabled-text-field-correctly-1-linux.png b/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-secondary-darkmode-renders-disabled-text-field-correctly-1-linux.png
new file mode 100644
index 000000000..0aa4e8a50
Binary files /dev/null and b/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-secondary-darkmode-renders-disabled-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-secondary-lightmode-renders-disabled-text-field-correctly-1-linux.png b/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-secondary-lightmode-renders-disabled-text-field-correctly-1-linux.png
new file mode 100644
index 000000000..b40699a95
Binary files /dev/null and b/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts-snapshots/TdsTextField---default-state-secondary-lightmode-renders-disabled-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts
index 5d46105ce..380446310 100644
--- a/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts
+++ b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts
@@ -1,22 +1,58 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 // Defined once for reuse
 const componentTestPath = 'src/components/text-field/test/password-error/index.html';
+const componentName = 'tds-text-field';
+const testDescription = 'TdsTextField - password type with error state';
+
 const textFieldSelector = 'tds-text-field';
 
-test.describe.parallel('TdsTextField - password type with error state', () => {
-  test.beforeEach(async ({ page }) => {
-    // Navigate to the component test page before each test
-    await page.goto(componentTestPath);
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('renders default text-field correctly', async ({ page }) => {
-    const textField = page.locator(textFieldSelector);
-    await expect(textField).toHaveCount(1);
+    test('renders default text-field correctly', async ({ page }) => {
+      const textField = page.locator(textFieldSelector);
+      await expect(textField).toHaveCount(1);
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('should handle hover, click, and input on text field', async ({ page }) => {
+      // Define the selector for the text field input
+      const textFieldInputSelector = 'tds-text-field input';
+
+      // Hover over the text field
+      await page.hover(textFieldInputSelector);
+
+      // Click on the text field to activate it
+      await page.click(textFieldInputSelector);
+
+      // Type 'Test text' into the text field
+      await page.fill(textFieldInputSelector, 'Test');
+
+      // Verify the text field contains the inputted text
+      const value = await page.inputValue(textFieldInputSelector);
+      expect(value).toBe('Test');
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('should have state "error"', async ({ page }) => {
@@ -48,25 +84,4 @@ test.describe.parallel('TdsTextField - password type with error state', () => {
     const textFieldLabelSelector = page.locator('div >> text="Label"');
     await expect(textFieldLabelSelector).toHaveCount(1);
   });
-
-  test('should handle hover, click, and input on text field', async ({ page }) => {
-    // Define the selector for the text field input
-    const textFieldInputSelector = 'tds-text-field input';
-
-    // Hover over the text field
-    await page.hover(textFieldInputSelector);
-
-    // Click on the text field to activate it
-    await page.click(textFieldInputSelector);
-
-    // Type 'Test text' into the text field
-    await page.fill(textFieldInputSelector, 'Test');
-
-    // Verify the text field contains the inputted text
-    const value = await page.inputValue(textFieldInputSelector);
-    expect(value).toBe('Test');
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
 });
diff --git a/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--0badd--handle-hover-click-and-input-on-text-field-1-linux.png b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--0badd--handle-hover-click-and-input-on-text-field-1-linux.png
new file mode 100644
index 000000000..3e1963bf4
Binary files /dev/null and b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--0badd--handle-hover-click-and-input-on-text-field-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--12676--handle-hover-click-and-input-on-text-field-1-linux.png b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--12676--handle-hover-click-and-input-on-text-field-1-linux.png
new file mode 100644
index 000000000..e6c556d5f
Binary files /dev/null and b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--12676--handle-hover-click-and-input-on-text-field-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--30745-darkmode-renders-default-text-field-correctly-1-linux.png b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--30745-darkmode-renders-default-text-field-correctly-1-linux.png
new file mode 100644
index 000000000..a779e35b0
Binary files /dev/null and b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--30745-darkmode-renders-default-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--77a59-darkmode-renders-default-text-field-correctly-1-linux.png b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--77a59-darkmode-renders-default-text-field-correctly-1-linux.png
new file mode 100644
index 000000000..497ce57f2
Binary files /dev/null and b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--77a59-darkmode-renders-default-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--9a284-ightmode-renders-default-text-field-correctly-1-linux.png b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--9a284-ightmode-renders-default-text-field-correctly-1-linux.png
new file mode 100644
index 000000000..14fb44fe0
Binary files /dev/null and b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--9a284-ightmode-renders-default-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-renders-disabled-button-correctly-1-linux.png b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--a8f75--handle-hover-click-and-input-on-text-field-1-linux.png
similarity index 70%
rename from packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-renders-disabled-button-correctly-1-linux.png
rename to packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--a8f75--handle-hover-click-and-input-on-text-field-1-linux.png
index d0695246d..b318f4601 100644
Binary files a/packages/core/src/components/button/test/disabled/button.e2e.ts-snapshots/tds-button-disabled-renders-disabled-button-correctly-1-linux.png and b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--a8f75--handle-hover-click-and-input-on-text-field-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--b4450--handle-hover-click-and-input-on-text-field-1-linux.png b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--b4450--handle-hover-click-and-input-on-text-field-1-linux.png
new file mode 100644
index 000000000..7916eefc0
Binary files /dev/null and b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--b4450--handle-hover-click-and-input-on-text-field-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--bcdcf-ightmode-renders-default-text-field-correctly-1-linux.png b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--bcdcf-ightmode-renders-default-text-field-correctly-1-linux.png
new file mode 100644
index 000000000..6bf6c4fc0
Binary files /dev/null and b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state--bcdcf-ightmode-renders-default-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state-should-handle-hover-click-and-input-on-text-field-1-linux.png b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state-should-handle-hover-click-and-input-on-text-field-1-linux.png
deleted file mode 100644
index 2b131a461..000000000
Binary files a/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state-should-handle-hover-click-and-input-on-text-field-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts b/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts
index 85c22981d..e04a4c09a 100644
--- a/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts
+++ b/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts
@@ -1,22 +1,37 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 // Defined once for reuse
 const componentTestPath = 'src/components/text-field/test/read-only-success/index.html';
+const componentName = 'tds-text-field';
+const testDescription = 'TdsTextField - read-only success state';
+
 const textFieldSelector = 'tds-text-field';
 
-test.describe.parallel('TdsTextField - read-only success state', () => {
-  test.beforeEach(async ({ page }) => {
-    // Navigate to the component test page before each test
-    await page.goto(componentTestPath);
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('renders readonly success state of text-field correctly', async ({ page }) => {
-    const textField = page.locator(textFieldSelector);
-    await expect(textField).toHaveCount(1);
+    test('renders readonly success state of text-field correctly', async ({ page }) => {
+      const textField = page.locator(textFieldSelector);
+      await expect(textField).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('should have state "success"', async ({ page }) => {
diff --git a/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-Simulate-time-selection-and-verify-format-1-linux.png b/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-primary-18797-eadonly-success-state-of-text-field-correctly-1-linux.png
similarity index 51%
rename from packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-Simulate-time-selection-and-verify-format-1-linux.png
rename to packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-primary-18797-eadonly-success-state-of-text-field-correctly-1-linux.png
index 4e2c69e23..75fe102ae 100644
Binary files a/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-Simulate-time-selection-and-verify-format-1-linux.png and b/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-primary-18797-eadonly-success-state-of-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/popover-menu/test/show-false/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-false-renders-show-false-popover-menu-correctly-1-linux.png b/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-primary-7fe16-eadonly-success-state-of-text-field-correctly-1-linux.png
similarity index 55%
rename from packages/core/src/components/popover-menu/test/show-false/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-false-renders-show-false-popover-menu-correctly-1-linux.png
rename to packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-primary-7fe16-eadonly-success-state-of-text-field-correctly-1-linux.png
index 492d69178..395eb0e4c 100644
Binary files a/packages/core/src/components/popover-menu/test/show-false/popover-menu.e2e.ts-snapshots/tds-popover-menu-show-false-renders-show-false-popover-menu-correctly-1-linux.png and b/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-primary-7fe16-eadonly-success-state-of-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state-renders-default-text-field-correctly-1-linux.png b/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-seconda-1591e-eadonly-success-state-of-text-field-correctly-1-linux.png
similarity index 57%
rename from packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state-renders-default-text-field-correctly-1-linux.png
rename to packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-seconda-1591e-eadonly-success-state-of-text-field-correctly-1-linux.png
index e252c4b4f..eb87f2a65 100644
Binary files a/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts-snapshots/TdsTextField---password-type-with-error-state-renders-default-text-field-correctly-1-linux.png and b/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-seconda-1591e-eadonly-success-state-of-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-renders-disabled-accordion-correctly-1-linux.png b/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-seconda-6d9f4-eadonly-success-state-of-text-field-correctly-1-linux.png
similarity index 56%
rename from packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-renders-disabled-accordion-correctly-1-linux.png
rename to packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-seconda-6d9f4-eadonly-success-state-of-text-field-correctly-1-linux.png
index ca21423d7..6168ee6d6 100644
Binary files a/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-renders-disabled-accordion-correctly-1-linux.png and b/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts-snapshots/TdsTextField---read-only-success-state-seconda-6d9f4-eadonly-success-state-of-text-field-correctly-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/read-only-with-suffix/text-field.e2e.ts b/packages/core/src/components/text-field/test/read-only-with-suffix/text-field.e2e.ts
index 4326f25b5..f8f1a0e94 100644
--- a/packages/core/src/components/text-field/test/read-only-with-suffix/text-field.e2e.ts
+++ b/packages/core/src/components/text-field/test/read-only-with-suffix/text-field.e2e.ts
@@ -2,10 +2,14 @@ import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
 const componentTestPath = 'src/components/text-field/test/read-only-with-suffix/index.html';
+const testDescription = 'TdsTextField - readOnly prop effect';
 
-test.describe('TdsTextField - readOnly prop effect', () => {
-  test('should hide the suffix icon when readOnly is true', async ({ page }) => {
+test.describe.parallel(testDescription, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('should hide the suffix icon when readOnly is true', async ({ page }) => {
     const suffixIcon = await page.locator('.text-field-slot-wrap-suffix');
     await expect(suffixIcon).toBeHidden();
   });
diff --git a/packages/core/src/components/banner/test/default/darkmode/index.html b/packages/core/src/components/text-field/test/with-helper-text/index.html
similarity index 55%
rename from packages/core/src/components/banner/test/default/darkmode/index.html
rename to packages/core/src/components/text-field/test/with-helper-text/index.html
index c61b33273..f577eec94 100644
--- a/packages/core/src/components/banner/test/default/darkmode/index.html
+++ b/packages/core/src/components/text-field/test/with-helper-text/index.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Banner - Default</title>
+    <title>Text Field - With helper text</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
     <link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
     <script type="module">
@@ -11,13 +11,7 @@
     </script>
   </head>
 
-  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958); padding: 20px">
-    <tds-banner
-      icon="truck"
-      header="This is a header text area"
-      subheader="This is the subheader text area"
-    >
-      <tds-link slot="actions"><a href="/">Link example</a></tds-link>
-    </tds-banner>
+  <body>
+    <tds-text-field placeholder="Placeholder" helper="Helper text"></tds-text-field>
   </body>
 </html>
diff --git a/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts b/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts
new file mode 100644
index 000000000..58b68fc05
--- /dev/null
+++ b/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts
@@ -0,0 +1,25 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
+
+// Defined once for reuse
+const componentTestPath = 'src/components/text-field/test/with-helper-text/index.html';
+const componentName = 'tds-text-field';
+const testDescription = 'TdsTextField - with helper text';
+
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders text-field with helper text', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
diff --git a/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts-snapshots/TdsTextField---with-helper-text-primary-darkmode-renders-text-field-with-helper-text-1-linux.png b/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts-snapshots/TdsTextField---with-helper-text-primary-darkmode-renders-text-field-with-helper-text-1-linux.png
new file mode 100644
index 000000000..bf5ddd552
Binary files /dev/null and b/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts-snapshots/TdsTextField---with-helper-text-primary-darkmode-renders-text-field-with-helper-text-1-linux.png differ
diff --git a/packages/core/src/components/breadcrumbs/test/default/lightmode/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-lightmode-renders-default-breadcrumbs-correctly-1-linux.png b/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts-snapshots/TdsTextField---with-helper-text-primary-lightmode-renders-text-field-with-helper-text-1-linux.png
similarity index 55%
rename from packages/core/src/components/breadcrumbs/test/default/lightmode/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-lightmode-renders-default-breadcrumbs-correctly-1-linux.png
rename to packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts-snapshots/TdsTextField---with-helper-text-primary-lightmode-renders-text-field-with-helper-text-1-linux.png
index 4c88a7111..0e972a078 100644
Binary files a/packages/core/src/components/breadcrumbs/test/default/lightmode/breadcrumbs.e2e.ts-snapshots/tds-breadcrumbs-default-lightmode-renders-default-breadcrumbs-correctly-1-linux.png and b/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts-snapshots/TdsTextField---with-helper-text-primary-lightmode-renders-text-field-with-helper-text-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts-snapshots/TdsTextField---with-helper-text-secondary-darkmode-renders-text-field-with-helper-text-1-linux.png b/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts-snapshots/TdsTextField---with-helper-text-secondary-darkmode-renders-text-field-with-helper-text-1-linux.png
new file mode 100644
index 000000000..4a51f11b6
Binary files /dev/null and b/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts-snapshots/TdsTextField---with-helper-text-secondary-darkmode-renders-text-field-with-helper-text-1-linux.png differ
diff --git a/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts-snapshots/TdsTextField---with-helper-text-secondary-lightmode-renders-text-field-with-helper-text-1-linux.png b/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts-snapshots/TdsTextField---with-helper-text-secondary-lightmode-renders-text-field-with-helper-text-1-linux.png
new file mode 100644
index 000000000..05de032a2
Binary files /dev/null and b/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts-snapshots/TdsTextField---with-helper-text-secondary-lightmode-renders-text-field-with-helper-text-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/basic/textarea.e2e.ts b/packages/core/src/components/textarea/test/basic/textarea.e2e.ts
index 8343c4280..4bfa8f9eb 100644
--- a/packages/core/src/components/textarea/test/basic/textarea.e2e.ts
+++ b/packages/core/src/components/textarea/test/basic/textarea.e2e.ts
@@ -1,20 +1,36 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/textarea/test/basic/index.html';
+const componentName = 'tds-textarea';
 
-test.describe.parallel('tds-textarea', () => {
-  test('renders default textarea correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tdsTextarea = page.getByTestId('tds-textarea-testid');
-    await expect(tdsTextarea).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default textarea correctly', async ({ page }) => {
+      const tdsTextarea = page.getByTestId('tds-textarea-testid');
+      await expect(tdsTextarea).toHaveCount(1);
 
-    /* Expect no difference in screenshot  */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Expect no difference in screenshot  */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('test if able to type in textarea', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('test if able to type in textarea', async ({ page }) => {
     const textarea = page.getByRole('textbox');
 
     /* Expect to have received an event from clicking on the textarea */
diff --git a/packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-renders-basic-button-correctly-1-linux.png b/packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-primary-darkmode-renders-default-textarea-correctly-1-linux.png
similarity index 70%
rename from packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-renders-basic-button-correctly-1-linux.png
rename to packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-primary-darkmode-renders-default-textarea-correctly-1-linux.png
index 162a4bb66..8610f915c 100644
Binary files a/packages/core/src/components/button/test/basic/button.e2e.ts-snapshots/tds-button-basic-renders-basic-button-correctly-1-linux.png and b/packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-primary-darkmode-renders-default-textarea-correctly-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-primary-lightmode-renders-default-textarea-correctly-1-linux.png b/packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-primary-lightmode-renders-default-textarea-correctly-1-linux.png
new file mode 100644
index 000000000..2d5c4bf8c
Binary files /dev/null and b/packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-primary-lightmode-renders-default-textarea-correctly-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-renders-basic-dropdown-correctly-1-linux.png b/packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-secondary-darkmode-renders-default-textarea-correctly-1-linux.png
similarity index 75%
rename from packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-renders-basic-dropdown-correctly-1-linux.png
rename to packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-secondary-darkmode-renders-default-textarea-correctly-1-linux.png
index 23da4321f..047a04feb 100644
Binary files a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts-snapshots/tds-dropdown-basic-renders-basic-dropdown-correctly-1-linux.png and b/packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-secondary-darkmode-renders-default-textarea-correctly-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-secondary-lightmode-renders-default-textarea-correctly-1-linux.png b/packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-secondary-lightmode-renders-default-textarea-correctly-1-linux.png
new file mode 100644
index 000000000..f7f424ff0
Binary files /dev/null and b/packages/core/src/components/textarea/test/basic/textarea.e2e.ts-snapshots/tds-textarea-secondary-lightmode-renders-default-textarea-correctly-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/default/textarea.e2e.ts b/packages/core/src/components/textarea/test/default/textarea.e2e.ts
index 6e953c946..a9237f507 100644
--- a/packages/core/src/components/textarea/test/default/textarea.e2e.ts
+++ b/packages/core/src/components/textarea/test/default/textarea.e2e.ts
@@ -1,41 +1,59 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/textarea/test/default/index.html';
-
-test.describe.parallel('tds-textarea-default', () => {
-  test('renders default textarea correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tdsTextarea = page.getByTestId('tds-textarea-testid');
-    await expect(tdsTextarea).toHaveCount(1);
-
-    /* Expect no difference in screenshot  */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+const componentName = 'tds-textarea';
+const testDescription = 'tds-textarea-default';
+
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default textarea correctly', async ({ page }) => {
+      const tdsTextarea = page.getByTestId('tds-textarea-testid');
+      await expect(tdsTextarea).toHaveCount(1);
+
+      /* Expect no difference in screenshot  */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('test if able to type in textarea', async ({ page }) => {
+      const textarea = page.getByRole('textbox');
+
+      /* Expect to have received an event from clicking on the textarea */
+      const myEventSpy = await page.spyOnEvent('click');
+      await textarea.click();
+      expect(myEventSpy).toHaveReceivedEvent();
+
+      /* Expect the textbox to have the cursor text style */
+      const textareaCursorState = await textarea.evaluate(
+        (style) => getComputedStyle(style).cursor,
+      );
+      expect(textareaCursorState).toBe('text');
+
+      /* Expect the inputValue of textarea to have "Adding some text" after it has been typed */
+      await textarea.fill('Adding some text');
+      expect(await textarea.inputValue()).toBe('Adding some text');
+
+      /* Expect no difference in screenshot  */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('test if able to type in textarea', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-    const textarea = page.getByRole('textbox');
-
-    /* Expect to have received an event from clicking on the textarea */
-    const myEventSpy = await page.spyOnEvent('click');
-    await textarea.click();
-    expect(myEventSpy).toHaveReceivedEvent();
-
-    /* Expect the textbox to have the cursor text style */
-    const textareaCursorState = await textarea.evaluate((style) => getComputedStyle(style).cursor);
-    expect(textareaCursorState).toBe('text');
-
-    /* Expect the inputValue of textarea to have "Adding some text" after it has been typed */
-    await textarea.fill('Adding some text');
-    expect(await textarea.inputValue()).toBe('Adding some text');
-
-    /* Expect no difference in screenshot  */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 
   test('not able to find label if "no-label" is set', async ({ page }) => {
-    await page.goto(componentTestPath);
     const textareaLabel = page.getByText('Label');
     await expect(textareaLabel).toHaveCount(0);
     await expect(textareaLabel).toBeHidden();
diff --git a/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-renders-default-chip-correctly-1-linux.png b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-primary-darkmode-renders-default-textarea-correctly-1-linux.png
similarity index 53%
rename from packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-renders-default-chip-correctly-1-linux.png
rename to packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-primary-darkmode-renders-default-textarea-correctly-1-linux.png
index a1a7237e1..71c49e56f 100644
Binary files a/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-renders-default-chip-correctly-1-linux.png and b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-primary-darkmode-renders-default-textarea-correctly-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-primary-darkmode-test-if-able-to-type-in-textarea-1-linux.png b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-primary-darkmode-test-if-able-to-type-in-textarea-1-linux.png
new file mode 100644
index 000000000..842f6f0e6
Binary files /dev/null and b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-primary-darkmode-test-if-able-to-type-in-textarea-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-primary-lightmode-renders-default-textarea-correctly-1-linux.png b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-primary-lightmode-renders-default-textarea-correctly-1-linux.png
new file mode 100644
index 000000000..222864960
Binary files /dev/null and b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-primary-lightmode-renders-default-textarea-correctly-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-primary-lightmode-test-if-able-to-type-in-textarea-1-linux.png b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-primary-lightmode-test-if-able-to-type-in-textarea-1-linux.png
new file mode 100644
index 000000000..efa5d5411
Binary files /dev/null and b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-primary-lightmode-test-if-able-to-type-in-textarea-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-renders-default-textarea-correctly-1-linux.png b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-renders-default-textarea-correctly-1-linux.png
deleted file mode 100644
index ff9d72c1e..000000000
Binary files a/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-renders-default-textarea-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-secondary-darkmode-renders-default-textarea-correctly-1-linux.png b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-secondary-darkmode-renders-default-textarea-correctly-1-linux.png
new file mode 100644
index 000000000..e5ef477bd
Binary files /dev/null and b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-secondary-darkmode-renders-default-textarea-correctly-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-secondary-darkmode-test-if-able-to-type-in-textarea-1-linux.png b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-secondary-darkmode-test-if-able-to-type-in-textarea-1-linux.png
new file mode 100644
index 000000000..99256b761
Binary files /dev/null and b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-secondary-darkmode-test-if-able-to-type-in-textarea-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-secondary-lightmode-renders-default-textarea-correctly-1-linux.png b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-secondary-lightmode-renders-default-textarea-correctly-1-linux.png
new file mode 100644
index 000000000..1d22844f0
Binary files /dev/null and b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-secondary-lightmode-renders-default-textarea-correctly-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-secondary-lightmode-test-if-able-to-type-in-textarea-1-linux.png b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-secondary-lightmode-test-if-able-to-type-in-textarea-1-linux.png
new file mode 100644
index 000000000..c4f80d613
Binary files /dev/null and b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-secondary-lightmode-test-if-able-to-type-in-textarea-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-test-if-able-to-type-in-textarea-1-linux.png b/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-test-if-able-to-type-in-textarea-1-linux.png
deleted file mode 100644
index b229b1c59..000000000
Binary files a/packages/core/src/components/textarea/test/default/textarea.e2e.ts-snapshots/tds-textarea-default-test-if-able-to-type-in-textarea-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts b/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts
index babc9c59a..726b6e20b 100644
--- a/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts
+++ b/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts
@@ -1,23 +1,40 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/textarea/test/read-only/index.html';
+const componentName = 'tds-textarea';
+const testDescription = 'tds-textarea-read-only';
 
-test.describe.parallel('tds-textarea-read-only', () => {
-  test('renders read-only textarea correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tdsTextarea = page.getByTestId('tds-textarea-testid');
-    await expect(tdsTextarea).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders read-only textarea correctly', async ({ page }) => {
+      const tdsTextarea = page.getByTestId('tds-textarea-testid');
+      await expect(tdsTextarea).toHaveCount(1);
 
-    /* Expect the tds-textarea to have the read-only attribute */
-    await expect(tdsTextarea).toHaveAttribute('read-only');
+      /* Expect the tds-textarea to have the read-only attribute */
+      await expect(tdsTextarea).toHaveAttribute('read-only');
 
-    /* Expect no diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Expect no diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('read-only textarea - native textarea should have readonly attribute', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('read-only textarea - native textarea should have readonly attribute', async ({ page }) => {
     const textarea = page.getByRole('textbox');
 
     /* Expect the textarea within tds-textarea to have the readonly attribute */
@@ -25,7 +42,6 @@ test.describe.parallel('tds-textarea-read-only', () => {
   });
 
   test('be able to find label if "outside" is set', async ({ page }) => {
-    await page.goto(componentTestPath);
     const textareaLabel = page.getByText('Label');
     await expect(textareaLabel).toHaveCount(1);
     await expect(textareaLabel).toBeVisible();
diff --git a/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-primary-darkmode-renders-read-only-textarea-correctly-1-linux.png b/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-primary-darkmode-renders-read-only-textarea-correctly-1-linux.png
new file mode 100644
index 000000000..9ce07c03e
Binary files /dev/null and b/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-primary-darkmode-renders-read-only-textarea-correctly-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-primary-lightmode-renders-read-only-textarea-correctly-1-linux.png b/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-primary-lightmode-renders-read-only-textarea-correctly-1-linux.png
new file mode 100644
index 000000000..a18602f71
Binary files /dev/null and b/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-primary-lightmode-renders-read-only-textarea-correctly-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-renders-read-only-textarea-correctly-1-linux.png b/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-renders-read-only-textarea-correctly-1-linux.png
deleted file mode 100644
index cec1f2986..000000000
Binary files a/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-renders-read-only-textarea-correctly-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-secondary-darkmode-renders-read-only-textarea-correctly-1-linux.png b/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-secondary-darkmode-renders-read-only-textarea-correctly-1-linux.png
new file mode 100644
index 000000000..780335ee5
Binary files /dev/null and b/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-secondary-darkmode-renders-read-only-textarea-correctly-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-secondary-lightmode-renders-read-only-textarea-correctly-1-linux.png b/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-secondary-lightmode-renders-read-only-textarea-correctly-1-linux.png
new file mode 100644
index 000000000..91f7049cf
Binary files /dev/null and b/packages/core/src/components/textarea/test/read-only/textarea.e2e.ts-snapshots/tds-textarea-read-only-secondary-lightmode-renders-read-only-textarea-correctly-1-linux.png differ
diff --git a/packages/core/src/components/banner/test/error/darkmode/index.html b/packages/core/src/components/textarea/test/with-helper-text/index.html
similarity index 55%
rename from packages/core/src/components/banner/test/error/darkmode/index.html
rename to packages/core/src/components/textarea/test/with-helper-text/index.html
index f538a0c10..c3c9219fb 100644
--- a/packages/core/src/components/banner/test/error/darkmode/index.html
+++ b/packages/core/src/components/textarea/test/with-helper-text/index.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Banner - Error</title>
+    <title>Textarea - With helper text</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
     <link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
     <script type="module">
@@ -11,13 +11,7 @@
     </script>
   </head>
 
-  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958); padding: 20px">
-    <tds-banner
-      variant="error"
-      header="This is a header text area"
-      subheader="This is the subheader text area"
-    >
-      <tds-link slot="actions"><a href="/">Link example</a></tds-link>
-    </tds-banner>
+  <body>
+    <tds-textarea placeholder="Placeholder" helper="Helper text"></tds-textarea>
   </body>
 </html>
diff --git a/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts b/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts
new file mode 100644
index 000000000..23b9d78f6
--- /dev/null
+++ b/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts
@@ -0,0 +1,24 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
+
+const componentTestPath = 'src/components/textarea/test/with-helper-text/index.html';
+const componentName = 'tds-textarea';
+const testDescription = 'tds-textarea-with-helper-text';
+
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders textarea with helper text', async ({ page }) => {
+      /* Expect no diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
diff --git a/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts-snapshots/tds-textarea-with-helper-text-primary-darkmode-renders-textarea-with-helper-text-1-linux.png b/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts-snapshots/tds-textarea-with-helper-text-primary-darkmode-renders-textarea-with-helper-text-1-linux.png
new file mode 100644
index 000000000..b31ab8fe9
Binary files /dev/null and b/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts-snapshots/tds-textarea-with-helper-text-primary-darkmode-renders-textarea-with-helper-text-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts-snapshots/tds-textarea-with-helper-text-primary-lightmode-renders-textarea-with-helper-text-1-linux.png b/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts-snapshots/tds-textarea-with-helper-text-primary-lightmode-renders-textarea-with-helper-text-1-linux.png
new file mode 100644
index 000000000..59f6848bb
Binary files /dev/null and b/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts-snapshots/tds-textarea-with-helper-text-primary-lightmode-renders-textarea-with-helper-text-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts-snapshots/tds-textarea-with-helper-text-secondary-darkmode-renders-textarea-with-helper-text-1-linux.png b/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts-snapshots/tds-textarea-with-helper-text-secondary-darkmode-renders-textarea-with-helper-text-1-linux.png
new file mode 100644
index 000000000..0574538f7
Binary files /dev/null and b/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts-snapshots/tds-textarea-with-helper-text-secondary-darkmode-renders-textarea-with-helper-text-1-linux.png differ
diff --git a/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts-snapshots/tds-textarea-with-helper-text-secondary-lightmode-renders-textarea-with-helper-text-1-linux.png b/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts-snapshots/tds-textarea-with-helper-text-secondary-lightmode-renders-textarea-with-helper-text-1-linux.png
new file mode 100644
index 000000000..8b5a1deed
Binary files /dev/null and b/packages/core/src/components/textarea/test/with-helper-text/textarea.e2e.ts-snapshots/tds-textarea-with-helper-text-secondary-lightmode-renders-textarea-with-helper-text-1-linux.png differ
diff --git a/packages/core/src/components/toast/test/error-with-slots/toast.e2e.ts b/packages/core/src/components/toast/test/error-with-slots/toast.e2e.ts
index da51474d3..51c4387c1 100644
--- a/packages/core/src/components/toast/test/error-with-slots/toast.e2e.ts
+++ b/packages/core/src/components/toast/test/error-with-slots/toast.e2e.ts
@@ -1,21 +1,40 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/toast/test/error-with-slots/index.html';
+const componentName = 'tds-toast';
+const testDescription = 'Toast Component Tests';
 
-test.describe('Toast Component Tests', () => {
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+
+      const tdsToast = page.getByTestId('tds-toast-testid');
+      expect(tdsToast).not.toBeNull();
+    });
+
+    // Test if component renders and take screenshot
+    test('should render toast component and take screenshot', async ({ page }) => {
+      const tdsToast = page.getByTestId('tds-toast-testid');
+      await expect(tdsToast).toHaveCount(1);
+      /* Expect no difference in screenshot  */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-    const tdsToast = page.getByTestId('tds-toast-testid');
-    expect(tdsToast).not.toBeNull();
-  });
 
-  // Test if component renders and take screenshot
-  test('should render toast component and take screenshot', async ({ page }) => {
     const tdsToast = page.getByTestId('tds-toast-testid');
-    await expect(tdsToast).toHaveCount(1);
-    /* Expect no difference in screenshot  */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    expect(tdsToast).not.toBeNull();
   });
 
   // Test if component has header text "Message header"
diff --git a/packages/core/src/components/toast/test/error-with-slots/toast.e2e.ts-snapshots/Toast-Component-Tests-darkmode-should-render-toast-component-and-take-screenshot-1-linux.png b/packages/core/src/components/toast/test/error-with-slots/toast.e2e.ts-snapshots/Toast-Component-Tests-darkmode-should-render-toast-component-and-take-screenshot-1-linux.png
new file mode 100644
index 000000000..18714a1af
Binary files /dev/null and b/packages/core/src/components/toast/test/error-with-slots/toast.e2e.ts-snapshots/Toast-Component-Tests-darkmode-should-render-toast-component-and-take-screenshot-1-linux.png differ
diff --git a/packages/core/src/components/toast/test/error-with-slots/toast.e2e.ts-snapshots/Toast-Component-Tests-lightmode-should-render-toast-component-and-take-screenshot-1-linux.png b/packages/core/src/components/toast/test/error-with-slots/toast.e2e.ts-snapshots/Toast-Component-Tests-lightmode-should-render-toast-component-and-take-screenshot-1-linux.png
new file mode 100644
index 000000000..4226018f6
Binary files /dev/null and b/packages/core/src/components/toast/test/error-with-slots/toast.e2e.ts-snapshots/Toast-Component-Tests-lightmode-should-render-toast-component-and-take-screenshot-1-linux.png differ
diff --git a/packages/core/src/components/toast/test/error-with-slots/toast.e2e.ts-snapshots/Toast-Component-Tests-should-render-toast-component-and-take-screenshot-1-linux.png b/packages/core/src/components/toast/test/error-with-slots/toast.e2e.ts-snapshots/Toast-Component-Tests-should-render-toast-component-and-take-screenshot-1-linux.png
deleted file mode 100644
index 45e753085..000000000
Binary files a/packages/core/src/components/toast/test/error-with-slots/toast.e2e.ts-snapshots/Toast-Component-Tests-should-render-toast-component-and-take-screenshot-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/toast/test/information/toast.e2e.ts b/packages/core/src/components/toast/test/information/toast.e2e.ts
index 681a1e5f9..a4f2b7ec4 100644
--- a/packages/core/src/components/toast/test/information/toast.e2e.ts
+++ b/packages/core/src/components/toast/test/information/toast.e2e.ts
@@ -1,21 +1,40 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/toast/test/information/index.html';
+const componentName = 'tds-toast';
+const testDescription = 'Toast Component Tests';
 
-test.describe('Toast Component Tests', () => {
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+
+      const tdsToast = page.getByTestId('tds-toast-testid');
+      await expect(tdsToast).not.toBeNull();
+    });
+
+    // Test if component renders and take screenshot
+    test('should render toast component and take screenshot', async ({ page }) => {
+      const tdsToast = page.getByTestId('tds-toast-testid');
+      await expect(tdsToast).toHaveCount(1);
+      /* Expect no difference in screenshot  */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-    const tdsToast = page.getByTestId('tds-toast-testid');
-    await expect(tdsToast).not.toBeNull();
-  });
 
-  // Test if component renders and take screenshot
-  test('should render toast component and take screenshot', async ({ page }) => {
     const tdsToast = page.getByTestId('tds-toast-testid');
-    await expect(tdsToast).toHaveCount(1);
-    /* Expect no difference in screenshot  */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    await expect(tdsToast).not.toBeNull();
   });
 
   // Test if component has header text "Message header"
diff --git a/packages/core/src/components/toast/test/information/toast.e2e.ts-snapshots/Toast-Component-Tests-darkmode-should-render-toast-component-and-take-screenshot-1-linux.png b/packages/core/src/components/toast/test/information/toast.e2e.ts-snapshots/Toast-Component-Tests-darkmode-should-render-toast-component-and-take-screenshot-1-linux.png
new file mode 100644
index 000000000..2b1f490f0
Binary files /dev/null and b/packages/core/src/components/toast/test/information/toast.e2e.ts-snapshots/Toast-Component-Tests-darkmode-should-render-toast-component-and-take-screenshot-1-linux.png differ
diff --git a/packages/core/src/components/toast/test/information/toast.e2e.ts-snapshots/Toast-Component-Tests-lightmode-should-render-toast-component-and-take-screenshot-1-linux.png b/packages/core/src/components/toast/test/information/toast.e2e.ts-snapshots/Toast-Component-Tests-lightmode-should-render-toast-component-and-take-screenshot-1-linux.png
new file mode 100644
index 000000000..2ffc6d738
Binary files /dev/null and b/packages/core/src/components/toast/test/information/toast.e2e.ts-snapshots/Toast-Component-Tests-lightmode-should-render-toast-component-and-take-screenshot-1-linux.png differ
diff --git a/packages/core/src/components/toast/test/information/toast.e2e.ts-snapshots/Toast-Component-Tests-should-render-toast-component-and-take-screenshot-1-linux.png b/packages/core/src/components/toast/test/information/toast.e2e.ts-snapshots/Toast-Component-Tests-should-render-toast-component-and-take-screenshot-1-linux.png
deleted file mode 100644
index 23053d56f..000000000
Binary files a/packages/core/src/components/toast/test/information/toast.e2e.ts-snapshots/Toast-Component-Tests-should-render-toast-component-and-take-screenshot-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/toast/test/success-empty-action-slot/toast.e2e.ts b/packages/core/src/components/toast/test/success-empty-action-slot/toast.e2e.ts
index 7ba0796fb..e0250d5b2 100644
--- a/packages/core/src/components/toast/test/success-empty-action-slot/toast.e2e.ts
+++ b/packages/core/src/components/toast/test/success-empty-action-slot/toast.e2e.ts
@@ -1,21 +1,40 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/toast/test/success-empty-action-slot/index.html';
+const componentName = 'tds-toast';
+const testDescription = 'Toast Component Tests';
 
-test.describe('Toast Component Tests', () => {
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+
+      const tdsToast = page.getByTestId('tds-toast-testid');
+      expect(tdsToast).not.toBeNull();
+    });
+
+    // Test if component renders and take screenshot
+    test('should render toast component and take screenshot', async ({ page }) => {
+      const tdsToast = page.getByTestId('tds-toast-testid');
+      await expect(tdsToast).toHaveCount(1);
+      /* Expect no difference in screenshot  */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-    const tdsToast = page.getByTestId('tds-toast-testid');
-    expect(tdsToast).not.toBeNull();
-  });
 
-  // Test if component renders and take screenshot
-  test('should render toast component and take screenshot', async ({ page }) => {
     const tdsToast = page.getByTestId('tds-toast-testid');
-    await expect(tdsToast).toHaveCount(1);
-    /* Expect no difference in screenshot  */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    expect(tdsToast).not.toBeNull();
   });
 
   // Test if component has no action slot
diff --git a/packages/core/src/components/toast/test/success-empty-action-slot/toast.e2e.ts-snapshots/Toast-Component-Tests-darkmode-should-render-toast-component-and-take-screenshot-1-linux.png b/packages/core/src/components/toast/test/success-empty-action-slot/toast.e2e.ts-snapshots/Toast-Component-Tests-darkmode-should-render-toast-component-and-take-screenshot-1-linux.png
new file mode 100644
index 000000000..29e7e614c
Binary files /dev/null and b/packages/core/src/components/toast/test/success-empty-action-slot/toast.e2e.ts-snapshots/Toast-Component-Tests-darkmode-should-render-toast-component-and-take-screenshot-1-linux.png differ
diff --git a/packages/core/src/components/toast/test/success-empty-action-slot/toast.e2e.ts-snapshots/Toast-Component-Tests-lightmode-should-render-toast-component-and-take-screenshot-1-linux.png b/packages/core/src/components/toast/test/success-empty-action-slot/toast.e2e.ts-snapshots/Toast-Component-Tests-lightmode-should-render-toast-component-and-take-screenshot-1-linux.png
new file mode 100644
index 000000000..d7f84c4d9
Binary files /dev/null and b/packages/core/src/components/toast/test/success-empty-action-slot/toast.e2e.ts-snapshots/Toast-Component-Tests-lightmode-should-render-toast-component-and-take-screenshot-1-linux.png differ
diff --git a/packages/core/src/components/toast/test/success-empty-action-slot/toast.e2e.ts-snapshots/Toast-Component-Tests-should-render-toast-component-and-take-screenshot-1-linux.png b/packages/core/src/components/toast/test/success-empty-action-slot/toast.e2e.ts-snapshots/Toast-Component-Tests-should-render-toast-component-and-take-screenshot-1-linux.png
deleted file mode 100644
index f53027c9e..000000000
Binary files a/packages/core/src/components/toast/test/success-empty-action-slot/toast.e2e.ts-snapshots/Toast-Component-Tests-should-render-toast-component-and-take-screenshot-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/toast/test/warning-not-closable/toast.e2e.ts b/packages/core/src/components/toast/test/warning-not-closable/toast.e2e.ts
index 020a2dcff..4cdb8d6ea 100644
--- a/packages/core/src/components/toast/test/warning-not-closable/toast.e2e.ts
+++ b/packages/core/src/components/toast/test/warning-not-closable/toast.e2e.ts
@@ -1,21 +1,40 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/toast/test/warning-not-closable/index.html';
+const componentName = 'tds-toast';
+const testDescription = 'Toast Component Tests';
 
-test.describe('Toast Component Tests', () => {
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+
+      const tdsToast = page.getByTestId('tds-toast-testid');
+      expect(tdsToast).not.toBeNull();
+    });
+
+    // Test if component renders and take screenshot
+    test('should render toast component and take screenshot', async ({ page }) => {
+      const tdsToast = page.getByTestId('tds-toast-testid');
+      await expect(tdsToast).toHaveCount(1);
+      /* Expect no difference in screenshot  */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
-    const tdsToast = page.getByTestId('tds-toast-testid');
-    expect(tdsToast).not.toBeNull();
-  });
 
-  // Test if component renders and take screenshot
-  test('should render toast component and take screenshot', async ({ page }) => {
     const tdsToast = page.getByTestId('tds-toast-testid');
-    await expect(tdsToast).toHaveCount(1);
-    /* Expect no difference in screenshot  */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    expect(tdsToast).not.toBeNull();
   });
 
   // Test if component does not have close button
diff --git a/packages/core/src/components/toast/test/warning-not-closable/toast.e2e.ts-snapshots/Toast-Component-Tests-darkmode-should-render-toast-component-and-take-screenshot-1-linux.png b/packages/core/src/components/toast/test/warning-not-closable/toast.e2e.ts-snapshots/Toast-Component-Tests-darkmode-should-render-toast-component-and-take-screenshot-1-linux.png
new file mode 100644
index 000000000..e5c8fd258
Binary files /dev/null and b/packages/core/src/components/toast/test/warning-not-closable/toast.e2e.ts-snapshots/Toast-Component-Tests-darkmode-should-render-toast-component-and-take-screenshot-1-linux.png differ
diff --git a/packages/core/src/components/toast/test/warning-not-closable/toast.e2e.ts-snapshots/Toast-Component-Tests-lightmode-should-render-toast-component-and-take-screenshot-1-linux.png b/packages/core/src/components/toast/test/warning-not-closable/toast.e2e.ts-snapshots/Toast-Component-Tests-lightmode-should-render-toast-component-and-take-screenshot-1-linux.png
new file mode 100644
index 000000000..396c61ddd
Binary files /dev/null and b/packages/core/src/components/toast/test/warning-not-closable/toast.e2e.ts-snapshots/Toast-Component-Tests-lightmode-should-render-toast-component-and-take-screenshot-1-linux.png differ
diff --git a/packages/core/src/components/toast/test/warning-not-closable/toast.e2e.ts-snapshots/Toast-Component-Tests-should-render-toast-component-and-take-screenshot-1-linux.png b/packages/core/src/components/toast/test/warning-not-closable/toast.e2e.ts-snapshots/Toast-Component-Tests-should-render-toast-component-and-take-screenshot-1-linux.png
deleted file mode 100644
index fe871ee0d..000000000
Binary files a/packages/core/src/components/toast/test/warning-not-closable/toast.e2e.ts-snapshots/Toast-Component-Tests-should-render-toast-component-and-take-screenshot-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/toggle/test/default/toggle.e2e.ts b/packages/core/src/components/toggle/test/default/toggle.e2e.ts
index 76da88bb3..91a30ff92 100644
--- a/packages/core/src/components/toggle/test/default/toggle.e2e.ts
+++ b/packages/core/src/components/toggle/test/default/toggle.e2e.ts
@@ -1,36 +1,46 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/toggle/test/default/index.html';
+const componentName = 'tds-toggle';
 
-test.describe.parallel('tds-toggle', () => {
-  test('Renders basic toggle correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const labelElement = page.locator('tds-toggle label');
-    const headlineElement = page.locator('tds-toggle .toggle-headline'); // Target label underneath toggle
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    expect(labelElement).toHaveText('Label'); // Check label text
-    expect(headlineElement).toHaveText('switch me');
+    test('Renders basic toggle correctly', async ({ page }) => {
+      const labelElement = page.locator('tds-toggle label');
+      const headlineElement = page.locator('tds-toggle .toggle-headline'); // Target label underneath toggle
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+      expect(labelElement).toHaveText('Label'); // Check label text
+      expect(headlineElement).toHaveText('switch me');
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-  test('Click on toggle -> should become checked', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const toggle = page.locator('tds-toggle input');
+    test('Click on toggle -> should become checked', async ({ page }) => {
+      const toggle = page.locator('tds-toggle input');
 
-    // Expect not to be checked on render
-    let isChecked = await toggle.evaluate((element: HTMLInputElement) => element.checked);
-    expect(isChecked).toBe(false);
+      // Expect not to be checked on render
+      let isChecked = await toggle.evaluate((element: HTMLInputElement) => element.checked);
+      expect(isChecked).toBe(false);
 
-    // Click the toggle input
-    await toggle.click();
+      // Click the toggle input
+      await toggle.click();
 
-    // Expect toggle input to be checked after click
-    isChecked = await toggle.evaluate((element: HTMLInputElement) => element.checked);
-    expect(isChecked).toBe(true);
+      // Expect toggle input to be checked after click
+      isChecked = await toggle.evaluate((element: HTMLInputElement) => element.checked);
+      expect(isChecked).toBe(true);
 
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-darkmode-Click-on-toggle---should-become-checked-1-linux.png b/packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-darkmode-Click-on-toggle---should-become-checked-1-linux.png
new file mode 100644
index 000000000..da7036c70
Binary files /dev/null and b/packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-darkmode-Click-on-toggle---should-become-checked-1-linux.png differ
diff --git a/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-renders-default-dropdown-correctly-1-linux.png b/packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-darkmode-Renders-basic-toggle-correctly-1-linux.png
similarity index 50%
rename from packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-renders-default-dropdown-correctly-1-linux.png
rename to packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-darkmode-Renders-basic-toggle-correctly-1-linux.png
index 58a5cc2e7..750b89a7d 100644
Binary files a/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-renders-default-dropdown-correctly-1-linux.png and b/packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-darkmode-Renders-basic-toggle-correctly-1-linux.png differ
diff --git a/packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-lightmode-Click-on-toggle---should-become-checked-1-linux.png b/packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-lightmode-Click-on-toggle---should-become-checked-1-linux.png
new file mode 100644
index 000000000..ac6ac43e8
Binary files /dev/null and b/packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-lightmode-Click-on-toggle---should-become-checked-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-renders-accordion-with-hidden-last-border-correctly-1-linux.png b/packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-lightmode-Renders-basic-toggle-correctly-1-linux.png
similarity index 52%
rename from packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-renders-accordion-with-hidden-last-border-correctly-1-linux.png
rename to packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-lightmode-Renders-basic-toggle-correctly-1-linux.png
index 6f90f73c7..8a0b28a31 100644
Binary files a/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-renders-accordion-with-hidden-last-border-correctly-1-linux.png and b/packages/core/src/components/toggle/test/default/toggle.e2e.ts-snapshots/tds-toggle-lightmode-Renders-basic-toggle-correctly-1-linux.png differ
diff --git a/packages/core/src/components/toggle/test/disabled/toggle.e2e.ts b/packages/core/src/components/toggle/test/disabled/toggle.e2e.ts
index 4ef07643f..8784ade00 100644
--- a/packages/core/src/components/toggle/test/disabled/toggle.e2e.ts
+++ b/packages/core/src/components/toggle/test/disabled/toggle.e2e.ts
@@ -1,23 +1,38 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/toggle/test/disabled/index.html';
+const componentName = 'tds-toggle';
 
-test.describe.parallel('tds-toggle', () => {
-  test('Should have disabled attribute', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    const toggle = page.locator('tds-toggle input');
+    test('Should have disabled attribute', async ({ page }) => {
+      const toggle = page.locator('tds-toggle input');
 
-    const disabled = await toggle.evaluate((element: HTMLInputElement) => element.disabled);
-    expect(disabled).toBe(true);
+      const disabled = await toggle.evaluate((element: HTMLInputElement) => element.disabled);
+      expect(disabled).toBe(true);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('Hover over toggle -> should have inactive cursor', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('Hover over toggle -> should have inactive cursor', async ({ page }) => {
     const label = page.locator('tds-toggle label');
     const headline = page.locator('tds-toggle .toggle-headline');
     const input = page.locator('tds-toggle input');
diff --git a/packages/core/src/components/toggle/test/disabled/toggle.e2e.ts-snapshots/tds-toggle-Should-have-disabled-attribute-1-linux.png b/packages/core/src/components/toggle/test/disabled/toggle.e2e.ts-snapshots/tds-toggle-Should-have-disabled-attribute-1-linux.png
deleted file mode 100644
index 3bb1594fa..000000000
Binary files a/packages/core/src/components/toggle/test/disabled/toggle.e2e.ts-snapshots/tds-toggle-Should-have-disabled-attribute-1-linux.png and /dev/null differ
diff --git a/packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-false-renders-show-false-popover-canvas-correctly-1-linux.png b/packages/core/src/components/toggle/test/disabled/toggle.e2e.ts-snapshots/tds-toggle-darkmode-Should-have-disabled-attribute-1-linux.png
similarity index 52%
rename from packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-false-renders-show-false-popover-canvas-correctly-1-linux.png
rename to packages/core/src/components/toggle/test/disabled/toggle.e2e.ts-snapshots/tds-toggle-darkmode-Should-have-disabled-attribute-1-linux.png
index 15c7d4275..67cbe5d77 100644
Binary files a/packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts-snapshots/tds-popover-canvas-show-false-renders-show-false-popover-canvas-correctly-1-linux.png and b/packages/core/src/components/toggle/test/disabled/toggle.e2e.ts-snapshots/tds-toggle-darkmode-Should-have-disabled-attribute-1-linux.png differ
diff --git a/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-renders-disabled-datetime-component-correctly-1-linux.png b/packages/core/src/components/toggle/test/disabled/toggle.e2e.ts-snapshots/tds-toggle-lightmode-Should-have-disabled-attribute-1-linux.png
similarity index 52%
rename from packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-renders-disabled-datetime-component-correctly-1-linux.png
rename to packages/core/src/components/toggle/test/disabled/toggle.e2e.ts-snapshots/tds-toggle-lightmode-Should-have-disabled-attribute-1-linux.png
index 3bb95981f..6ef5053eb 100644
Binary files a/packages/core/src/components/datetime/test/error/datetime.e2e.ts-snapshots/tds-datetime-error-renders-disabled-datetime-component-correctly-1-linux.png and b/packages/core/src/components/toggle/test/disabled/toggle.e2e.ts-snapshots/tds-toggle-lightmode-Should-have-disabled-attribute-1-linux.png differ
diff --git a/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts b/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts
index 952eec44b..10da9298b 100644
--- a/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts
+++ b/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts
@@ -1,48 +1,58 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/tooltip/test/click/index.html';
+const componentName = 'tds-tooltip';
 
-test.describe('tds-tooltip', () => {
-  test('renders the tooltip correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+    test('renders the tooltip correctly', async ({ page }) => {
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-  test('Should not appear on hover', async ({ page }) => {
-    await page.goto(componentTestPath);
+    test('Should appears on button click', async ({ page }) => {
+      // Select the button that triggers the tooltip on click
+      const button = page.locator('tds-button#button-3');
 
-    // Select the button that triggers the tooltip on click
-    const button = page.locator('tds-button#button-3');
+      await button.click();
 
-    await button.hover();
+      const tooltipText = page.locator('text=Text inside Tooltip');
 
-    const tooltipText = page.locator('text=Text inside Tooltip');
+      // Assert that the tooltip is visible after clicking the button
+      await expect(tooltipText).toBeVisible();
 
-    // Assert that the tooltip is visible after clicking the button
-    await expect(tooltipText).toBeHidden();
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('Should appears on button click', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('Should not appear on hover', async ({ page }) => {
     // Select the button that triggers the tooltip on click
     const button = page.locator('tds-button#button-3');
 
-    await button.click();
+    await button.hover();
 
     const tooltipText = page.locator('text=Text inside Tooltip');
 
     // Assert that the tooltip is visible after clicking the button
-    await expect(tooltipText).toBeVisible();
-
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    await expect(tooltipText).toBeHidden();
   });
 
   test('Should contain correct HTML content on click', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     // Hover over the button to trigger the tooltip
     const button = page.locator('tds-button#button-3');
     await button.click();
diff --git a/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-Should-appears-on-button-click-1-linux.png b/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-Should-appears-on-button-click-1-linux.png
new file mode 100644
index 000000000..96c7baf1a
Binary files /dev/null and b/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-Should-appears-on-button-click-1-linux.png differ
diff --git a/packages/core/src/components/button/test/secondary/secondary/darkmode/button.e2e.ts-snapshots/tds-button-secondary-secondary-darkmode-renders-secondary-button-correctly-1-linux.png b/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-renders-the-tooltip-correctly-1-linux.png
similarity index 63%
rename from packages/core/src/components/button/test/secondary/secondary/darkmode/button.e2e.ts-snapshots/tds-button-secondary-secondary-darkmode-renders-secondary-button-correctly-1-linux.png
rename to packages/core/src/components/tooltip/test/click/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-renders-the-tooltip-correctly-1-linux.png
index 2e341f541..0d7e27996 100644
Binary files a/packages/core/src/components/button/test/secondary/secondary/darkmode/button.e2e.ts-snapshots/tds-button-secondary-secondary-darkmode-renders-secondary-button-correctly-1-linux.png and b/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-renders-the-tooltip-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-Should-appears-on-button-click-1-linux.png b/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-Should-appears-on-button-click-1-linux.png
new file mode 100644
index 000000000..13e9455fd
Binary files /dev/null and b/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-Should-appears-on-button-click-1-linux.png differ
diff --git a/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-renders-the-tooltip-correctly-1-linux.png b/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-renders-the-tooltip-correctly-1-linux.png
new file mode 100644
index 000000000..6b3c62fff
Binary files /dev/null and b/packages/core/src/components/tooltip/test/click/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-renders-the-tooltip-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts b/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts
index f48c84d69..cf6488dca 100644
--- a/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts
+++ b/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts
@@ -1,35 +1,47 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/tooltip/test/default/index.html';
+const componentName = 'tds-tooltip';
 
-test.describe('tds-tooltip', () => {
-  test('renders the tooltip correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+    test('renders the tooltip correctly', async ({ page }) => {
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-  test('tooltip appears on button hover', async ({ page }) => {
-    await page.goto(componentTestPath);
-
-    // Select the button that triggers the tooltip on hover
-    const button = page.locator('tds-button#button-1');
+    test('tooltip appears on button hover', async ({ page }) => {
+      // Select the button that triggers the tooltip on hover
+      const button = page.locator('tds-button#button-1');
 
-    // Use Playwright's hover method to simulate moving the mouse over the button
-    await button.hover();
+      // Use Playwright's hover method to simulate moving the mouse over the button
+      await button.hover();
 
-    const tooltip = page.locator('text=Text inside Tooltip');
+      const tooltip = page.locator('text=Text inside Tooltip');
 
-    // Assert that the tooltip is visible after hovering over the button
-    await tooltip.waitFor({ state: 'visible' });
+      // Assert that the tooltip is visible after hovering over the button
+      await tooltip.waitFor({ state: 'visible' });
 
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('tooltip contains correct HTML content on hover', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('tooltip contains correct HTML content on hover', async ({ page }) => {
     // Hover over the button to trigger the tooltip
     const button = page.locator('tds-button#button-1');
     await button.hover();
diff --git a/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-renders-the-tooltip-correctly-1-linux.png b/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-renders-the-tooltip-correctly-1-linux.png
new file mode 100644
index 000000000..adf9d8802
Binary files /dev/null and b/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-renders-the-tooltip-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-tooltip-appears-on-button-hover-1-linux.png b/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-tooltip-appears-on-button-hover-1-linux.png
new file mode 100644
index 000000000..73427bf70
Binary files /dev/null and b/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-tooltip-appears-on-button-hover-1-linux.png differ
diff --git a/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-renders-the-tooltip-correctly-1-linux.png b/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-renders-the-tooltip-correctly-1-linux.png
new file mode 100644
index 000000000..b339bee74
Binary files /dev/null and b/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-renders-the-tooltip-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-tooltip-appears-on-button-hover-1-linux.png b/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-tooltip-appears-on-button-hover-1-linux.png
new file mode 100644
index 000000000..576978a0f
Binary files /dev/null and b/packages/core/src/components/tooltip/test/default/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-tooltip-appears-on-button-hover-1-linux.png differ
diff --git a/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts b/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts
index 419fd60b8..f97352493 100644
--- a/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts
+++ b/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts
@@ -1,37 +1,48 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/tooltip/test/disabled/index.html';
-
-test.describe('tds-tooltip', () => {
-  test('renders the tooltip correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('tooltip closes when cursor is removed from the button', async ({ page }) => {
-    await page.goto(componentTestPath);
-
-    // Assuming your button and tooltip setup is already appropriate for this test
-    const button = page.locator('tds-button#button-2');
-
-    // Hover over the button to show the tooltip
-    await button.hover();
-    // Assuming you can uniquely identify the tooltip that should be visible on hover
-    const tooltip = page.locator('text=Text inside Tooltip');
-
-    await expect(tooltip).toBeVisible();
-    // Make sure tooltip is visible first
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-
-    const buttonBox = await button.boundingBox();
-    // Move the mouse to a position slightly outside the button's bounding box
-    await page.mouse.move(buttonBox.x + buttonBox.width + 10, buttonBox.y + buttonBox.height + 10);
-
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-
-    // Verify the tooltip is no longer visible
-    await expect(tooltip).toBeHidden();
+const componentName = 'tds-tooltip';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders the tooltip correctly', async ({ page }) => {
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('tooltip closes when cursor is removed from the button', async ({ page }) => {
+      // Assuming your button and tooltip setup is already appropriate for this test
+      const button = page.locator('tds-button#button-2');
+
+      // Hover over the button to show the tooltip
+      await button.hover();
+      // Assuming you can uniquely identify the tooltip that should be visible on hover
+      const tooltip = page.locator('text=Text inside Tooltip');
+
+      await expect(tooltip).toBeVisible();
+      // Make sure tooltip is visible first
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+
+      const buttonBox = await button.boundingBox();
+      // Move the mouse to a position slightly outside the button's bounding box
+      await page.mouse.move(
+        buttonBox.x + buttonBox.width + 10,
+        buttonBox.y + buttonBox.height + 10,
+      );
+
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+
+      // Verify the tooltip is no longer visible
+      await expect(tooltip).toBeHidden();
+    });
   });
 });
diff --git a/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-renders-the-tooltip-correctly-1-linux.png b/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-renders-the-tooltip-correctly-1-linux.png
new file mode 100644
index 000000000..adf9d8802
Binary files /dev/null and b/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-renders-the-tooltip-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-tooltip-closes-when-cursor-is-removed-from-the-button-1-linux.png b/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-tooltip-closes-when-cursor-is-removed-from-the-button-1-linux.png
new file mode 100644
index 000000000..73427bf70
Binary files /dev/null and b/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-tooltip-closes-when-cursor-is-removed-from-the-button-1-linux.png differ
diff --git a/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-tooltip-closes-when-cursor-is-removed-from-the-button-2-linux.png b/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-tooltip-closes-when-cursor-is-removed-from-the-button-2-linux.png
new file mode 100644
index 000000000..adf9d8802
Binary files /dev/null and b/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-darkmode-tooltip-closes-when-cursor-is-removed-from-the-button-2-linux.png differ
diff --git a/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-renders-the-tooltip-correctly-1-linux.png b/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-renders-the-tooltip-correctly-1-linux.png
new file mode 100644
index 000000000..b339bee74
Binary files /dev/null and b/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-renders-the-tooltip-correctly-1-linux.png differ
diff --git a/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-tooltip-closes-when-cursor-is-removed-from-the-button-1-linux.png b/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-tooltip-closes-when-cursor-is-removed-from-the-button-1-linux.png
new file mode 100644
index 000000000..576978a0f
Binary files /dev/null and b/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-tooltip-closes-when-cursor-is-removed-from-the-button-1-linux.png differ
diff --git a/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-tooltip-closes-when-cursor-is-removed-from-the-button-2-linux.png b/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-tooltip-closes-when-cursor-is-removed-from-the-button-2-linux.png
new file mode 100644
index 000000000..b339bee74
Binary files /dev/null and b/packages/core/src/components/tooltip/test/disabled/tooltip.e2e.ts-snapshots/tds-tooltip-lightmode-tooltip-closes-when-cursor-is-removed-from-the-button-2-linux.png differ
diff --git a/packages/core/src/utils/testConfiguration.ts b/packages/core/src/utils/testConfiguration.ts
new file mode 100644
index 000000000..8eaedf501
--- /dev/null
+++ b/packages/core/src/utils/testConfiguration.ts
@@ -0,0 +1,81 @@
+import { expect } from '@playwright/test';
+
+const themeClasses = {
+  lightmode: 'tds-mode-light',
+  darkmode: 'tds-mode-dark',
+};
+
+export const testConfigurations = {
+  withModeVariants: [
+    {
+      modeVariant: 'primary',
+      theme: 'lightmode',
+      backgroundColor: 'white',
+    },
+    {
+      modeVariant: 'primary',
+      theme: 'darkmode',
+      backgroundColor: 'var(--tds-grey-958)',
+    },
+    {
+      modeVariant: 'secondary',
+      theme: 'lightmode',
+      backgroundColor: 'var(--tds-grey-50)',
+    },
+    {
+      modeVariant: 'secondary',
+      theme: 'darkmode',
+      backgroundColor: 'var(--tds-grey-900)',
+    },
+  ],
+  basic: [
+    {
+      theme: 'lightmode',
+      backgroundColor: 'white',
+    },
+    {
+      theme: 'darkmode',
+      backgroundColor: 'var(--tds-grey-958)',
+    },
+  ],
+};
+
+export const setupPage = async (page, config, componentTestPath, componentName) => {
+  await page.goto(componentTestPath);
+
+  const evaluateData = {
+    className: themeClasses[config.theme],
+    backgroundColor: config.backgroundColor,
+  };
+
+  await page.evaluate(({ className, backgroundColor }) => {
+    document.body.classList.add(className);
+
+    const currentStyle = document.body.getAttribute('style');
+
+    document.body.setAttribute(
+      'style',
+      `${currentStyle}; background-color: ${backgroundColor}; padding-top: 20px; padding-bottom: 20px;`,
+    );
+  }, evaluateData);
+
+  if (config.modeVariant) {
+    const elementLocator = page.locator(componentName);
+
+    const count = await elementLocator.count();
+    await expect(count).toBeGreaterThanOrEqual(1);
+
+    const elements = await elementLocator.all();
+
+    elements.forEach(async (element) => {
+      await element.evaluate((elem, modeVariant) => {
+        elem.setAttribute('mode-variant', modeVariant);
+      }, config.modeVariant);
+    });
+  }
+};
+
+export const getTestDescribeText = (config, testDescription) =>
+  config.modeVariant
+    ? `${testDescription}-${config.modeVariant}-${config.theme}`
+    : `${testDescription}-${config.theme}`;