diff --git a/packages/core/src/components/accordion/test/basic/primary_darkmode/accordion.e2e.ts b/packages/core/src/components/accordion/test/basic/primary_darkmode/accordion.e2e.ts
new file mode 100644
index 000000000..8c0b34aab
--- /dev/null
+++ b/packages/core/src/components/accordion/test/basic/primary_darkmode/accordion.e2e.ts
@@ -0,0 +1,36 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/accordion/test/basic/primary_darkmode/index.html';
+const accordionSelector = 'tds-accordion';
+
+test.describe.parallel('tds-accordion-primary-darkmode', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto(componentTestPath);
+ });
+
+ test('renders basic accordion correctly with primary mode variant and darkmode', 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 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 });
+ });
+});
diff --git a/packages/core/src/components/accordion/test/basic/primary_darkmode/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-renders-basic-a-693c7-rectly-with-primary-mode-variant-and-darkmode-1-linux.png b/packages/core/src/components/accordion/test/basic/primary_darkmode/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-renders-basic-a-693c7-rectly-with-primary-mode-variant-and-darkmode-1-linux.png
new file mode 100644
index 000000000..8ab6aa879
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/primary_darkmode/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-renders-basic-a-693c7-rectly-with-primary-mode-variant-and-darkmode-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/basic/primary_darkmode/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/primary_darkmode/accordion.e2e.ts-snapshots/tds-accordion-primary-darkmode-second-accordion-item-opens-on-click-1-linux.png
new file mode 100644
index 000000000..396053d07
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/primary_darkmode/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/primary_darkmode/index.html b/packages/core/src/components/accordion/test/basic/primary_darkmode/index.html
new file mode 100644
index 000000000..a8375ca57
--- /dev/null
+++ b/packages/core/src/components/accordion/test/basic/primary_darkmode/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+ Accordion - Basic
+
+
+
+
+
+
+
+
+ This is the panel, which contains associated information with the header. Usually it
+ contains text, set in the same size as the header. Lorem ipsum doler sit amet.
+
+
+
Second item
+ This is the panel, which contains associated information with the header. Usually it
+ contains text, set in the same size as the header. Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit. Duis laoreet vestibulum fermentum.
+
+
+
+
diff --git a/packages/core/src/components/accordion/test/basic/primary_lightmode/accordion.e2e.ts b/packages/core/src/components/accordion/test/basic/primary_lightmode/accordion.e2e.ts
new file mode 100644
index 000000000..529065cdd
--- /dev/null
+++ b/packages/core/src/components/accordion/test/basic/primary_lightmode/accordion.e2e.ts
@@ -0,0 +1,36 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/accordion/test/basic/primary_lightmode/index.html';
+const accordionSelector = 'tds-accordion';
+
+test.describe.parallel('tds-accordion-primary-lightmode', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto(componentTestPath);
+ });
+
+ test('renders basic accordion correctly with primary mode variant and lightmode', 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 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 });
+ });
+});
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/basic/primary_lightmode/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-renders-basic--15d6b-ectly-with-primary-mode-variant-and-lightmode-1-linux.png
similarity index 100%
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/basic/primary_lightmode/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-renders-basic--15d6b-ectly-with-primary-mode-variant-and-lightmode-1-linux.png
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/primary_lightmode/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-second-accordion-item-opens-on-click-1-linux.png
similarity index 100%
rename from packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-second-accordion-item-opens-on-click-1-linux.png
rename to packages/core/src/components/accordion/test/basic/primary_lightmode/accordion.e2e.ts-snapshots/tds-accordion-primary-lightmode-second-accordion-item-opens-on-click-1-linux.png
diff --git a/packages/core/src/components/accordion/test/basic/primary_lightmode/index.html b/packages/core/src/components/accordion/test/basic/primary_lightmode/index.html
new file mode 100644
index 000000000..b5cc9aa81
--- /dev/null
+++ b/packages/core/src/components/accordion/test/basic/primary_lightmode/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+ Accordion - Basic
+
+
+
+
+
+
+
+
+ This is the panel, which contains associated information with the header. Usually it
+ contains text, set in the same size as the header. Lorem ipsum doler sit amet.
+
+
+
Second item
+ This is the panel, which contains associated information with the header. Usually it
+ contains text, set in the same size as the header. Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit. Duis laoreet vestibulum fermentum.
+
+
+
+
diff --git a/packages/core/src/components/accordion/test/basic/secondary_darkmode/accordion.e2e.ts b/packages/core/src/components/accordion/test/basic/secondary_darkmode/accordion.e2e.ts
new file mode 100644
index 000000000..da510e5bd
--- /dev/null
+++ b/packages/core/src/components/accordion/test/basic/secondary_darkmode/accordion.e2e.ts
@@ -0,0 +1,36 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/accordion/test/basic/secondary_darkmode/index.html';
+const accordionSelector = 'tds-accordion';
+
+test.describe.parallel('tds-accordion-secondary-darkmode', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto(componentTestPath);
+ });
+
+ test('renders basic accordion correctly with secondary mode variant and darkmode', 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 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 });
+ });
+});
diff --git a/packages/core/src/components/accordion/test/basic/secondary_darkmode/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-renders-basic-d2ec3-ctly-with-secondary-mode-variant-and-darkmode-1-linux.png b/packages/core/src/components/accordion/test/basic/secondary_darkmode/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-renders-basic-d2ec3-ctly-with-secondary-mode-variant-and-darkmode-1-linux.png
new file mode 100644
index 000000000..e5fe265fe
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/secondary_darkmode/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-renders-basic-d2ec3-ctly-with-secondary-mode-variant-and-darkmode-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/basic/secondary_darkmode/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/secondary_darkmode/accordion.e2e.ts-snapshots/tds-accordion-secondary-darkmode-second-accordion-item-opens-on-click-1-linux.png
new file mode 100644
index 000000000..856608306
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/secondary_darkmode/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/secondary_darkmode/index.html b/packages/core/src/components/accordion/test/basic/secondary_darkmode/index.html
new file mode 100644
index 000000000..18097f080
--- /dev/null
+++ b/packages/core/src/components/accordion/test/basic/secondary_darkmode/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+ Accordion - Basic
+
+
+
+
+
+
+
+
+ This is the panel, which contains associated information with the header. Usually it
+ contains text, set in the same size as the header. Lorem ipsum doler sit amet.
+
+
+
Second item
+ This is the panel, which contains associated information with the header. Usually it
+ contains text, set in the same size as the header. Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit. Duis laoreet vestibulum fermentum.
+
+
+
+
diff --git a/packages/core/src/components/accordion/test/basic/secondary_lightmode/accordion.e2e.ts b/packages/core/src/components/accordion/test/basic/secondary_lightmode/accordion.e2e.ts
new file mode 100644
index 000000000..2d5a704fc
--- /dev/null
+++ b/packages/core/src/components/accordion/test/basic/secondary_lightmode/accordion.e2e.ts
@@ -0,0 +1,36 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/accordion/test/basic/secondary_lightmode/index.html';
+const accordionSelector = 'tds-accordion';
+
+test.describe.parallel('tds-accordion-secondary-lightmode', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto(componentTestPath);
+ });
+
+ test('renders basic accordion correctly with secondary mode variant and lightmode', 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 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 });
+ });
+});
diff --git a/packages/core/src/components/accordion/test/basic/secondary_lightmode/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-renders-basi-f26d5-tly-with-secondary-mode-variant-and-lightmode-1-linux.png b/packages/core/src/components/accordion/test/basic/secondary_lightmode/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-renders-basi-f26d5-tly-with-secondary-mode-variant-and-lightmode-1-linux.png
new file mode 100644
index 000000000..fd82bbcab
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/secondary_lightmode/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-renders-basi-f26d5-tly-with-secondary-mode-variant-and-lightmode-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/basic/secondary_lightmode/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/secondary_lightmode/accordion.e2e.ts-snapshots/tds-accordion-secondary-lightmode-second-accordion-item-opens-on-click-1-linux.png
new file mode 100644
index 000000000..01435e4bd
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/secondary_lightmode/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/basic/secondary_lightmode/index.html b/packages/core/src/components/accordion/test/basic/secondary_lightmode/index.html
new file mode 100644
index 000000000..8e2a3b5b4
--- /dev/null
+++ b/packages/core/src/components/accordion/test/basic/secondary_lightmode/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+ Accordion - Basic
+
+
+
+
+
+
+
+
+ This is the panel, which contains associated information with the header. Usually it
+ contains text, set in the same size as the header. Lorem ipsum doler sit amet.
+
+
+
Second item
+ This is the panel, which contains associated information with the header. Usually it
+ contains text, set in the same size as the header. Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit. Duis laoreet vestibulum fermentum.
+
+
+
+
diff --git a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts b/packages/core/src/components/accordion/test/basic/unspecified/accordion.e2e.ts
similarity index 96%
rename from packages/core/src/components/accordion/test/basic/accordion.e2e.ts
rename to packages/core/src/components/accordion/test/basic/unspecified/accordion.e2e.ts
index da19067e4..7e690d9bb 100644
--- a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts
+++ b/packages/core/src/components/accordion/test/basic/unspecified/accordion.e2e.ts
@@ -1,7 +1,7 @@
import { test } from 'stencil-playwright';
import { expect } from '@playwright/test';
-const componentTestPath = 'src/components/accordion/test/basic/index.html';
+const componentTestPath = 'src/components/accordion/test/basic/unspecified/index.html';
const accordionSelector = 'tds-accordion';
test.describe.parallel('tds-accordion', () => {
diff --git a/packages/core/src/components/accordion/test/basic/unspecified/accordion.e2e.ts-snapshots/tds-accordion-renders-basic-accordion-correctly-1-linux.png b/packages/core/src/components/accordion/test/basic/unspecified/accordion.e2e.ts-snapshots/tds-accordion-renders-basic-accordion-correctly-1-linux.png
new file mode 100644
index 000000000..2aebd3b26
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/unspecified/accordion.e2e.ts-snapshots/tds-accordion-renders-basic-accordion-correctly-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/basic/unspecified/accordion.e2e.ts-snapshots/tds-accordion-second-accordion-item-opens-on-click-1-linux.png b/packages/core/src/components/accordion/test/basic/unspecified/accordion.e2e.ts-snapshots/tds-accordion-second-accordion-item-opens-on-click-1-linux.png
new file mode 100644
index 000000000..fd33ddf6e
Binary files /dev/null and b/packages/core/src/components/accordion/test/basic/unspecified/accordion.e2e.ts-snapshots/tds-accordion-second-accordion-item-opens-on-click-1-linux.png differ
diff --git a/packages/core/src/components/accordion/test/basic/index.html b/packages/core/src/components/accordion/test/basic/unspecified/index.html
similarity index 100%
rename from packages/core/src/components/accordion/test/basic/index.html
rename to packages/core/src/components/accordion/test/basic/unspecified/index.html
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..e14632f1f 100644
--- a/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts
+++ b/packages/core/src/components/accordion/test/disabled/accordion.e2e.ts
@@ -5,9 +5,12 @@ const componentTestPath = 'src/components/accordion/test/disabled/index.html';
const accordionSelector = 'tds-accordion';
test.describe.parallel('tds-accordion', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto(componentTestPath);
+ });
+
test('renders disabled accordion correctly', async ({ page }) => {
// Define selector for accordion
- await page.goto(componentTestPath);
const accordion = page.locator(accordionSelector);
// Check if accordion contains the correct text
@@ -20,7 +23,6 @@ test.describe.parallel('tds-accordion', () => {
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
@@ -40,7 +42,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');
@@ -68,7 +69,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/hide-last-border/accordion.e2e.ts b/packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts
index 3a23f963a..70fdc56f5 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
@@ -5,9 +5,12 @@ const componentTestPath = 'src/components/accordion/test/hide-last-border/index.
const accordionSelector = 'tds-accordion';
test.describe.parallel('tds-accordion', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto(componentTestPath);
+ });
+
test('renders accordion with hidden last border correctly', async ({ page }) => {
// Define selector for accordion
- await page.goto(componentTestPath);
const accordion = page.locator(accordionSelector);
// Check if accordion contains the correct text