test(select): add shape snapshots

core/src/components/select/test/fill/select.e2e.ts

@@ -89,24 +89,6 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         const select = page.locator('ion-select');
         await expect(select).toHaveScreenshot(screenshot(`select-fill-solid-label-floating`));
       });
-      test('should not have visual regressions with shaped solid', async ({ page }) => {
-        await page.setContent(
-          `
-          <ion-select
-            shape="round"
-            fill="solid"
-            label="Fruit"
-            value="apple"
-          >
-            <ion-select-option value="apple">Apple</ion-select-option>
-          </ion-select>
-        `,
-          config
-        );
-
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-solid`));
-      });
       test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(
           `
@@ -153,25 +135,6 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         const select = page.locator('ion-select');
         await expect(select).toHaveScreenshot(screenshot(`select-fill-outline-label-floating`));
       });
-
-      test('should not have visual regressions with shaped outline', async ({ page }) => {
-        await page.setContent(
-          `
-          <ion-select
-            shape="round"
-            fill="outline"
-            label="Fruit"
-            value="apple"
-          >
-            <ion-select-option value="apple">Apple</ion-select-option>
-          </ion-select>
-        `,
-          config
-        );
-
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-outline`));
-      });
     });
   });
 });

core/src/components/select/test/shape/select.e2e.ts

@@ -0,0 +1,76 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('select: shape'), () => {
+    ['soft', 'round', 'rectangular'].forEach((shape) => {
+      test(`${shape} - should not have visual regressions with outline fill`, async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-select 
+            shape="${shape}"
+            fill="outline"
+            label="Label"
+            label-placement="stacked"
+            value="filledText"
+          >
+            <ion-select-option value="filledText">Filled text</ion-select-option>
+          </ion-select>
+      `,
+          config
+        );
+
+        const select = page.locator('ion-select');
+
+        await expect(select).toHaveScreenshot(screenshot(`select-shape-${shape}-fill-outline`));
+      });
+    });
+  });
+});
+
+configs({ modes: ['md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('select: shape'), () => {
+    test('round - should not have visual regressions with outline fill', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-select
+          shape="round"
+          fill="outline"
+          label="Label"
+          label-placement="stacked"
+          value="filledText"
+        >
+          <ion-select-option value="filledText">Filled text</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(screenshot(`select-shape-round-fill-outline`));
+    });
+
+    test('round - should not have visual regressions with solid fill', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-select
+          shape="round"
+          fill="solid"
+          label="Label"
+          label-placement="stacked"
+          value="filledText"
+        >
+          <ion-select-option value="filledText">Filled text</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(screenshot(`select-shape-round-fill-solid`));
+    });
+  });
+});