diff --git a/core/src/components/infinite-scroll/test/basic/e2e.ts b/core/src/components/infinite-scroll/test/basic/e2e.ts
index c406cf961b..e3b0c22ecc 100644
--- a/core/src/components/infinite-scroll/test/basic/e2e.ts
+++ b/core/src/components/infinite-scroll/test/basic/e2e.ts
@@ -1,10 +1,49 @@
 import { 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 content = await page.find('ion-content');
+  await content.callMethod('scrollToBottom');
+  await page.waitForChanges();
+
+  const ev = await page.spyOnEvent('ionInfiniteComplete', 'document');
+  await ev.next();
+}
+
+describe('infinite-scroll: basic', () => {
+
+  it('should match existing visual screenshots', async () => {
+    const page = await newE2EPage({
+      url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true'
+    });
+
+    const compare = await page.compareScreenshot();
+    expect(compare).toMatchScreenshot();
+  });
+
+  describe('when enabled', () => {
+
+    it('should load more items when scrolled to the bottom', async () => {
+      const page = await newE2EPage({
+        url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true'
+      });
+
+      const initialItems = await page.findAll('ion-item');
+
+      expect(initialItems.length).toBe(30);
+
+      await scrollIonContentPage(page);
+
+      const updatedItems = await page.findAll('ion-item');
+
+      expect(updatedItems.length).toBe(60);
+    });
 
-test('infinite-scroll: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true'
   });
 
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
 });
diff --git a/core/src/components/infinite-scroll/test/basic/index.html b/core/src/components/infinite-scroll/test/basic/index.html
index 53e7f3700b..113f39a45c 100644
--- a/core/src/components/infinite-scroll/test/basic/index.html
+++ b/core/src/components/infinite-scroll/test/basic/index.html
@@ -4,12 +4,14 @@
 <head>
   <meta charset="UTF-8">
   <title>Infinite Scroll - Basic</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+</head>
 
 <body>
   <ion-app>
@@ -35,8 +37,6 @@
       </ion-infinite-scroll>
     </ion-content>
 
-
-
   </ion-app>
 
   <script>
@@ -48,12 +48,11 @@
     }
 
     infiniteScroll.addEventListener('ionInfinite', async function () {
-      console.log('Loading data...');
       await wait(500);
       infiniteScroll.complete();
       appendItems();
-
-      console.log('Done');
+      // Custom event consumed in the e2e tests
+      document.dispatchEvent(new CustomEvent('ionInfiniteComplete'));
     });
 
     function appendItems() {
diff --git a/core/src/utils/test/utils.ts b/core/src/utils/test/utils.ts
index 196535a745..2f98863534 100644
--- a/core/src/utils/test/utils.ts
+++ b/core/src/utils/test/utils.ts
@@ -61,11 +61,11 @@ export const getElementProperty = async (element: any, property: string): Promis
  */
 export const listenForEvent = async (page: any, eventType: string, element: any, callbackName: string): Promise<any> => {
   try {
-      return await page.evaluate((scopeEventType: string, scopeElement: any, scopeCallbackName: string) => {
-        scopeElement.addEventListener(scopeEventType, (e: any) => {
-          (window as any)[scopeCallbackName]({ detail: e.detail });
-        });
-      }, eventType, element, callbackName);
+    return await page.evaluate((scopeEventType: string, scopeElement: any, scopeCallbackName: string) => {
+      scopeElement.addEventListener(scopeEventType, (e: any) => {
+        (window as any)[scopeCallbackName]({ detail: e.detail });
+      });
+    }, eventType, element, callbackName);
   } catch (err) {
     throw err;
   }
