diff --git a/core/src/components/nav/test/basic/nav.e2e-legacy.ts b/core/src/components/nav/test/basic/nav.e2e-legacy.ts
deleted file mode 100644
index 5a384559f8..0000000000
--- a/core/src/components/nav/test/basic/nav.e2e-legacy.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('nav: basic', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.mode('md', 'Nav does not behave differently on md');
-    skip.rtl('Nav does not behave differently in rtl');
-    await page.goto('/src/components/nav/test/basic');
-  });
-
-  test('should render the root component', async ({ page }) => {
-    const pageOne = page.locator('page-one');
-
-    await expect(pageOne).toBeVisible();
-  });
-
-  test.describe('pushing a new page', () => {
-    test('should render the pushed component', async ({ page }) => {
-      const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
-      const pageOne = page.locator('page-one');
-      const pageTwo = page.locator('page-two');
-
-      await pageTwoButton.click();
-
-      await page.waitForChanges();
-
-      await expect(pageTwo).toBeVisible();
-      // Pushing a new page should hide the previous page
-      await expect(pageOne).not.toBeVisible();
-    });
-
-    test('should render the back button', async ({ page }) => {
-      const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
-      const pageTwoBackButton = page.locator('page-two ion-back-button');
-
-      await pageTwoButton.click();
-      await page.waitForChanges();
-
-      await expect(pageTwoBackButton).toBeVisible();
-    });
-  });
-
-  test('back button should pop to the previous page', async ({ page }) => {
-    const pageOne = page.locator('page-one');
-    const pageTwo = page.locator('page-two');
-    const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
-    const pageTwoBackButton = page.locator('page-two ion-back-button');
-
-    await pageTwoButton.click();
-    await page.waitForChanges();
-
-    await pageTwoBackButton.click();
-    await page.waitForChanges();
-
-    await expect(pageOne).toBeVisible();
-    // Popping a page should remove it from the DOM
-    await expect(pageTwo).toHaveCount(0);
-  });
-
-  test.describe('pushing multiple pages', () => {
-    test('should keep previous pages in the DOM', async ({ page }) => {
-      const pageOne = page.locator('page-one');
-      const pageTwo = page.locator('page-two');
-      const pageThree = page.locator('page-three');
-
-      const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
-      const pageThreeButton = page.locator('ion-button:has-text("Go to Page Three")');
-
-      await pageTwoButton.click();
-      await page.waitForChanges();
-
-      await expect(pageOne).toHaveCount(1);
-      await expect(pageTwo).toBeVisible();
-
-      await pageThreeButton.click();
-      await page.waitForChanges();
-
-      await expect(pageOne).toHaveCount(1);
-      await expect(pageTwo).toHaveCount(1);
-      await expect(pageThree).toBeVisible();
-    });
-  });
-});
diff --git a/core/src/components/nav/test/basic/nav.e2e.ts b/core/src/components/nav/test/basic/nav.e2e.ts
new file mode 100644
index 0000000000..6bef1d6c63
--- /dev/null
+++ b/core/src/components/nav/test/basic/nav.e2e.ts
@@ -0,0 +1,86 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('nav: basic'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/nav/test/basic', config);
+    });
+
+    test('should render the root component', async ({ page }) => {
+      const pageOne = page.locator('page-one');
+
+      await expect(pageOne).toBeVisible();
+    });
+
+    test.describe('pushing a new page', () => {
+      test('should render the pushed component', async ({ page }) => {
+        const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+        const pageOne = page.locator('page-one');
+        const pageTwo = page.locator('page-two');
+
+        await pageTwoButton.click();
+
+        await page.waitForChanges();
+
+        await expect(pageTwo).toBeVisible();
+        // Pushing a new page should hide the previous page
+        await expect(pageOne).not.toBeVisible();
+      });
+
+      test('should render the back button', async ({ page }) => {
+        const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+        const pageTwoBackButton = page.locator('page-two ion-back-button');
+
+        await pageTwoButton.click();
+        await page.waitForChanges();
+
+        await expect(pageTwoBackButton).toBeVisible();
+      });
+    });
+
+    test('back button should pop to the previous page', async ({ page }) => {
+      const pageOne = page.locator('page-one');
+      const pageTwo = page.locator('page-two');
+      const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+      const pageTwoBackButton = page.locator('page-two ion-back-button');
+
+      await pageTwoButton.click();
+      await page.waitForChanges();
+
+      await pageTwoBackButton.click();
+      await page.waitForChanges();
+
+      await expect(pageOne).toBeVisible();
+      // Popping a page should remove it from the DOM
+      await expect(pageTwo).toHaveCount(0);
+    });
+
+    test.describe('pushing multiple pages', () => {
+      test('should keep previous pages in the DOM', async ({ page }) => {
+        const pageOne = page.locator('page-one');
+        const pageTwo = page.locator('page-two');
+        const pageThree = page.locator('page-three');
+
+        const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+        const pageThreeButton = page.locator('ion-button:has-text("Go to Page Three")');
+
+        await pageTwoButton.click();
+        await page.waitForChanges();
+
+        await expect(pageOne).toHaveCount(1);
+        await expect(pageTwo).toBeVisible();
+
+        await pageThreeButton.click();
+        await page.waitForChanges();
+
+        await expect(pageOne).toHaveCount(1);
+        await expect(pageTwo).toHaveCount(1);
+        await expect(pageThree).toBeVisible();
+      });
+    });
+  });
+});
diff --git a/core/src/components/nav/test/modal-navigation/nav.e2e-legacy.ts b/core/src/components/nav/test/modal-navigation/nav.e2e-legacy.ts
deleted file mode 100644
index 71a7308c81..0000000000
--- a/core/src/components/nav/test/modal-navigation/nav.e2e-legacy.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { expect } from '@playwright/test';
-import type { E2EPage } from '@utils/test/playwright';
-import { test } from '@utils/test/playwright';
-
-test.describe('nav: modal-navigation', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(`/src/components/nav/test/modal-navigation`);
-    await openModal(page);
-  });
-
-  test('should render the root page', async ({ page }) => {
-    const pageOne = page.locator('page-one');
-    const pageOneHeading = page.locator('page-one h1');
-
-    await expect(pageOne).toBeVisible();
-    await expect(pageOneHeading).toHaveText('Page One');
-  });
-
-  test('should push to the next page', async ({ page }) => {
-    await page.click('#goto-page-two');
-
-    const pageTwo = page.locator('page-two');
-    const pageTwoHeading = page.locator('page-two h1');
-
-    await expect(pageTwo).toBeVisible();
-    await expect(pageTwoHeading).toHaveText('Page Two');
-  });
-
-  test('should pop to the previous page', async ({ page }) => {
-    await page.click('#goto-page-two');
-    await page.click('#goto-page-three');
-
-    const pageThree = page.locator('page-three');
-    const pageThreeHeading = page.locator('page-three h1');
-
-    await expect(pageThree).toBeVisible();
-    await expect(pageThreeHeading).toHaveText('Page Three');
-
-    await page.click('#go-back');
-
-    const pageTwo = page.locator('page-two');
-    const pageTwoHeading = page.locator('page-two h1');
-
-    // Verifies the leavingView was unmounted
-    await expect(pageThree).toHaveCount(0);
-    await expect(pageTwo).toBeVisible();
-    await expect(pageTwoHeading).toHaveText('Page Two');
-  });
-
-  test.describe('popping to the root', () => {
-    test('should render the root page', async ({ page }) => {
-      const pageTwo = page.locator('page-two');
-      const pageThree = page.locator('page-three');
-
-      await page.click('#goto-page-two');
-      await page.click('#goto-page-three');
-
-      await page.click('#goto-root');
-
-      const pageOne = page.locator('page-one');
-      const pageOneHeading = page.locator('page-one h1');
-
-      // Verifies all views besides the root were unmounted
-      await expect(pageTwo).toHaveCount(0);
-      await expect(pageThree).toHaveCount(0);
-
-      await expect(pageOne).toBeVisible();
-      await expect(pageOneHeading).toHaveText('Page One');
-    });
-  });
-});
-
-const openModal = async (page: E2EPage) => {
-  const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-  await page.click('#openModal');
-  await ionModalDidPresent.next();
-};
diff --git a/core/src/components/nav/test/modal-navigation/nav.e2e.ts b/core/src/components/nav/test/modal-navigation/nav.e2e.ts
new file mode 100644
index 0000000000..8b88138a25
--- /dev/null
+++ b/core/src/components/nav/test/modal-navigation/nav.e2e.ts
@@ -0,0 +1,82 @@
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('nav: modal-navigation'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/nav/test/modal-navigation`, config);
+      await openModal(page);
+    });
+
+    test('should render the root page', async ({ page }) => {
+      const pageOne = page.locator('page-one');
+      const pageOneHeading = page.locator('page-one h1');
+
+      await expect(pageOne).toBeVisible();
+      await expect(pageOneHeading).toHaveText('Page One');
+    });
+
+    test('should push to the next page', async ({ page }) => {
+      await page.click('#goto-page-two');
+
+      const pageTwo = page.locator('page-two');
+      const pageTwoHeading = page.locator('page-two h1');
+
+      await expect(pageTwo).toBeVisible();
+      await expect(pageTwoHeading).toHaveText('Page Two');
+    });
+
+    test('should pop to the previous page', async ({ page }) => {
+      await page.click('#goto-page-two');
+      await page.click('#goto-page-three');
+
+      const pageThree = page.locator('page-three');
+      const pageThreeHeading = page.locator('page-three h1');
+
+      await expect(pageThree).toBeVisible();
+      await expect(pageThreeHeading).toHaveText('Page Three');
+
+      await page.click('#go-back');
+
+      const pageTwo = page.locator('page-two');
+      const pageTwoHeading = page.locator('page-two h1');
+
+      // Verifies the leavingView was unmounted
+      await expect(pageThree).toHaveCount(0);
+      await expect(pageTwo).toBeVisible();
+      await expect(pageTwoHeading).toHaveText('Page Two');
+    });
+
+    test.describe('popping to the root', () => {
+      test('should render the root page', async ({ page }) => {
+        const pageTwo = page.locator('page-two');
+        const pageThree = page.locator('page-three');
+
+        await page.click('#goto-page-two');
+        await page.click('#goto-page-three');
+
+        await page.click('#goto-root');
+
+        const pageOne = page.locator('page-one');
+        const pageOneHeading = page.locator('page-one h1');
+
+        // Verifies all views besides the root were unmounted
+        await expect(pageTwo).toHaveCount(0);
+        await expect(pageThree).toHaveCount(0);
+
+        await expect(pageOne).toBeVisible();
+        await expect(pageOneHeading).toHaveText('Page One');
+      });
+    });
+  });
+});
+
+const openModal = async (page: E2EPage) => {
+  const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+  await page.click('#openModal');
+  await ionModalDidPresent.next();
+};
diff --git a/core/src/components/nav/test/nested/nav.e2e-legacy.ts b/core/src/components/nav/test/nested/nav.e2e-legacy.ts
deleted file mode 100644
index 29758047f4..0000000000
--- a/core/src/components/nav/test/nested/nav.e2e-legacy.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-// Tests for ion-nav used in ion-router
-test.describe('nav: nested', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.mode('md', 'Nav does not behave differently on md');
-    skip.rtl('Nav does not behave differently in rtl');
-    await page.goto('/src/components/nav/test/nested');
-  });
-
-  test('should push pages with nested ion-nav', async ({ page }) => {
-    const pageOne = page.locator('page-one');
-    const pageTwo = page.locator('page-two');
-
-    const pageTwoButton = page.locator('ion-button:has-text("Go to Page 2")');
-    const pageTwoTwoButton = page.locator('ion-button:has-text("Go to Page 2.2")');
-
-    await pageTwoButton.click();
-    await page.waitForChanges();
-
-    const pageTwoOne = page.locator('page-two-one');
-    const pageTwoTwo = page.locator('page-two-two');
-
-    await expect(pageOne).toHaveCount(1);
-    await expect(pageTwo).toBeVisible();
-    await expect(pageTwoOne).toBeVisible();
-
-    await pageTwoTwoButton.click();
-    await page.waitForChanges();
-
-    await expect(pageTwoOne).toHaveCount(1);
-    await expect(pageTwoTwo).toBeVisible();
-
-    const pageThreeButton = page.locator('ion-button:has-text("Go to Page 3")');
-
-    await pageThreeButton.click();
-    await page.waitForChanges();
-
-    const pageThree = page.locator('page-three');
-
-    await expect(pageThree).toBeVisible();
-    await expect(pageTwo).toHaveCount(1);
-    await expect(pageOne).toHaveCount(1);
-  });
-
-  test.describe('back button', () => {
-    test('should work with nested ion-nav', async ({ page }) => {
-      const pageTwoButton = page.locator('ion-button:has-text("Go to Page 2")');
-      const pageTwoTwoButton = page.locator('ion-button:has-text("Go to Page 2.2")');
-
-      await pageTwoButton.click();
-      await page.waitForChanges();
-
-      const pageTwoOne = page.locator('page-two-one');
-      const pageTwoTwo = page.locator('page-two-two');
-
-      await pageTwoTwoButton.click();
-      await page.waitForChanges();
-
-      const pageThreeButton = page.locator('ion-button:has-text("Go to Page 3")');
-      const pageThreeBackButton = page.locator('page-three ion-back-button');
-
-      await pageThreeButton.click();
-      await page.waitForChanges();
-
-      const pageThree = page.locator('page-three');
-
-      await pageThreeBackButton.click();
-      await page.waitForChanges();
-
-      await expect(pageThree).toHaveCount(0);
-      await expect(pageTwoTwo).toBeVisible();
-
-      const pageTwoTwoBackButton = page.locator('page-two-two ion-back-button');
-
-      await pageTwoTwoBackButton.click();
-      await page.waitForChanges();
-
-      await expect(pageTwoTwo).toHaveCount(0);
-      await expect(pageTwoOne).toBeVisible();
-    });
-  });
-});
diff --git a/core/src/components/nav/test/nested/nav.e2e.ts b/core/src/components/nav/test/nested/nav.e2e.ts
new file mode 100644
index 0000000000..eb2ec32922
--- /dev/null
+++ b/core/src/components/nav/test/nested/nav.e2e.ts
@@ -0,0 +1,88 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+// Tests for ion-nav used in ion-router
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('nav: nested'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/nav/test/nested', config);
+    });
+
+    test('should push pages with nested ion-nav', async ({ page }) => {
+      const pageOne = page.locator('page-one');
+      const pageTwo = page.locator('page-two');
+
+      const pageTwoButton = page.locator('ion-button:has-text("Go to Page 2")');
+      const pageTwoTwoButton = page.locator('ion-button:has-text("Go to Page 2.2")');
+
+      await pageTwoButton.click();
+      await page.waitForChanges();
+
+      const pageTwoOne = page.locator('page-two-one');
+      const pageTwoTwo = page.locator('page-two-two');
+
+      await expect(pageOne).toHaveCount(1);
+      await expect(pageTwo).toBeVisible();
+      await expect(pageTwoOne).toBeVisible();
+
+      await pageTwoTwoButton.click();
+      await page.waitForChanges();
+
+      await expect(pageTwoOne).toHaveCount(1);
+      await expect(pageTwoTwo).toBeVisible();
+
+      const pageThreeButton = page.locator('ion-button:has-text("Go to Page 3")');
+
+      await pageThreeButton.click();
+      await page.waitForChanges();
+
+      const pageThree = page.locator('page-three');
+
+      await expect(pageThree).toBeVisible();
+      await expect(pageTwo).toHaveCount(1);
+      await expect(pageOne).toHaveCount(1);
+    });
+
+    test.describe('back button', () => {
+      test('should work with nested ion-nav', async ({ page }) => {
+        const pageTwoButton = page.locator('ion-button:has-text("Go to Page 2")');
+        const pageTwoTwoButton = page.locator('ion-button:has-text("Go to Page 2.2")');
+
+        await pageTwoButton.click();
+        await page.waitForChanges();
+
+        const pageTwoOne = page.locator('page-two-one');
+        const pageTwoTwo = page.locator('page-two-two');
+
+        await pageTwoTwoButton.click();
+        await page.waitForChanges();
+
+        const pageThreeButton = page.locator('ion-button:has-text("Go to Page 3")');
+        const pageThreeBackButton = page.locator('page-three ion-back-button');
+
+        await pageThreeButton.click();
+        await page.waitForChanges();
+
+        const pageThree = page.locator('page-three');
+
+        await pageThreeBackButton.click();
+        await page.waitForChanges();
+
+        await expect(pageThree).toHaveCount(0);
+        await expect(pageTwoTwo).toBeVisible();
+
+        const pageTwoTwoBackButton = page.locator('page-two-two ion-back-button');
+
+        await pageTwoTwoBackButton.click();
+        await page.waitForChanges();
+
+        await expect(pageTwoTwo).toHaveCount(0);
+        await expect(pageTwoOne).toBeVisible();
+      });
+    });
+  });
+});
diff --git a/core/src/components/nav/test/routing/nav.e2e-legacy.ts b/core/src/components/nav/test/routing/nav.e2e-legacy.ts
deleted file mode 100644
index 59ed134102..0000000000
--- a/core/src/components/nav/test/routing/nav.e2e-legacy.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-// Tests for ion-nav used in ion-router
-test.describe('nav: routing', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.mode('md', 'Nav does not behave differently on md');
-    skip.rtl('Nav does not behave differently in rtl');
-    await page.goto('/src/components/nav/test/routing');
-  });
-
-  test('should render the root component', async ({ page }) => {
-    const pageRoot = page.locator('page-root');
-
-    await expect(pageRoot).toBeVisible();
-  });
-
-  test.describe('pushing a new page', () => {
-    test('should render the pushed component', async ({ page }) => {
-      const pageRoot = page.locator('page-root');
-      const pageOne = page.locator('page-one');
-      const pageTwo = page.locator('page-two');
-
-      const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
-      const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
-
-      await pageOneButton.click();
-      await page.waitForChanges();
-
-      await expect(pageOne).toBeVisible();
-      // Pushing a new page should hide the previous page
-      await expect(pageRoot).not.toBeVisible();
-      await expect(pageRoot).toHaveCount(1);
-
-      await pageTwoButton.click();
-      await page.waitForChanges();
-
-      await expect(pageTwo).toBeVisible();
-      // Pushing a new page should hide the previous page
-      await expect(pageOne).not.toBeVisible();
-      await expect(pageOne).toHaveCount(1);
-    });
-
-    test('should render the back button', async ({ page }) => {
-      const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
-      const pageOneBackButton = page.locator('page-one ion-back-button');
-
-      await pageOneButton.click();
-      await page.waitForChanges();
-
-      await expect(pageOneBackButton).toBeVisible();
-    });
-  });
-
-  test('back button should pop to the previous page', async ({ page }) => {
-    const pageRoot = page.locator('page-root');
-    const pageOne = page.locator('page-one');
-
-    const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
-    const pageOneBackButton = page.locator('page-one ion-back-button');
-
-    await pageOneButton.click();
-    await page.waitForChanges();
-
-    await pageOneBackButton.click();
-    await page.waitForChanges();
-
-    await expect(pageRoot).toBeVisible();
-    // Popping a page should remove it from the DOM
-    await expect(pageOne).toHaveCount(0);
-  });
-
-  test.describe('pushing multiple pages', () => {
-    test('should keep previous pages in the DOM', async ({ page }) => {
-      const pageRoot = page.locator('page-root');
-      const pageOne = page.locator('page-one');
-      const pageTwo = page.locator('page-two');
-      const pageThree = page.locator('page-three');
-
-      const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
-      const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
-      const pageThreeButton = page.locator('ion-button:has-text("Go to Page Three")');
-
-      await pageOneButton.click();
-      await page.waitForChanges();
-
-      await expect(pageRoot).toHaveCount(1);
-      await expect(pageOne).toBeVisible();
-
-      await pageTwoButton.click();
-      await page.waitForChanges();
-
-      await expect(pageRoot).toHaveCount(1);
-      await expect(pageOne).toHaveCount(1);
-      await expect(pageTwo).toBeVisible();
-
-      await pageThreeButton.click();
-      await page.waitForChanges();
-
-      await expect(pageRoot).toHaveCount(1);
-      await expect(pageOne).toHaveCount(1);
-      await expect(pageTwo).toHaveCount(1);
-      await expect(pageThree).toBeVisible();
-    });
-  });
-});
diff --git a/core/src/components/nav/test/routing/nav.e2e.ts b/core/src/components/nav/test/routing/nav.e2e.ts
new file mode 100644
index 0000000000..33f02c9882
--- /dev/null
+++ b/core/src/components/nav/test/routing/nav.e2e.ts
@@ -0,0 +1,110 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+// Tests for ion-nav used in ion-router
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('nav: routing'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/nav/test/routing', config);
+    });
+
+    test('should render the root component', async ({ page }) => {
+      const pageRoot = page.locator('page-root');
+
+      await expect(pageRoot).toBeVisible();
+    });
+
+    test.describe('pushing a new page', () => {
+      test('should render the pushed component', async ({ page }) => {
+        const pageRoot = page.locator('page-root');
+        const pageOne = page.locator('page-one');
+        const pageTwo = page.locator('page-two');
+
+        const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
+        const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+
+        await pageOneButton.click();
+        await page.waitForChanges();
+
+        await expect(pageOne).toBeVisible();
+        // Pushing a new page should hide the previous page
+        await expect(pageRoot).not.toBeVisible();
+        await expect(pageRoot).toHaveCount(1);
+
+        await pageTwoButton.click();
+        await page.waitForChanges();
+
+        await expect(pageTwo).toBeVisible();
+        // Pushing a new page should hide the previous page
+        await expect(pageOne).not.toBeVisible();
+        await expect(pageOne).toHaveCount(1);
+      });
+
+      test('should render the back button', async ({ page }) => {
+        const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
+        const pageOneBackButton = page.locator('page-one ion-back-button');
+
+        await pageOneButton.click();
+        await page.waitForChanges();
+
+        await expect(pageOneBackButton).toBeVisible();
+      });
+    });
+
+    test('back button should pop to the previous page', async ({ page }) => {
+      const pageRoot = page.locator('page-root');
+      const pageOne = page.locator('page-one');
+
+      const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
+      const pageOneBackButton = page.locator('page-one ion-back-button');
+
+      await pageOneButton.click();
+      await page.waitForChanges();
+
+      await pageOneBackButton.click();
+      await page.waitForChanges();
+
+      await expect(pageRoot).toBeVisible();
+      // Popping a page should remove it from the DOM
+      await expect(pageOne).toHaveCount(0);
+    });
+
+    test.describe('pushing multiple pages', () => {
+      test('should keep previous pages in the DOM', async ({ page }) => {
+        const pageRoot = page.locator('page-root');
+        const pageOne = page.locator('page-one');
+        const pageTwo = page.locator('page-two');
+        const pageThree = page.locator('page-three');
+
+        const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
+        const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
+        const pageThreeButton = page.locator('ion-button:has-text("Go to Page Three")');
+
+        await pageOneButton.click();
+        await page.waitForChanges();
+
+        await expect(pageRoot).toHaveCount(1);
+        await expect(pageOne).toBeVisible();
+
+        await pageTwoButton.click();
+        await page.waitForChanges();
+
+        await expect(pageRoot).toHaveCount(1);
+        await expect(pageOne).toHaveCount(1);
+        await expect(pageTwo).toBeVisible();
+
+        await pageThreeButton.click();
+        await page.waitForChanges();
+
+        await expect(pageRoot).toHaveCount(1);
+        await expect(pageOne).toHaveCount(1);
+        await expect(pageTwo).toHaveCount(1);
+        await expect(pageThree).toBeVisible();
+      });
+    });
+  });
+});