test(content): migrate to Playwright (#25979)

Author: averyjohnston

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

@@ -0,0 +1,15 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('content: basic', () => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios', 'ion-content does not have mode-specific styling');
+
+    await page.goto(`/src/components/content/test/basic`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`content-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/content/test/basic/content.e2e.ts-snapshots/content-diff-md-ltr-Mobile-Chrome-linux.png

@@ -29,7 +29,6 @@
         <ion-content class="ion-padding" style="text-align: center; flex: 2" id="content">
           <ion-content id="content-part">
             <f style="height: 50%"></f>
-            <ion-button onclick="toggleFullscreen()">Toggle content.fullscreen</ion-button>
             <p>
               <ion-button onclick="toggleDisplay('header')" color="secondary">Toggle header</ion-button>
               <ion-button onclick="toggleDisplay('footer')" color="secondary">Toggle footer</ion-button>
@@ -45,11 +44,6 @@
             <f></f>
             <f></f>
             <f></f>
-            <f></f>
-            <f></f>
-            <f></f>
-            <f></f>
-            <f></f>
           </ion-content>
         </ion-content>
         <ion-content class="ion-padding" style="display: none" id="content3">
@@ -79,16 +73,7 @@
 
       <script>
         const content = document.getElementById('content');
-        content.scrollEvents = true;
-        content.addEventListener('ionScrollStart', () => console.log('scroll start'));
-        content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
-        content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
 
-        function toggleFullscreen() {
-          const content = document.getElementById('content');
-          content.fullscreen = !content.fullscreen;
-          console.log('content.fullscren =', content.fullscreen);
-        }
         function toggleDisplay(id) {
           const el = document.getElementById(id);
           el.style.display = !el.style.display ? 'none' : null;

core/src/components/content/test/basic/content.e2e.ts-snapshots/content-diff-md-ltr-Mobile-Firefox-linux.png

@@ -0,0 +1,14 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('content: fixed', () => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.mode('ios', 'ion-content does not have mode-specific styling');
+
+    await page.goto(`/src/components/content/test/fixed`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`content-fixed-${page.getSnapshotSettings()}.png`);
+  });
+});