test(breadcrumbs): update Playwright tests to use setContent (#30518)

Blocks #30513

----

The latest Playwright update in #30513 exposed an issue in Safari where
dynamically setting the RTL direction on the document no longer works.
This causes the Breadcrumbs screenshots to fail because they are not
flipping the arrow icon.

This PR converts the Breadcrumbs e2e tests to use `setContent` which
works properly with RTL and also breaks the tests up more so they aren't
one giant screenshot.

- The
[Basic](https://ionic-framework-git-bc-test-breadcrumbs-ionic1.vercel.app/src/components/breadcrumbs/test/basic)
test has been updated to focus mainly on the default breadcrumbs without
any colors or collapsed breadcrumbs.
- The
[Collapsed](https://ionic-framework-git-bc-test-breadcrumbs-ionic1.vercel.app/src/components/breadcrumbs/test/collapsed)
test has been updated to remove some of the duplicated examples and
ported over one from the basic test.
- The
[Color](https://ionic-framework-git-bc-test-breadcrumbs-ionic1.vercel.app/src/components/breadcrumbs/test/color)
test was added which focuses on setting different colors on the
Breadcrumbs / Breadcrumb and moves this out of the basic test.

---------

Co-authored-by: Brandy Smith <[email protected]>

Author: brandyscarney

core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts

@@ -4,11 +4,226 @@ import { configs, test } from '@utils/test/playwright';
 configs().forEach(({ config, screenshot, title }) => {
   test.describe(title('breadcrumbs: basic'), () => {
     test('should not have visual regressions', async ({ page }) => {
-      await page.goto(`/src/components/breadcrumbs/test/basic`, config);
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb>First</ion-breadcrumb>
+          <ion-breadcrumb>Second</ion-breadcrumb>
+          <ion-breadcrumb>Third</ion-breadcrumb>
+          <ion-breadcrumb>Fourth</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
 
-      await page.setIonViewport();
+      const breadcrumbs = page.locator('ion-breadcrumbs');
 
-      await expect(page).toHaveScreenshot(screenshot(`breadcrumb-diff`));
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-basic`));
+    });
+
+    test('should not have visual regressions with links', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#">First</ion-breadcrumb>
+          <ion-breadcrumb href="#">Second</ion-breadcrumb>
+          <ion-breadcrumb href="#">Third</ion-breadcrumb>
+          <ion-breadcrumb>Fourth</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-links`));
+    });
+
+    test('should not have visual regressions with custom separators', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb>
+            First
+            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            Second
+            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            Third
+            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            Fourth
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-custom-separators`));
+    });
+
+    test('should not have visual regressions with slotted start icons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb>
+            <ion-icon slot="start" name="home"></ion-icon>
+            First
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            <ion-icon slot="start" name="folder"></ion-icon>
+            Second
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            <ion-icon slot="start" name="folder"></ion-icon>
+            Third
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            <ion-icon slot="start" name="document"></ion-icon>
+            Fourth
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-slotted-start-icons`));
+    });
+
+    test('should not have visual regressions with slotted end icons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb>
+            First
+            <ion-icon slot="end" name="home"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            Second
+            <ion-icon slot="end" name="folder"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            Third
+            <ion-icon slot="end" name="folder"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            Fourth
+            <ion-icon slot="end" name="document"></ion-icon>
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-slotted-end-icons`));
+    });
+
+    test('should not have visual regressions in a toolbar', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toolbar>
+          <ion-breadcrumbs>
+            <ion-breadcrumb>First</ion-breadcrumb>
+            <ion-breadcrumb>Second</ion-breadcrumb>
+            <ion-breadcrumb>Third</ion-breadcrumb>
+            <ion-breadcrumb>Fourth</ion-breadcrumb>
+          </ion-breadcrumbs>
+        </ion-toolbar>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-in-toolbar`));
+    });
+  });
+});
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('breadcrumbs: states'), () => {
+    test('should not have visual regressions when focused', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#">First</ion-breadcrumb>
+          <ion-breadcrumb href="#">Second</ion-breadcrumb>
+          <ion-breadcrumb href="#" class="ion-focused">Third</ion-breadcrumb>
+          <ion-breadcrumb>Fourth</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-focused`));
+    });
+
+    test('should not have visual regressions when all breadcrumbs are disabled', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb disabled>First</ion-breadcrumb>
+          <ion-breadcrumb disabled>Second</ion-breadcrumb>
+          <ion-breadcrumb disabled>Third</ion-breadcrumb>
+          <ion-breadcrumb disabled>Fourth</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-all-disabled`));
+    });
+
+    test('should not have visual regressions when one breadcrumb is disabled', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb>First</ion-breadcrumb>
+          <ion-breadcrumb disabled>Second</ion-breadcrumb>
+          <ion-breadcrumb>Third</ion-breadcrumb>
+          <ion-breadcrumb>Fourth</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-one-disabled`));
+    });
+
+    test('should not have visual regressions when setting a different breadcrumb to active', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-breadcrumbs>
+          <ion-breadcrumb>First</ion-breadcrumb>
+          <ion-breadcrumb>Second</ion-breadcrumb>
+          <ion-breadcrumb active>Third</ion-breadcrumb>
+          <ion-breadcrumb>Fourth</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-custom-active`));
     });
   });
 });