test(nav): migrate to generators (#27332)

Issue number: N/A

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Nav tests use legacy syntax

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Nav tests use modern syntax

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

core/src/components/nav/test/basic/nav.e2e-legacy.ts

@@ -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();
-    });
-  });
-});

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();
+      });
+    });
+  });
+});

core/src/components/nav/test/modal-navigation/nav.e2e-legacy.ts

@@ -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();
-};

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();
+};

core/src/components/nav/test/nested/nav.e2e-legacy.ts

@@ -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();
-    });
-  });
-});

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();
+      });
+    });
+  });
+});

core/src/components/nav/test/routing/nav.e2e-legacy.ts

@@ -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();
-    });
-  });
-});

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();
+      });
+    });
+  });
+});