diff --git a/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts b/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts
deleted file mode 100644
index dfe77f2078..0000000000
--- a/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('card-header: basic', () => {
- test('should not have visual regressions', async ({ page }) => {
- await page.goto(`/src/components/card-header/test/basic`);
-
- await page.setIonViewport();
-
- await expect(page).toHaveScreenshot(`card-header-diff-${page.getSnapshotSettings()}.png`);
- });
-});
diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts b/core/src/components/card-header/test/basic/card-header.e2e.ts
new file mode 100644
index 0000000000..d9f3bb3bcb
--- /dev/null
+++ b/core/src/components/card-header/test/basic/card-header.e2e.ts
@@ -0,0 +1,14 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+ test.describe(title('card-header: basic'), () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.goto(`/src/components/card-header/test/basic`, config);
+
+ await page.setIonViewport();
+
+ await expect(page).toHaveScreenshot(screenshot(`card-header-diff`));
+ });
+ });
+});
diff --git a/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/card-header/test/basic/card-header.e2e-legacy.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/card/test/basic/card.e2e-legacy.ts b/core/src/components/card/test/basic/card.e2e.ts
similarity index 75%
rename from core/src/components/card/test/basic/card.e2e-legacy.ts
rename to core/src/components/card/test/basic/card.e2e.ts
index d63b09416a..cdc0d74d52 100644
--- a/core/src/components/card/test/basic/card.e2e-legacy.ts
+++ b/core/src/components/card/test/basic/card.e2e.ts
@@ -1,10 +1,11 @@
import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
-test.describe('card: basic', () => {
- test.describe('card: rendering', () => {
+configs().forEach(({ title, screenshot, config }) => {
+ test.describe(title('card: rendering'), () => {
test('should not have visual regressions with basic card', async ({ page }) => {
- await page.setContent(`
+ await page.setContent(
+ `
Card Title
@@ -16,20 +17,20 @@ test.describe('card: basic', () => {
in the woods. Wash your spirit clean.
- `);
+ `,
+ config
+ );
const card = page.locator('ion-card');
- await expect(card).toHaveScreenshot(`card-diff-${page.getSnapshotSettings()}.png`);
+ await expect(card).toHaveScreenshot(screenshot(`card-diff`));
});
});
-
- test.describe('card: feature rendering', () => {
- test.beforeEach(({ skip }) => {
- skip.rtl();
- });
-
+});
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('card: feature rendering'), () => {
test('should not have visual regressions with button cards', async ({ page }) => {
- await page.setContent(`
+ await page.setContent(
+ `
Card Title
@@ -40,35 +41,17 @@ test.describe('card: basic', () => {
in the woods. Wash your spirit clean.
- `);
+ `,
+ config
+ );
const card = page.locator('ion-card');
- await expect(card).toHaveScreenshot(`card-button-${page.getSnapshotSettings()}.png`);
- });
-
- test('should not have visual regressions with translucent cards', async ({ page, skip }) => {
- skip.mode('md', 'Translucent effect is only available in iOS mode.');
-
- await page.setContent(`
-
-
-
-
Heading 1
@@ -116,13 +105,16 @@ test.describe('card: basic', () => {
Paragraph
- `);
+ `,
+ config
+ );
const card = page.locator('ion-card');
- await expect(card).toHaveScreenshot(`card-headings-${page.getSnapshotSettings()}.png`);
+ await expect(card).toHaveScreenshot(screenshot(`card-headings`));
});
test('should render even without header or content elements', async ({ page }) => {
- await page.setContent(`
+ await page.setContent(
+ `
@@ -150,10 +142,38 @@ test.describe('card: basic', () => {
- `);
+ `,
+ config
+ );
+
+ const card = page.locator('ion-card');
+ await expect(card).toHaveScreenshot(screenshot(`card-no-content-or-header`));
+ });
+ });
+});
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('card: translucent'), () => {
+ test('should not have visual regressions with translucent cards', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+