test(accordion): migrate tests to Playwright (#25524)

core/src/components/accordion/test/a11y/accordion.e2e.ts

@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: a11y', () => {
+  test('accordions should be keyboard navigable', async ({ page, browserName }) => {
+    // TODO(FW-1764): remove skip once issue is resolved
+    test.skip(browserName === 'firefox', 'https://github.com/ionic-team/ionic-framework/issues/25529');
+
+    await page.goto(`/src/components/accordion/test/a11y`);
+    const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+    const personalInfoHeader = page.locator('ion-accordion:first-child > ion-item');
+    const billingAddressHeader = page.locator('ion-accordion:nth-child(2) > ion-item');
+    const shippingAddressHeader = page.locator('ion-accordion:nth-child(3) > ion-item');
+    const addressInput = page.locator('#address1 input');
+
+    await page.keyboard.press(tabKey);
+    await expect(personalInfoHeader).toBeFocused();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(billingAddressHeader).toBeFocused();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(shippingAddressHeader).toBeFocused();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(personalInfoHeader).toBeFocused();
+
+    await page.keyboard.press('ArrowUp');
+    await expect(shippingAddressHeader).toBeFocused();
+
+    // open Shipping Address accordion and move focus to the input inside it
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    await page.keyboard.press(tabKey);
+    await expect(addressInput).toBeFocused();
+
+    // ensure keyboard interaction doesn't move focus from body
+    await page.keyboard.press('ArrowDown');
+    await expect(addressInput).toBeFocused();
+  });
+});

core/src/components/accordion/test/a11y/e2e.ts

@@ -1,63 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-const getActiveElementText = async (page) => {
-  const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return page.evaluate((el) => el?.innerText, activeElement);
-};
-
-const getActiveInputID = async (page) => {
-  const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return page.evaluate((el) => el?.closest('ion-input')?.id, activeElement);
-};
-
-test('accordion: a11y', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/a11y?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('accordion:rtl: a11y', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/a11y?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('accordion: keyboard navigation', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/a11y?ionic:_testing=true',
-  });
-
-  await page.keyboard.press('Tab');
-  expect(await getActiveElementText(page)).toEqual('Personal Information');
-
-  await page.keyboard.press('ArrowDown');
-  expect(await getActiveElementText(page)).toEqual('Billing Address');
-
-  await page.keyboard.press('ArrowDown');
-  expect(await getActiveElementText(page)).toEqual('Shipping Address');
-
-  await page.keyboard.press('ArrowDown');
-  expect(await getActiveElementText(page)).toEqual('Personal Information');
-
-  await page.keyboard.press('ArrowUp');
-  expect(await getActiveElementText(page)).toEqual('Shipping Address');
-
-  // open Shipping Address accordion and move focus to the input inside it
-  await page.keyboard.press('Enter');
-  await page.waitForChanges();
-  await page.keyboard.press('Tab');
-
-  const activeID = await getActiveInputID(page);
-  expect(activeID).toEqual('address1');
-
-  // ensure keyboard interaction doesn't move focus from body
-  await page.keyboard.press('ArrowDown');
-  const activeIDAgain = await getActiveInputID(page);
-  expect(activeIDAgain).toEqual('address1');
-});

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

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: basic', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/accordion/test/basic`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`accordion-basic-${page.getSnapshotSettings()}.png`);
+  });
+});

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

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('accordion: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/accordion/test/basic/index.html

@@ -42,12 +42,12 @@
 
         <div class="grid ion-padding">
           <div class="grid-item">
-            <h2>Inset, Color - iOS</h2>
-            <ion-accordion-group mode="ios" expand="inset">
+            <h2>Inset, Color</h2>
+            <ion-accordion-group expand="inset" value="attractions">
               <ion-accordion value="attractions">
                 <ion-item color="primary" slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
+                  <ion-label>Attractions</ion-label>
                 </ion-item>
                 <ion-list lines="none" slot="content">
                   <ion-item>
@@ -118,12 +118,12 @@
           </div>
 
           <div class="grid-item">
-            <h2>Inset - iOS</h2>
-            <ion-accordion-group mode="ios" expand="inset">
+            <h2>Inset</h2>
+            <ion-accordion-group expand="inset" value="attractions">
               <ion-accordion value="attractions">
                 <ion-item slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
+                  <ion-label>Attractions</ion-label>
                 </ion-item>
                 <ion-list lines="none" slot="content">
                   <ion-item>
@@ -194,12 +194,12 @@
           </div>
 
           <div class="grid-item">
-            <h2>Inset, Color - MD</h2>
-            <ion-accordion-group mode="md" expand="inset">
+            <h2>Compact, Color</h2>
+            <ion-accordion-group value="attractions">
               <ion-accordion value="attractions">
                 <ion-item color="primary" slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
+                  <ion-label>Attractions</ion-label>
                 </ion-item>
                 <ion-list lines="none" slot="content">
                   <ion-item>
@@ -270,394 +270,12 @@
           </div>
 
           <div class="grid-item">
-            <h2>Inset - MD</h2>
-            <ion-accordion-group mode="md" expand="inset">
+            <h2>Compact</h2>
+            <ion-accordion-group value="attractions">
               <ion-accordion value="attractions">
                 <ion-item slot="header" button detail="false">
                   <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-        </div>
-        <div class="grid ion-padding">
-          <div class="grid-item">
-            <h2>Compact, Color - iOS</h2>
-            <ion-accordion-group mode="ios">
-              <ion-accordion value="attractions">
-                <ion-item color="primary" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item color="warning" slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item color="danger" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item color="success" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-
-          <div class="grid-item">
-            <h2>Compact - iOS</h2>
-            <ion-accordion-group mode="ios">
-              <ion-accordion value="attractions">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-
-          <div class="grid-item">
-            <h2>Compact, Color - MD</h2>
-            <ion-accordion-group mode="md">
-              <ion-accordion value="attractions">
-                <ion-item color="primary" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item color="warning" slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item color="danger" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item color="success" slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-
-          <div class="grid-item">
-            <h2>Compact - MD</h2>
-            <ion-accordion-group mode="md">
-              <ion-accordion value="attractions">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Movie Theaters</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Amusement Parks</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Mini Golf</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="dining">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" name="pizza"></ion-icon>
-                  <ion-label>Dining</ion-label>
-                </ion-item>
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Breakfast & Brunch</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>New American</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Sushi Bars</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="games">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
-                  <ion-label>Games</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Xbox</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Playstation</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Switch</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-              <ion-accordion value="exercise">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
-                  <ion-label>Exercise</ion-label>
-                </ion-item>
-
-                <ion-list lines="none" slot="content">
-                  <ion-item>
-                    <ion-label>Jog</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Swim</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-label>Nap</ion-label>
-                  </ion-item>
-                </ion-list>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-        </div>
-        <div class="grid ion-padding">
-          <div class="grid-item">
-            <h2>Multiple</h2>
-            <ion-accordion-group expand="inset" mode="md" multiple="true">
-              <ion-accordion value="attractions">
-                <ion-item slot="header" button detail="false">
-                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
-                  <ion-label> Attractions</ion-label>
+                  <ion-label>Attractions</ion-label>
                 </ion-item>
                 <ion-list lines="none" slot="content">
                   <ion-item>
@@ -729,10 +347,5 @@
         </div>
       </ion-content>
     </ion-app>
-
-    <script>
-      const multipleAccordion = document.querySelector('ion-accordion-group[multiple="true"]');
-      multipleAccordion.value = ['dining', 'exercise'];
-    </script>
   </body>
 </html>

core/src/components/accordion/test/multiple/accordion.e2e.ts

@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: multiple', () => {
+  test('should update value and not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/accordion/test/multiple`);
+    const accordionGroup = page.locator('ion-accordion-group');
+    const diningHeader = page.locator('ion-accordion[value="dining"] ion-item[slot="header"]');
+    const attractionsHeader = page.locator('ion-accordion[value="attractions"] ion-item[slot="header"]');
+
+    await expect(accordionGroup).toHaveJSProperty('value', 'attractions');
+
+    expect(await accordionGroup.screenshot()).toMatchSnapshot(`accordion-one-open-${page.getSnapshotSettings()}.png`);
+
+    await diningHeader.click();
+    await page.waitForChanges();
+
+    await expect(accordionGroup).toHaveJSProperty('value', ['attractions', 'dining']);
+
+    expect(await accordionGroup.screenshot()).toMatchSnapshot(`accordion-two-open-${page.getSnapshotSettings()}.png`);
+
+    await diningHeader.click();
+    await attractionsHeader.click();
+    await page.waitForChanges();
+
+    await expect(accordionGroup).toHaveJSProperty('value', []);
+
+    expect(await accordionGroup.screenshot()).toMatchSnapshot(`accordion-zero-open-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/accordion/test/multiple/e2e.ts

@@ -1,54 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('accordion: multiple - open', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/multiple?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const accordionGroup = await page.find('ion-accordion-group');
-  const diningAccordion = await page.find('ion-accordion[value="dining"] ion-item[slot="header"]');
-
-  const groupValue = await accordionGroup.getProperty('value');
-  expect(groupValue).toEqual('attractions');
-
-  await diningAccordion.click();
-  await page.waitForChanges();
-
-  const groupValueAgain = await accordionGroup.getProperty('value');
-  expect(groupValueAgain).toEqual(['attractions', 'dining']);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('accordion: multiple - close', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/multiple?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const accordionGroup = await page.find('ion-accordion-group');
-  const attractionsAccordion = await page.find('ion-accordion[value="attractions"] ion-item[slot="header"]');
-
-  await attractionsAccordion.click();
-  await page.waitForChanges();
-
-  const groupValue = await accordionGroup.getProperty('value');
-  expect(groupValue).toEqual([]);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});

core/src/components/accordion/test/nested/accordion.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: nested', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/accordion/test/nested`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`accordion-nested-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/accordion/test/nested/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('nested: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/nested?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/accordion/test/standalone/accordion.e2e.ts

@@ -0,0 +1,21 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: standalone', () => {
+  test('should not have accessibility violations', async ({ page }) => {
+    await page.goto(`/src/components/accordion/test/standalone`);
+
+    const results = await new AxeBuilder({ page }).analyze();
+
+    expect(results.violations).toEqual([]);
+  });
+
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/accordion/test/standalone`);
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
+      `accordion-standalone-${page.getSnapshotSettings()}.png`
+    );
+  });
+});

core/src/components/accordion/test/standalone/e2e.ts

@@ -1,20 +0,0 @@
-import { AxePuppeteer } from '@axe-core/puppeteer';
-import { newE2EPage } from '@stencil/core/testing';
-
-test('accordion: axe', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/standalone?ionic:_testing=true',
-  });
-
-  const results = await new AxePuppeteer(page).analyze();
-  expect(results.violations.length).toEqual(0);
-});
-
-test('accordion: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/accordion/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});