chore(playwright): enable type checking (#25034)

core/playwright.config.ts

@@ -102,7 +102,7 @@ const config: PlaywrightTestConfig = {
   projects: generateProjects(),
   webServer: {
     command: 'python3 -m http.server 3333',
-    port: '3333'
+    port: 3333
   }
 };
 

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

@@ -1,8 +1,8 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-const getActiveElementText = async (page) => {
+const getActiveElementText = async page => {
   const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return await page.evaluate(el => el && el.innerText, activeElement);
+  return page.evaluate(el => el && el.innerText, activeElement);
 }
 
 test('accordion: a11y', async () => {

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

@@ -1,5 +1,5 @@
-import { newE2EPage } from '@stencil/core/testing';
 import { AxePuppeteer } from '@axe-core/puppeteer';
+import { newE2EPage } from '@stencil/core/testing';
 
 test('accordion: axe', async () => {
   const page = await newE2EPage({

core/src/components/action-sheet/test/basic/e2e.ts

@@ -1,10 +1,11 @@
-import { testActionSheet, testActionSheetAlert, testActionSheetBackdrop } from '../test.utils';
 import { newE2EPage } from '@stencil/core/testing';
 
+import { testActionSheet, testActionSheetAlert, testActionSheetBackdrop } from '../test.utils';
+
 const DIRECTORY = 'basic';
-const getActiveElementText = async (page) => {
+const getActiveElementText = async page => {
   const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return await page.evaluate(el => el && el.textContent, activeElement);
+  return page.evaluate(el => el && el.textContent, activeElement);
 }
 
 test('action-sheet: data', async () => {
@@ -45,7 +46,7 @@ test('action-sheet: focus trap', async () => {
   await page.click('#basic');
   await page.waitForSelector('#basic');
 
-  let actionSheet = await page.find('ion-action-sheet');
+  const actionSheet = await page.find('ion-action-sheet');
 
   expect(actionSheet).not.toBe(null);
   await actionSheet.waitForVisible();
@@ -152,12 +153,12 @@ test('action-sheet: htmlAttributes', async () => {
   await page.click('#basic');
   await page.waitForSelector('#basic');
 
-  let toast = await page.find('ion-action-sheet');
+  const toast = await page.find('ion-action-sheet');
 
   expect(toast).not.toBe(null);
   await toast.waitForVisible();
 
-  const attribute = await page.evaluate((el) => document.querySelector('ion-action-sheet').getAttribute('data-testid'));
+  const attribute = await page.evaluate(el => document.querySelector('ion-action-sheet').getAttribute('data-testid'));
 
   expect(attribute).toEqual('basic-action-sheet');
 });

core/src/components/action-sheet/test/test.utils.ts

@@ -1,5 +1,4 @@
 import { newE2EPage } from '@stencil/core/testing';
-
 import { generateE2EUrl } from '@utils/test';
 
 export const testActionSheet = async (

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

@@ -1,10 +1,11 @@
-import { testAlert } from '../test.utils';
 import { newE2EPage } from '@stencil/core/testing';
 
+import { testAlert } from '../test.utils';
+
 const DIRECTORY = 'basic';
-const getActiveElementText = async (page) => {
+const getActiveElementText = async page => {
   const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return await page.evaluate(el => el && el.textContent, activeElement);
+  return page.evaluate(el => el && el.textContent, activeElement);
 }
 
 test('alert: focus trap', async () => {
@@ -13,7 +14,7 @@ test('alert: focus trap', async () => {
   await page.click('#multipleButtons');
   await page.waitForSelector('#multipleButtons');
 
-  let alert = await page.find('ion-alert');
+  const alert = await page.find('ion-alert');
 
   expect(alert).not.toBe(null);
   await alert.waitForVisible();
@@ -111,12 +112,12 @@ test('alert: htmlAttributes', async () => {
   await page.click('#basic');
   await page.waitForSelector('#basic');
 
-  let alert = await page.find('ion-alert');
+  const alert = await page.find('ion-alert');
 
   expect(alert).not.toBe(null);
   await alert.waitForVisible();
 
-  const attribute = await page.evaluate((el) => document.querySelector('ion-alert').getAttribute('data-testid'));
+  const attribute = await page.evaluate(el => document.querySelector('ion-alert').getAttribute('data-testid'));
 
   expect(attribute).toEqual('basic-alert');
 });

core/src/components/alert/test/test.utils.ts

@@ -1,5 +1,4 @@
 import { newE2EPage } from '@stencil/core/testing';
-
 import { generateE2EUrl } from '@utils/test';
 
 export const testAlert = async (

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

@@ -1,4 +1,4 @@
-import { expect, describe } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('button: basic', () => {

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

@@ -111,7 +111,6 @@ test('datetime:rtl: basic', async () => {
   expect(compare).toMatchScreenshot();
 });
 
-
 describe('datetime: confirm date', () => {
 
   test('should set the date value based on the selected date', async () => {

core/src/components/datetime/test/presentation/e2e.ts

@@ -1,4 +1,4 @@
-import { newE2EPage, E2EPage } from '@stencil/core/testing';
+import { E2EPage, newE2EPage } from '@stencil/core/testing';
 
 test('presentation', async () => {
   const page = await newE2EPage({

core/src/components/datetime/test/set-value/e2e.ts

@@ -34,4 +34,3 @@ describe('datetime: setting the value', () => {
     expect(activeTime).toEqualText('12:40 PM');
   })
 })
-

core/src/components/fab/test/test.utils.ts

@@ -1,5 +1,4 @@
 import { newE2EPage } from '@stencil/core/testing';
-
 import { generateE2EUrl } from '@utils/test';
 
 export const testFab = async (

core/src/components/footer/test/fade/e2e.ts

@@ -1,6 +1,4 @@
-import type { E2EPage } from '@stencil/core/testing';
+import { E2EPage, newE2EPage } from '@stencil/core/testing';
-import { newE2EPage } from '@stencil/core/testing';
-
 import { scrollToBottom } from '@utils/test';
 
 describe('footer: fade: iOS', () => {

core/src/components/footer/test/translucent/e2e.ts

@@ -1,5 +1,4 @@
 import { newE2EPage } from '@stencil/core/testing';
-
 import { checkComponentModeClasses } from '@utils/test';
 
 test('footer: translucent', async () => {

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

@@ -1,5 +1,5 @@
-import { newE2EPage } from '@stencil/core/testing';
 import { AxePuppeteer } from '@axe-core/puppeteer';
+import { newE2EPage } from '@stencil/core/testing';
 
 test('header: axe', async () => {
   const page = await newE2EPage({

core/src/components/header/test/translucent/e2e.ts

@@ -1,5 +1,4 @@
 import { newE2EPage } from '@stencil/core/testing';
-
 import { checkComponentModeClasses } from '@utils/test';
 
 test('header: translucent', async () => {

core/src/components/infinite-scroll/test/basic/e2e.ts

@@ -1,12 +1,10 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { E2EPage, newE2EPage } from '@stencil/core/testing';
-import type { E2EPage } from '@stencil/core/testing';
-
 
 /**
  * Scrolls an `ion-content` element to the bottom, triggering the `ionInfinite` event.
  * Waits for the custom event to complete.
  */
-async function scrollIonContentPage(page: E2EPage) {
+const scrollIonContentPage = async (page: E2EPage) => {
   const content = await page.find('ion-content');
   await content.callMethod('scrollToBottom');
   await page.waitForChanges();

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

@@ -37,7 +37,6 @@ test('input: basic', async () => {
     expect(compare).toMatchScreenshot();
   }
 
-
 });
 
 test('input: basic should not error on input', async () => {
@@ -49,7 +48,7 @@ test('input: basic should not error on input', async () => {
 
   page.on('console', msg => {
     if (msg.type() === 'error') {
-      errors.push(msg.text);
+      errors.push(msg.text());
     }
   });
 

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

@@ -1,5 +1,5 @@
-import { newE2EPage } from '@stencil/core/testing';
 import { AxePuppeteer } from '@axe-core/puppeteer';
+import { newE2EPage } from '@stencil/core/testing';
 
 test('item: axe', async () => {
   const page = await newE2EPage({

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

@@ -1,10 +1,11 @@
-import { testLoading } from '../test.utils';
 import { newE2EPage } from '@stencil/core/testing';
 
+import { testLoading } from '../test.utils';
+
 const DIRECTORY = 'basic';
-const getActiveElementText = async (page) => {
+const getActiveElementText = async page => {
   const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return await page.evaluate(el => el && el.textContent, activeElement);
+  return page.evaluate(el => el && el.textContent, activeElement);
 }
 
 test('loading: focus trap', async () => {
@@ -13,7 +14,7 @@ test('loading: focus trap', async () => {
   await page.click('#html-content-loading');
   await page.waitForSelector('#html-content-loading');
 
-  let loading = await page.find('ion-loading');
+  const loading = await page.find('ion-loading');
 
   expect(loading).not.toBe(null);
   await loading.waitForVisible();
@@ -102,12 +103,12 @@ test('loading: htmlAttributes', async () => {
   await page.click('#basic-loading');
   await page.waitForSelector('#basic-loading');
 
-  let alert = await page.find('ion-loading');
+  const alert = await page.find('ion-loading');
 
   expect(alert).not.toBe(null);
   await alert.waitForVisible();
 
-  const attribute = await page.evaluate((el) => document.querySelector('ion-loading').getAttribute('data-testid'));
+  const attribute = await page.evaluate(el => document.querySelector('ion-loading').getAttribute('data-testid'));
 
   expect(attribute).toEqual('basic-loading');
 });

core/src/components/loading/test/test.utils.ts

@@ -1,5 +1,4 @@
 import { newE2EPage } from '@stencil/core/testing';
-
 import { generateE2EUrl } from '@utils/test';
 
 export const testLoading = async (

core/src/components/menu-button/test/a11y/e2e.ts

@@ -1,5 +1,5 @@
-import { newE2EPage } from '@stencil/core/testing';
 import { AxePuppeteer } from '@axe-core/puppeteer';
+import { newE2EPage } from '@stencil/core/testing';
 
 test('menu-button: axe', async () => {
   const page = await newE2EPage({

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

@@ -1,5 +1,5 @@
-import { newE2EPage } from '@stencil/core/testing';
 import { AxePuppeteer } from '@axe-core/puppeteer';
+import { newE2EPage } from '@stencil/core/testing';
 
 test('menu: axe', async () => {
   const page = await newE2EPage({

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

@@ -1,10 +1,11 @@
-import { testMenu } from '../test.utils';
 import { newE2EPage } from '@stencil/core/testing';
 
+import { testMenu } from '../test.utils';
+
 const DIRECTORY = 'basic';
-const getActiveElementID = async (page) => {
+const getActiveElementID = async page => {
   const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return await page.evaluate(el => el && el.id, activeElement);
+  return page.evaluate(el => el && el.id, activeElement);
 }
 
 test('menu: start menu', async () => {

core/src/components/menu/test/focus-trap/e2e.ts

@@ -1,8 +1,8 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-const getActiveElementID = async (page) => {
+const getActiveElementID = async page => {
   const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return await page.evaluate(el => el && el.id, activeElement);
+  return page.evaluate(el => el && el.id, activeElement);
 }
 
 test('menu: focus trap with overlays', async () => {

core/src/components/menu/test/test.utils.ts

@@ -1,7 +1,7 @@
 import { newE2EPage } from '@stencil/core/testing';
+import { generateE2EUrl } from '@utils/test';
 
 import { menuController } from '../../../utils/menu-controller';
-import { generateE2EUrl } from '@utils/test';
 
 export const testMenu = async (
   type: string,

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

@@ -1,10 +1,11 @@
-import { testModal } from '../test.utils';
 import { newE2EPage } from '@stencil/core/testing';
 
+import { testModal } from '../test.utils';
+
 const DIRECTORY = 'basic';
-const getActiveElementText = async (page) => {
+const getActiveElementText = async page => {
   const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return await page.evaluate(el => el && el.textContent, activeElement);
+  return page.evaluate(el => el && el.textContent, activeElement);
 }
 
 test('modal: focus trap', async () => {
@@ -14,7 +15,7 @@ test('modal: focus trap', async () => {
   await page.click('#basic-modal');
   await page.waitForSelector('#basic-modal');
 
-  let modal = await page.find('ion-modal');
+  const modal = await page.find('ion-modal');
   expect(modal).not.toBe(null);
 
   await ionModalDidPresent.next();
@@ -45,7 +46,7 @@ test('modal: return focus', async () => {
   await page.click('#basic-modal');
   await page.waitForSelector('#basic-modal');
 
-  let modal = await page.find('ion-modal');
+  const modal = await page.find('ion-modal');
   expect(modal).not.toBe(null);
 
   await ionModalDidPresent.next()
@@ -57,7 +58,7 @@ test('modal: return focus', async () => {
   ]);
 
   const activeElement = await page.evaluateHandle(() => document.activeElement);
-  const id = await activeElement.evaluate((node) => node.id);
+  const id = await activeElement.evaluate(node => node.id);
   expect(id).toEqual('basic-modal');
 });
 
@@ -75,12 +76,12 @@ test('modal: htmlAttributes', async () => {
   await page.click('#basic-modal');
   await page.waitForSelector('#basic-modal');
 
-  let alert = await page.find('ion-modal');
+  const alert = await page.find('ion-modal');
 
   expect(alert).not.toBe(null);
   await alert.waitForVisible();
 
-  const attribute = await page.evaluate((el) => document.querySelector('ion-modal').getAttribute('data-testid'));
+  const attribute = await page.evaluate(el => document.querySelector('ion-modal').getAttribute('data-testid'));
 
   expect(attribute).toEqual('basic-modal');
 });

core/src/components/modal/test/card/e2e.ts

@@ -1,4 +1,5 @@
 import { newE2EPage } from '@stencil/core/testing';
+
 import { testModal } from '../test.utils';
 
 const DIRECTORY = 'card';

core/src/components/modal/test/inline/e2e.ts

@@ -29,7 +29,7 @@ test('modal: inline', async () => {
   await page.click('ion-button');
   await page.waitForSelector('ion-modal');
 
-  let modalAgain = await page.find('ion-modal');
+  const modalAgain = await page.find('ion-modal');
 
   expect(modalAgain).not.toBe(null);
   await modalAgain.waitForVisible();

core/src/components/modal/test/sheet/e2e.ts

@@ -1,7 +1,8 @@
 import { newE2EPage } from '@stencil/core/testing';
-import { testModal } from '../test.utils';
 import { getActiveElement, getActiveElementParent } from '@utils/test';
 
+import { testModal } from '../test.utils';
+
 const DIRECTORY = 'sheet';
 
 test('modal: sheet', async () => {

core/src/components/modal/test/test.utils.ts

@@ -1,5 +1,4 @@
 import { newE2EPage } from '@stencil/core/testing';
-
 import { generateE2EUrl } from '@utils/test';
 
 export const testModal = async (

core/src/components/modal/test/trigger/e2e.ts

@@ -8,7 +8,7 @@ test('should open modal by left clicking on trigger', async () => {
   await page.click('#left-click-trigger');
   await page.waitForSelector('.left-click-modal');
 
-  let modal = await page.find('.left-click-modal');
+  const modal = await page.find('.left-click-modal');
   await modal.waitForVisible();
 
   screenshotCompares.push(await page.compareScreenshot());

core/src/components/picker-column-internal/test/basic/e2e.ts

@@ -1,6 +1,5 @@
 import { E2EPage, newE2EPage } from '@stencil/core/testing';
 
-
 describe('picker-column-internal', () => {
 
   let page: E2EPage;

core/src/components/picker-column/test/test.utils.ts

@@ -1,5 +1,4 @@
 import { newE2EPage } from '@stencil/core/testing';
-
 import { dragElementBy, generateE2EUrl, listenForEvent, waitForFunctionTestContext } from '@utils/test';
 
 export const testPickerColumn = async (

core/src/components/picker-internal/test/a11y/e2e.ts

@@ -1,5 +1,5 @@
-import { newE2EPage } from '@stencil/core/testing';
 import { AxePuppeteer } from '@axe-core/puppeteer';
+import { newE2EPage } from '@stencil/core/testing';
 
 test('picker-internal: a11y', async () => {
   const page = await newE2EPage({

core/src/components/popover/test/arrow/e2e.ts

@@ -17,7 +17,7 @@ test('popover - arrow side: left', async () => {
 });
 
 test('popover - arrow side: start', async () => {
-  await testPopover('start'), false;
+  await testPopover('start', false);
 });
 
 test('popover - arrow side: end', async () => {
@@ -25,15 +25,14 @@ test('popover - arrow side: end', async () => {
 });
 
 test('popover - arrow side: start, rtl', async () => {
-  await testPopover('start', false, true);
+  await testPopover('start', true);
 });
 
 test('popover - arrow side: end, rtl', async () => {
-  await testPopover('end', false, true);
+  await testPopover('end', true);
 });
 
-
+const testPopover = async (side: string, isRTL = false) => {
-const testPopover = async (side, isRTL = false) => {
   const rtl = isRTL ? '&rtl=true' : '';
   const page = await newE2EPage({ url: `/src/components/popover/test/arrow?ionic:_testing=true${rtl}` });
 
@@ -43,9 +42,9 @@ const testPopover = async (side, isRTL = false) => {
 
   const trigger = await page.find(`#${TRIGGER_ID}`);
 
-  await page.evaluate((TRIGGER_ID) => {
+  await page.evaluate(POPOVER_TRIGGER_ID => {
-    const trigger = document.querySelector(`#${TRIGGER_ID}`);
+    const popoverTrigger = document.querySelector(`#${POPOVER_TRIGGER_ID}`);
-    trigger.scrollIntoView({ block: 'center' });
+    popoverTrigger?.scrollIntoView({ block: 'center' });
   }, TRIGGER_ID);
 
   trigger.click();

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

@@ -1,6 +1,7 @@
-import { testPopover } from '../test.utils';
 import { newE2EPage } from '@stencil/core/testing';
 
+import { testPopover } from '../test.utils';
+
 const DIRECTORY = 'basic';
 
 /**
@@ -8,7 +9,7 @@ const DIRECTORY = 'basic';
  * to wait for the requestAnimationFrame to fire.
  */
 const expectActiveElementTextToEqual = async (page, textValue) => {
-  await page.waitFor((text) => document.activeElement.textContent === text, {}, textValue)
+  await page.waitFor(text => document.activeElement.textContent === text, {}, textValue)
 }
 
 test('popover: focus trap', async () => {
@@ -17,7 +18,7 @@ test('popover: focus trap', async () => {
   await page.click('#basic-popover');
   await page.waitForSelector('#basic-popover');
 
-  let popover = await page.find('ion-popover');
+  const popover = await page.find('ion-popover');
 
   expect(popover).not.toBe(null);
   await popover.waitForVisible();
@@ -119,12 +120,12 @@ test('popover: htmlAttributes', async () => {
   await page.click('#basic-popover');
   await page.waitForSelector('#basic-popover');
 
-  let alert = await page.find('ion-popover');
+  const alert = await page.find('ion-popover');
 
   expect(alert).not.toBe(null);
   await alert.waitForVisible();
 
-  const attribute = await page.evaluate((el) => document.querySelector('ion-popover').getAttribute('data-testid'));
+  const attribute = await page.evaluate(el => document.querySelector('ion-popover').getAttribute('data-testid'));
 
   expect(attribute).toEqual('basic-popover');
 });

core/src/components/popover/test/inline/e2e.ts

@@ -24,7 +24,7 @@ test('popover: inline, isOpen and event props', async () => {
   await page.click('ion-button#props');
   await page.waitForSelector('ion-popover');
 
-  let popoverAgain = await page.find('ion-popover');
+  const popoverAgain = await page.find('ion-popover');
 
   expect(popoverAgain).not.toBe(null);
   await popoverAgain.waitForVisible();
@@ -60,7 +60,7 @@ test('popover: inline, present method', async () => {
   await page.click('ion-button#method');
   await page.waitForSelector('ion-popover');
 
-  let popoverAgain = await page.find('ion-popover');
+  const popoverAgain = await page.find('ion-popover');
 
   expect(popoverAgain).not.toBe(null);
   await popoverAgain.waitForVisible();

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

@@ -1,5 +1,4 @@
-import type { E2EPage } from '@stencil/core/testing';
+import { E2EPage, newE2EPage } from '@stencil/core/testing';
-import { newE2EPage } from '@stencil/core/testing';
 
 describe('nested popovers', () => {
   let page: E2EPage;

core/src/components/popover/test/position/e2e.ts

@@ -96,8 +96,7 @@ test('popover: position - side: end, alignment: end - rtl', async () => {
   await testPopover('end', 'end', true);
 });
 
-
+const testPopover = async (side: string, alignment: string, isRTL = false) => {
-const testPopover = async (side, alignment, isRTL = false) => {
   const rtl = isRTL ? '&rtl=true' : '';
   const page = await newE2EPage({ url: `/src/components/popover/test/position?ionic:_testing=true${rtl}` });
 
@@ -107,9 +106,9 @@ const testPopover = async (side, alignment, isRTL = false) => {
 
   const trigger = await page.find(`#${TRIGGER_ID}`);
 
-  await page.evaluate((TRIGGER_ID) => {
+  await page.evaluate(POPOVER_TRIGGER_ID => {
-    const trigger = document.querySelector(`#${TRIGGER_ID}`);
+    const popoverTrigger = document.querySelector(`#${POPOVER_TRIGGER_ID}`);
-    trigger.scrollIntoView({ block: 'center' });
+    popoverTrigger?.scrollIntoView({ block: 'center' });
   }, TRIGGER_ID);
 
   trigger.click();
@@ -137,10 +136,10 @@ const testSideAndAlign = async (page, popoverClass, triggerID, side, alignment,
   const actualX = popoverBbox.x;
   const actualY = popoverBbox.y;
 
+  let expectedX;
+  let expectedY;
 
-  let expectedX, expectedY;
+  switch (side) {
-
-  switch(side) {
     case 'top':
       expectedX = triggerBbox.x;
       expectedY = triggerBbox.y - popoverBbox.height;
@@ -170,7 +169,7 @@ const testSideAndAlign = async (page, popoverClass, triggerID, side, alignment,
   }
 
   const alignmentAxis = (['top', 'bottom'].includes(side)) ? 'x' : 'y';
-  switch(alignment) {
+  switch (alignment) {
     case 'center':
       const centerAlign = getCenterAlign(side, triggerBbox, popoverBbox);
       expectedX += centerAlign.left;

core/src/components/popover/test/size/e2e.ts

@@ -75,7 +75,6 @@ test('should calculate popover width based on event width', async () => {
   }
 });
 
-
 test('should not calculate popover width with no trigger or event', async () => {
   const page = await newE2EPage({ url: '/src/components/popover/test/size?ionic:_testing=true' });
 

core/src/components/popover/test/test.utils.ts

@@ -1,5 +1,4 @@
 import { newE2EPage } from '@stencil/core/testing';
-
 import { generateE2EUrl } from '@utils/test';
 
 export const testPopover = async (

core/src/components/popover/test/trigger/e2e.ts

@@ -8,7 +8,7 @@ test('should open popover by left clicking on trigger', async () => {
   await page.click('#left-click-trigger');
   await page.waitForSelector('.left-click-popover');
 
-  let popover = await page.find('.left-click-popover');
+  const popover = await page.find('.left-click-popover');
   await popover.waitForVisible();
 
   screenshotCompares.push(await page.compareScreenshot());
@@ -26,7 +26,7 @@ test('should open popover by right clicking on trigger', async () => {
   await page.click('#right-click-trigger', { button: 'right' });
   await page.waitForSelector('.right-click-popover');
 
-  let popover = await page.find('.right-click-popover');
+  const popover = await page.find('.right-click-popover');
   await popover.waitForVisible();
 
   screenshotCompares.push(await page.compareScreenshot());
@@ -46,7 +46,7 @@ test('should open popover by hovering over trigger', async () => {
   await page.mouse.move(bbox.x + 5, bbox.y + 5);
   await page.waitForSelector('.hover-popover');
 
-  let popover = await page.find('.hover-popover');
+  const popover = await page.find('.hover-popover');
   await popover.waitForVisible();
 
   screenshotCompares.push(await page.compareScreenshot());
@@ -64,12 +64,12 @@ test('should not close main popover with dismiss-on-select when clicking a trigg
   await page.click('#nested-click-trigger');
   await page.waitForSelector('.nested-click-popover');
 
-  let firstPopover = await page.find('.nested-click-popover');
+  const firstPopover = await page.find('.nested-click-popover');
   await firstPopover.waitForVisible();
 
   await page.click('#nested-click-trigger-two');
 
-  let secondPopover = await page.find('.nested-click-popover-two');
+  const secondPopover = await page.find('.nested-click-popover-two');
   await secondPopover.waitForVisible();
 
   screenshotCompares.push(await page.compareScreenshot());

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

@@ -1,5 +1,4 @@
-import type { E2EPage } from '@stencil/core/testing';
+import { E2EPage, newE2EPage } from '@stencil/core/testing';
-import { newE2EPage } from '@stencil/core/testing';
 
 import { pullToRefresh } from '../test.utils';
 

core/src/components/refresher/test/test.utils.ts

@@ -1,5 +1,4 @@
 import type { E2EPage } from '@stencil/core/testing';
-
 import { dragElementBy } from '@utils/test';
 
 /**

core/src/components/reorder-group/test/interactive/e2e.ts

@@ -1,7 +1,7 @@
 import * as pd from '@stencil/core/dist/testing/puppeteer/puppeteer-declarations';
 import { newE2EPage } from '@stencil/core/testing';
-
 import { getElementProperty, queryDeep } from '@utils/test';
+
 import { moveReorderItem } from '../test.utils';
 
 test('reorder: interactive', async () => {

core/src/components/reorder-group/test/test.utils.ts

@@ -1,5 +1,4 @@
 import * as pd from '@stencil/core/testing';
-
 import { dragElementBy, queryDeep } from '@utils/test';
 
 /**

core/src/components/router-outlet/test/basic/e2e.ts

@@ -5,10 +5,9 @@ test('getRouteId() should return the segment parameters', async () => {
     url: '/src/components/router-outlet/test/basic?ionic:_testing=true'
   });
 
-
   await page.$eval('ion-item[href="#/two/segment"] ion-label', (el: any) => el.click());
   await page.waitForChanges();
-  const routeId = await page.$eval('ion-router-outlet', async (el: any) => await el.getRouteId());
+  const routeId = await page.$eval('ion-router-outlet', async (el: any) => el.getRouteId());
 
   expect(routeId.id).toEqual('PAGE-TWO');
   expect(routeId.params).toEqual({ param: 'segment' });
@@ -19,10 +18,9 @@ test('getRouteId() should return the route parameters', async () => {
     url: '/src/components/router-outlet/test/basic?ionic:_testing=true'
   });
 
-
   await page.$eval('ion-item[href="#/page-3"] ion-label', (el: any) => el.click());
   await page.waitForChanges();
-  const routeId = await page.$eval('ion-router-outlet', async (el: any) => await el.getRouteId());
+  const routeId = await page.$eval('ion-router-outlet', async (el: any) => el.getRouteId());
 
   expect(routeId.id).toEqual('PAGE-THREE');
   expect(routeId.params).toEqual({ param: 'route' });
@@ -35,9 +33,9 @@ test('it should be possible to activate the same component provided parameters a
 
   await page.$eval('ion-item[href="#/page-4.1/foo"] ion-label', (el: any) => el.click());
   await page.waitForChanges();
-  expect(await page.$eval('ion-router-outlet', (el) => el.textContent)).toMatch(/text = foo/);
+  expect(await page.$eval('ion-router-outlet', el => el.textContent)).toMatch(/text = foo/);
 
   await page.$eval('ion-item[href="#/page-4.2/bar"] ion-label', (el: any) => el.click());
   await page.waitForChanges();
-  expect(await page.$eval('ion-router-outlet', (el) => el.textContent)).toMatch(/text = bar/);
+  expect(await page.$eval('ion-router-outlet', el => el.textContent)).toMatch(/text = bar/);
 });

core/src/components/router/test/basic/redirect/e2e.ts

@@ -7,6 +7,6 @@ test('redirect should support query string', async () => {
 
   await page.waitForChanges();
 
-  const url = await page.url();
+  const url = page.url();
   expect(url).toContain('#/three?has_query_string=true');
 });

core/src/components/router/test/basic/router-push/e2e.ts

@@ -7,10 +7,10 @@ test('push should support relative path', async () => {
   await page.waitForChanges();
 
   const backButton = await page.$('#btn-rel');
-  await backButton.click();
+  await backButton?.click();
   await page.waitForChanges();
 
-  const url = await page.url();
+  const url = page.url();
   expect(url).toContain('#/two/three/relative?param=1');
 });
 
@@ -21,9 +21,9 @@ test('push should support absolute path', async () => {
   await page.waitForChanges();
 
   const backButton = await page.$('#btn-abs');
-  await backButton.click();
+  await backButton?.click();
   await page.waitForChanges();
 
-  const url = await page.url();
+  const url = page.url();
   expect(url).toContain('#/two/three/absolute');
 });

core/src/components/router/test/guards/href/e2e.ts

@@ -62,9 +62,6 @@ test('router: guards - href - redirect/allow', async () => {
   await checkUrl(page, '#/home');
 });
 
-
-
-
 test('router: guards - href - allow/block', async () => {
   const page = await newE2EPage({
     url: '/src/components/router/test/guards?ionic:_testing=true'

core/src/components/router/test/guards/link/e2e.ts

@@ -62,9 +62,6 @@ test('router: guards - router-link - redirect/allow', async () => {
   await checkUrl(page, '#/home');
 });
 
-
-
-
 test('router: guards - router-link - allow/block', async () => {
   const page = await newE2EPage({
     url: '/src/components/router/test/guards?ionic:_testing=true'

core/src/components/router/test/guards/push/e2e.ts

@@ -62,9 +62,6 @@ test('router: guards - router.push - redirect/allow', async () => {
   await checkUrl(page, '#/home');
 });
 
-
-
-
 test('router: guards - router.push - allow/block', async () => {
   const page = await newE2EPage({
     url: '/src/components/router/test/guards?ionic:_testing=true'

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

@@ -1,9 +1,9 @@
-import { newE2EPage } from '@stencil/core/testing';
 import { AxePuppeteer } from '@axe-core/puppeteer';
+import { newE2EPage } from '@stencil/core/testing';
 
-const getActiveElementText = async (page) => {
+const getActiveElementText = async page => {
   const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return await page.evaluate(el => el && el.innerText, activeElement);
+  return page.evaluate(el => el && el.innerText, activeElement);
 }
 
 test('segment: axe', async () => {
@@ -18,7 +18,6 @@ test('segment: axe', async () => {
   expect(results.violations.length).toEqual(0);
 });
 
-
 test('segment: keyboard navigation', async () => {
   const page = await newE2EPage({
     url: '/src/components/segment/test/a11y?ionic:_testing=true'

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

@@ -1,5 +1,5 @@
-import { newE2EPage } from '@stencil/core/testing';
 import { AxePuppeteer } from '@axe-core/puppeteer';
+import { newE2EPage } from '@stencil/core/testing';
 
 describe('toast accessibility tests', () => {
   test('it should not have any axe violations with polite toasts', async () => {

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

@@ -1,4 +1,5 @@
 import { newE2EPage } from '@stencil/core/testing';
+
 import { testToast } from '../test.utils';
 
 const DIRECTORY = 'basic';
@@ -111,12 +112,12 @@ test('toast: htmlAttributes', async () => {
   await page.click('#show-bottom-toast');
   await page.waitForSelector('#show-bottom-toast');
 
-  let toast = await page.find('ion-toast');
+  const toast = await page.find('ion-toast');
 
   expect(toast).not.toBe(null);
   await toast.waitForVisible();
 
-  const attribute = await page.evaluate((el) => document.querySelector('ion-toast').getAttribute('data-testid'));
+  const attribute = await page.evaluate(el => document.querySelector('ion-toast').getAttribute('data-testid'));
 
   expect(attribute).toEqual('basic-toast');
 });

core/src/components/toast/test/test.utils.ts

@@ -1,5 +1,4 @@
 import { newE2EPage } from '@stencil/core/testing';
-
 import { generateE2EUrl } from '@utils/test';
 
 export const testToast = async (

core/src/utils/test/overlays/e2e.ts

@@ -1,4 +1,5 @@
 import { newE2EPage } from '@stencil/core/testing';
+
 import { getActiveElementParent } from '../utils';
 
 test('overlays: hardware back button: should dismiss a presented overlay', async () => {
@@ -78,7 +79,6 @@ test('overlays: Esc: should dismiss a presented overlay', async () => {
   await page.waitForSelector('ion-modal', { hidden: true })
 });
 
-
 test('overlays: Esc: should dismiss the presented overlay, even though another hidden modal was added last', async () => {
   const page = await newE2EPage({ url: '/src/utils/test/overlays?ionic:_testing=true' });
 

core/src/utils/test/playwright.ts

@@ -1,10 +1,23 @@
-import { test as base } from '@playwright/test';
+import { Page, PlaywrightTestArgs, PlaywrightTestOptions, PlaywrightWorkerArgs, PlaywrightWorkerOptions, Response, TestInfo, test as base } from '@playwright/test';
 
-export const test = base.extend({
+type IonicPage = Page & {
-  page: async ({ page }, use, testInfo) => {
+  goto: (url: string) => Promise<null | Response>;
+  setIonViewport: () => Promise<void>;
+  getSnapshotSettings: () => string;
+}
+
+type CustomTestArgs = PlaywrightTestArgs & PlaywrightTestOptions & PlaywrightWorkerArgs & PlaywrightWorkerOptions & {
+  page: IonicPage
+}
+
+type CustomFixtures = {
+  page: IonicPage
+};
+
+export const test = base.extend<CustomFixtures>({
+  page: async ({ page }: CustomTestArgs, use: (r: IonicPage) => Promise<void>, testInfo: TestInfo) => {
     const oldGoTo = page.goto.bind(page);
 
-
     /**
      * This is an extended version of Playwright's
      * page.goto method. In addition to performing
@@ -12,7 +25,7 @@ export const test = base.extend({
      * automatically waits for the Stencil components
      * to be hydrated before proceeding with the test.
      */
-    page.goto = (url: string) => {
+    page.goto = async (url: string) => {
       const { mode, rtl } = testInfo.project.metadata;
 
       const splitUrl = url.split('?');
@@ -28,10 +41,12 @@ export const test = base.extend({
 
       const formattedUrl = `${splitUrl[0]}?ionic:_testing=true&ionic:mode=${formattedMode}&rtl=${formattedRtl}`;
 
-      return Promise.all([
+      const [_, response] = await Promise.all([
-        page.waitForFunction(() => window.stencilAppLoaded === true),
+        page.waitForFunction(() => (window as any).stencilAppLoaded === true),
         oldGoTo(formattedUrl)
-      ])
+      ]);
+
+      return response;
     }
 
     /**
@@ -77,18 +92,23 @@ export const test = base.extend({
      * can be captured in a screenshot.
      */
     page.setIonViewport = async () => {
-      const currentViewport = await page.viewportSize();
+      const currentViewport = page.viewportSize();
 
       const pixelAmountRenderedOffscreen = await page.evaluate(() => {
         const content = document.querySelector('ion-content');
-        const innerScroll = content.shadowRoot.querySelector('.inner-scroll');
+        if (content) {
-
+          const innerScroll = content.shadowRoot!.querySelector('.inner-scroll')!;
           return innerScroll.scrollHeight - content.clientHeight;
+        }
+        return 0;
       });
 
+      const width = currentViewport?.width ?? 640;
+      const height = (currentViewport?.height ?? 480) + pixelAmountRenderedOffscreen;
+
       await page.setViewportSize({
-        width: currentViewport.width,
+        width,
-        height: currentViewport.height + pixelAmountRenderedOffscreen
+        height
       })
     }
 

core/src/utils/test/utils.ts

@@ -1,5 +1,5 @@
 import { E2EElement, E2EPage } from '@stencil/core/testing';
-import { ElementHandle } from 'puppeteer';
+import { ElementHandle, SerializableOrJSHandle } from 'puppeteer';
 
 /**
  * page.evaluate can only return a serializable value,
@@ -7,8 +7,8 @@ import { ElementHandle } from 'puppeteer';
  * Instead, we return an object with some common
  * properties that you may want to access in a test.
  */
-const getSerialElement = async (page, element) => {
+const getSerialElement = async (page: E2EPage, element: SerializableOrJSHandle) => {
-  return await page.evaluate(el => {
+  return page.evaluate(el => {
     const { className, tagName, id } = el;
     return {
       className,
@@ -18,17 +18,16 @@ const getSerialElement = async (page, element) => {
   }, element);
 }
 
-export const getActiveElementParent = async (page) => {
+export const getActiveElementParent = async (page: E2EPage) => {
-  const activeElement = await page.evaluateHandle(() => document.activeElement.parentElement);
+  const activeElement = await page.evaluateHandle(() => document.activeElement!.parentElement);
   return getSerialElement(page, activeElement);
 }
 
-export const getActiveElement = async (page) => {
+export const getActiveElement = async (page: E2EPage) => {
   const activeElement = await page.evaluateHandle(() => document.activeElement);
   return getSerialElement(page, activeElement);
 }
 
-
 export const generateE2EUrl = (component: string, type: string, rtl = false): string => {
   let url = `/src/components/${component}/test/${type}?ionic:_testing=true`;
   if (rtl) {
@@ -120,7 +119,7 @@ export const dragElementBy = async (
  * @param interval: number - Interval to run setInterval on
  */
 export const waitForFunctionTestContext = async (fn: any, params: any, interval = 16): Promise<any> => {
-  return new Promise(resolve => {
+  return new Promise<void>(resolve => {
     const intervalId = setInterval(() => {
       if (fn(params)) {
         clearInterval(intervalId);
@@ -194,8 +193,8 @@ export const checkModeClasses = async (el: E2EElement, globalMode: string) => {
  * @param selector The element to scroll within.
  */
 export const scrollToBottom = async (page: E2EPage, selector: string) => {
-  await page.evaluate(async selector => {
+  await page.evaluate(async elSelector => {
-    const el = document.querySelector<HTMLElement>(selector);
+    const el = document.querySelector<HTMLElement>(elSelector);
     if (el) {
       if (el.tagName === 'ION-CONTENT') {
         await (el as any).scrollToBottom();
@@ -203,7 +202,7 @@ export const scrollToBottom = async (page: E2EPage, selector: string) => {
         el.scrollTop = el.scrollHeight;
       }
     } else {
-      console.error(`Unable to find element with selector: ${selector}`);
+      console.error(`Unable to find element with selector: ${elSelector}`);
     }
   }, selector);
 }

core/tsconfig.json

@@ -34,7 +34,6 @@
     "src",
   ],
   "exclude": [
-    "node_modules",
+    "node_modules"
-    "**/test"
   ]
 }