test(app): migrate tests to playwright (#25323)

core/src/components/app/test/safe-area/app.e2e.ts

@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+import type { E2EPage } from '@utils/test/playwright';
+
+test.describe('app: safe-area', () => {
+  const testOverlay = async (page: E2EPage, trigger: string, event: string, screenshotModifier: string) => {
+    const presentEvent = await page.spyOnEvent(event);
+
+    await page.click(trigger);
+    await presentEvent.next();
+
+    // Sometimes the inner content takes a frame or two to render
+    await page.waitForChanges();
+
+    expect(await page.screenshot()).toMatchSnapshot(`app-${screenshotModifier}-diff-${page.getSnapshotSettings()}.png`);
+  };
+  test.beforeEach(async ({ page }, testInfo) => {
+    test.skip(
+      testInfo.project.metadata.rtl === true,
+      'Safe area tests only check top and bottom edges. RTL checks are not required here.'
+    );
+
+    await page.goto(`/src/components/app/test/safe-area`);
+  });
+  test('should not have visual regressions with action sheet', async ({ page }) => {
+    await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet');
+  });
+  test('should not have visual regressions with menu', async ({ page }) => {
+    await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu');
+  });
+  test('should not have visual regressions with picker', async ({ page }) => {
+    await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker');
+  });
+  test('should not have visual regressions with toast', async ({ page }) => {
+    await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast');
+  });
+});

core/src/components/app/test/safe-area/e2e.ts

@@ -1,37 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('app: safe-area', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/app/test/safe-area?ionic:_testing=true',
-  });
-
-  expect(await page.compareScreenshot()).toMatchScreenshot();
-
-  // Action Sheet
-  await page.click('#show-action-sheet');
-  await page.waitForChanges();
-  const actionSheet = await page.find('ion-action-sheet');
-  expect(await page.compareScreenshot('action-sheet')).toMatchScreenshot();
-  await actionSheet.callMethod('dismiss');
-
-  // Menu
-  await page.click('#show-menu');
-  await page.waitForChanges();
-  const menu = await page.find('ion-menu');
-  expect(await page.compareScreenshot('menu')).toMatchScreenshot();
-  await menu.callMethod('close');
-
-  // Picker
-  await page.click('#show-picker');
-  await page.waitForChanges();
-  const picker = await page.find('ion-picker');
-  expect(await page.compareScreenshot('picker')).toMatchScreenshot();
-  await picker.callMethod('dismiss');
-
-  // Toast
-  await page.click('#show-toast');
-  await page.waitForChanges();
-  const toast = await page.find('ion-toast');
-  expect(await page.compareScreenshot('toast')).toMatchScreenshot();
-  await toast.callMethod('dismiss');
-});