diff --git a/core/src/components/action-sheet/test/basic/e2e.ts b/core/src/components/action-sheet/test/basic/e2e.ts
index 09336072fa..6a204078f3 100644
--- a/core/src/components/action-sheet/test/basic/e2e.ts
+++ b/core/src/components/action-sheet/test/basic/e2e.ts
@@ -1,91 +1,71 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testActionSheet, testActionSheetAlert, testActionSheetBackdrop } from '../test.utils';
+
+const DIRECTORY = 'basic';
 
 test('action-sheet: basic', async () => {
-  await openActionSheet('#basic');
+  await testActionSheet(DIRECTORY, '#basic');
 });
 
 test('action-sheet: basic, alert from action sheet', async () => {
-  await openActionSheet('#alertFromActionSheet');
+  await testActionSheet(DIRECTORY, '#alertFromActionSheet', false, testActionSheetAlert);
 });
 
 test('action-sheet: basic, cancel only', async () => {
-  await openActionSheet('#cancelOnly');
+  await testActionSheet(DIRECTORY, '#cancelOnly');
 });
 
 test('action-sheet: basic, custom', async () => {
-  await openActionSheet('#custom');
+  await testActionSheet(DIRECTORY, '#custom');
 });
 
 test('action-sheet: basic, icons', async () => {
-  await openActionSheet('#icons');
+  await testActionSheet(DIRECTORY, '#icons');
 });
 
 test('action-sheet: basic, no backdrop dismiss', async () => {
-  await openActionSheet('#noBackdropDismiss');
+  await testActionSheet(DIRECTORY, '#noBackdropDismiss', false, testActionSheetBackdrop);
 });
 
 test('action-sheet: basic, scrollable options', async () => {
-  await openActionSheet('#scrollableOptions');
+  await testActionSheet(DIRECTORY, '#scrollableOptions');
 });
 
 test('action-sheet: basic, scroll without cancel', async () => {
-  await openActionSheet('#scrollWithoutCancel');
+  await testActionSheet(DIRECTORY, '#scrollWithoutCancel');
 });
 
-// Opens an action sheet on button click
-async function openActionSheet(selector: string) {
-  const page = await newE2EPage({
-    url: `/src/components/action-sheet/test/basic?ionic:_testing=true`
-  });
+/**
+ * RTL Tests
+ */
 
-  const compares = [];
+test('action-sheet: basic', async () => {
+  await testActionSheet(DIRECTORY, '#basic', true);
+});
 
-  await page.click(selector);
+test('action-sheet: basic, alert from action sheet', async () => {
+  await testActionSheet(DIRECTORY, '#alertFromActionSheet', true, testActionSheetAlert);
+});
 
-  let actionSheet = await page.find('ion-action-sheet');
-  expect(actionSheet).not.toBe(null);
-  await actionSheet.waitForVisible();
+test('action-sheet: basic, cancel only', async () => {
+  await testActionSheet(DIRECTORY, '#cancelOnly', true);
+});
 
-  compares.push(await page.compareScreenshot());
+test('action-sheet: basic, custom', async () => {
+  await testActionSheet(DIRECTORY, '#custom', true);
+});
 
-  if (selector === '#alertFromActionSheet') {
-    const openAlertBtn = await page.find({ text: 'Open Alert' });
-    await openAlertBtn.click();
+test('action-sheet: basic, icons', async () => {
+  await testActionSheet(DIRECTORY, '#icons', true);
+});
 
-    const alert = await page.find('ion-alert');
-    await alert.waitForVisible();
-    await page.waitFor(250);
+test('action-sheet: basic, no backdrop dismiss', async () => {
+  await testActionSheet(DIRECTORY, '#noBackdropDismiss', true, testActionSheetBackdrop);
+});
 
-    compares.push(await page.compareScreenshot(`alert open`));
+test('action-sheet: basic, scrollable options', async () => {
+  await testActionSheet(DIRECTORY, '#scrollableOptions', true);
+});
 
-    const alertOkayBtn = await page.find({ contains: 'Okay' });
-    await alertOkayBtn.click();
-  }
-
-  if (selector === '#noBackdropDismiss') {
-    const backdrop = await page.find('ion-backdrop');
-    await backdrop.click();
-
-    compares.push(await page.compareScreenshot(`dismissed`));
-
-    const isVisible = await actionSheet.isVisible();
-    expect(isVisible).toBe(true);
-
-    const cancel = await page.find('.action-sheet-cancel');
-    await cancel.click();
-
-    await actionSheet.waitForNotVisible();
-  } else {
-    await actionSheet.callMethod('dismiss');
-    await actionSheet.waitForNotVisible();
-
-    compares.push(await page.compareScreenshot(`dismissed`));
-  }
-
-  actionSheet = await page.find('ion-action-sheet');
-  expect(actionSheet).toBe(null);
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-}
+test('action-sheet: basic, scroll without cancel', async () => {
+  await testActionSheet(DIRECTORY, '#scrollWithoutCancel', true);
+});
diff --git a/core/src/components/action-sheet/test/spec/e2e.ts b/core/src/components/action-sheet/test/spec/e2e.ts
index d0b111ac53..2c3634d449 100644
--- a/core/src/components/action-sheet/test/spec/e2e.ts
+++ b/core/src/components/action-sheet/test/spec/e2e.ts
@@ -1,28 +1,7 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testActionSheet } from '../test.utils';
+
+const DIRECTORY = 'spec';
 
 test('action-sheet: spec', async () => {
-  const page = await newE2EPage({
-    url: `/src/components/action-sheet/test/spec?ionic:_testing=true`
-  });
-
-  const presentBtn = await page.find('#spec');
-  await presentBtn.click();
-
-  let actionSheet = await page.find('ion-action-sheet');
-  await actionSheet.waitForVisible();
-
-  const compares = [];
-  compares.push(await page.compareScreenshot());
-
-  await actionSheet.callMethod('dismiss');
-  await actionSheet.waitForNotVisible();
-
-  compares.push(await page.compareScreenshot(`dismissed`));
-
-  actionSheet = await page.find('ion-action-sheet');
-  expect(actionSheet).toBe(null);
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
+  await testActionSheet(DIRECTORY, '#spec');
 });
diff --git a/core/src/components/action-sheet/test/test.utils.ts b/core/src/components/action-sheet/test/test.utils.ts
new file mode 100644
index 0000000000..0d8673f882
--- /dev/null
+++ b/core/src/components/action-sheet/test/test.utils.ts
@@ -0,0 +1,91 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+import { cleanScreenshotName, generateE2EUrl } from '../../../utils/test/utils';
+
+export async function testActionSheet(
+  type: string,
+  selector: string,
+  rtl = false,
+  afterScreenshotHook = async (..._args: any[]): Promise<void> => {/**/},
+  screenshotName: string = cleanScreenshotName(selector)
+) {
+  try {
+    const pageUrl = generateE2EUrl('action-sheet', type, rtl);
+    if (rtl) {
+      screenshotName = `${screenshotName} rtl`;
+    }
+
+    const page = await newE2EPage({
+      url: pageUrl
+    });
+
+    const screenShotCompares = [];
+
+    const presentBtn = await page.find(selector);
+    await presentBtn.click();
+
+    let actionSheet = await page.find('ion-action-sheet');
+    await actionSheet.waitForVisible();
+
+    screenShotCompares.push(await page.compareScreenshot(screenshotName));
+
+    await afterScreenshotHook(page, screenshotName, screenShotCompares, actionSheet);
+
+    await actionSheet.callMethod('dismiss');
+    await actionSheet.waitForNotVisible();
+
+    screenShotCompares.push(await page.compareScreenshot(`dismissed ${screenshotName}`));
+
+    actionSheet = await page.find('ion-action-sheet');
+    expect(actionSheet).toBe(null);
+
+    for (const screenShotCompare of screenShotCompares) {
+      expect(screenShotCompare).toMatchScreenshot();
+    }
+
+  } catch (err) {
+    throw err;
+  }
+}
+
+export async function testActionSheetBackdrop(
+  page: any,
+  screenshotName: string,
+  screenShotCompares: any,
+  actionSheet: any
+) {
+  try {
+    console.log('backdrop hook');
+    const backdrop = await page.find('ion-backdrop');
+    await backdrop.click();
+
+    screenShotCompares.push(await page.compareScreenshot(`dismissed backdrop ${screenshotName}`));
+
+    const isVisible = await actionSheet.isVisible();
+    expect(isVisible).toBe(true);
+} catch (err) {
+    throw err;
+  }
+}
+
+export async function testActionSheetAlert(
+  page: any,
+  screenshotName: string,
+  screenShotCompares: any
+) {
+  try {
+    const openAlertBtn = await page.find({ text: 'Open Alert' });
+    await openAlertBtn.click();
+
+    const alert = await page.find('ion-alert');
+    await alert.waitForVisible();
+    await page.waitFor(250);
+
+    screenShotCompares.push(await page.compareScreenshot(`alert open ${screenshotName}`));
+
+    const alertOkayBtn = await page.find({ contains: 'Okay' });
+    await alertOkayBtn.click();
+  } catch (err) {
+    throw err;
+  }
+}
diff --git a/core/src/components/action-sheet/test/translucent/e2e.ts b/core/src/components/action-sheet/test/translucent/e2e.ts
index 89d268391c..1438cf06ca 100644
--- a/core/src/components/action-sheet/test/translucent/e2e.ts
+++ b/core/src/components/action-sheet/test/translucent/e2e.ts
@@ -1,27 +1,7 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testActionSheet } from '../test.utils';
+
+const DIRECTORY = 'translucent';
 
 test('action-sheet: translucent', async () => {
-  const page = await newE2EPage({
-    url: `/src/components/action-sheet/test/translucent?ionic:_testing=true`
-  });
-
-  const presentBtn = await page.find('#basic');
-  await presentBtn.click();
-
-  let actionSheet = await page.find('ion-action-sheet');
-  await actionSheet.waitForVisible();
-
-  let compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-
-  await actionSheet.callMethod('dismiss');
-
-  await actionSheet.waitForNotVisible();
-
-  compare = await page.compareScreenshot(`dismissed`);
-  expect(compare).toMatchScreenshot();
-
-  actionSheet = await page.find('ion-action-sheet');
-
-  expect(actionSheet).toBe(null);
+  await testActionSheet(DIRECTORY, '#basic');
 });
diff --git a/core/src/components/alert/test/basic/e2e.ts b/core/src/components/alert/test/basic/e2e.ts
index ec0985ac37..96b213f902 100644
--- a/core/src/components/alert/test/basic/e2e.ts
+++ b/core/src/components/alert/test/basic/e2e.ts
@@ -1,95 +1,70 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testAlert } from '../test.utils';
 
-async function openAlert(selector: string, rtl = false) {
-  const pageUrl = rtl
-   ? '/src/components/alert/test/basic?ionic:_testing=true&rtl=true'
-   : '/src/components/alert/test/basic?ionic:_testing=true';
-  const page = await newE2EPage({
-    url: pageUrl
-  });
-
-  await page.click(selector);
-
-  let alert = await page.find('ion-alert');
-  expect(alert).not.toBe(null);
-  await alert.waitForVisible();
-  await page.waitFor(250);
-
-  const compare = rtl
-    ? await page.compareScreenshot('rtl')
-    : await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-
-  await alert.callMethod('dismiss');
-  await alert.waitForNotVisible();
-
-  alert = await page.find('ion-alert');
-  expect(alert).toBe(null);
-}
+const DIRECTORY = 'basic';
 
 test(`alert: basic`, async () => {
-  await openAlert('#basic');
+  await testAlert(DIRECTORY, '#basic');
 });
 
 test(`alert: basic, long message`, async () => {
-  await openAlert('#longMessage');
+  await testAlert(DIRECTORY, '#longMessage');
 });
 
 test(`alert: basic, multiple buttons`, async () => {
-  await openAlert('#multipleButtons');
+  await testAlert(DIRECTORY, '#multipleButtons');
 });
 
 test(`alert: basic, no message`, async () => {
-  await openAlert('#noMessage');
+  await testAlert(DIRECTORY, '#noMessage');
 });
 
 test(`alert: basic, confirm`, async () => {
-  await openAlert('#confirm');
+  await testAlert(DIRECTORY, '#confirm');
 });
 
 test(`alert: basic, prompt`, async () => {
-  await openAlert('#prompt');
+  await testAlert(DIRECTORY, '#prompt');
 });
 
 test(`alert: basic, radio`, async () => {
-  await openAlert('#radio');
+  await testAlert(DIRECTORY, '#radio');
 });
 
 test(`alert: basic, checkbox`, async () => {
-  await openAlert('#checkbox');
+  await testAlert(DIRECTORY, '#checkbox');
 });
 
 // Right to Left tests
 // ------------------------------------------------------
 
 test(`alert: basic`, async () => {
-  await openAlert('#basic', true);
+  await testAlert(DIRECTORY, '#basic', true);
 });
 
 test(`alert: basic, long message`, async () => {
-  await openAlert('#longMessage', true);
+  await testAlert(DIRECTORY, '#longMessage', true);
 });
 
 test(`alert: basic, multiple buttons`, async () => {
-  await openAlert('#multipleButtons', true);
+  await testAlert(DIRECTORY, '#multipleButtons', true);
 });
 
 test(`alert: basic, no message`, async () => {
-  await openAlert('#noMessage', true);
+  await testAlert(DIRECTORY, '#noMessage', true);
 });
 
 test(`alert: basic, confirm`, async () => {
-  await openAlert('#confirm', true);
+  await testAlert(DIRECTORY, '#confirm', true);
 });
 
 test(`alert: basic, prompt`, async () => {
-  await openAlert('#prompt', true);
+  await testAlert(DIRECTORY, '#prompt', true);
 });
 
 test(`alert: basic, radio`, async () => {
-  await openAlert('#radio', true);
+  await testAlert(DIRECTORY, '#radio', true);
 });
 
 test(`alert: basic, checkbox`, async () => {
-  await openAlert('#checkbox', true);
+  await testAlert(DIRECTORY, '#checkbox', true);
 });
diff --git a/core/src/components/alert/test/standalone/e2e.ts b/core/src/components/alert/test/standalone/e2e.ts
index d3bd8dedec..ff103abbe4 100644
--- a/core/src/components/alert/test/standalone/e2e.ts
+++ b/core/src/components/alert/test/standalone/e2e.ts
@@ -1,55 +1,35 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testAlert } from '../test.utils';
 
-async function openAlert(selector: string) {
-  const page = await newE2EPage({
-    url: '/src/components/alert/test/standalone?ionic:_testing=true'
-  });
-
-  await page.click(selector);
-
-  let alert = await page.find('ion-alert');
-  expect(alert).not.toBe(null);
-  await alert.waitForVisible();
-  await page.waitFor(250);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-
-  await alert.callMethod('dismiss');
-  await alert.waitForNotVisible();
-
-  alert = await page.find('ion-alert');
-  expect(alert).toBe(null);
-}
+const DIRECTORY = 'standalone';
 
 test(`alert: standalone`, async () => {
-  await openAlert('#basic');
+  await testAlert(DIRECTORY, '#basic');
 });
 
 test(`alert: standalone, long message`, async () => {
-  await openAlert('#longMessage');
+  await testAlert(DIRECTORY, '#longMessage');
 });
 
 test(`alert: standalone, multiple buttons`, async () => {
-  await openAlert('#multipleButtons');
+  await testAlert(DIRECTORY, '#multipleButtons');
 });
 
 test(`alert: standalone, no message`, async () => {
-  await openAlert('#noMessage');
+  await testAlert(DIRECTORY, '#noMessage');
 });
 
 test(`alert: standalone, confirm`, async () => {
-  await openAlert('#confirm');
+  await testAlert(DIRECTORY, '#confirm');
 });
 
 test(`alert: standalone, prompt`, async () => {
-  await openAlert('#prompt');
+  await testAlert(DIRECTORY, '#prompt');
 });
 
 test(`alert: standalone, radio`, async () => {
-  await openAlert('#radio');
+  await testAlert(DIRECTORY, '#radio');
 });
 
 test(`alert: standalone, checkbox`, async () => {
-  await openAlert('#checkbox');
+  await testAlert(DIRECTORY, '#checkbox');
 });
diff --git a/core/src/components/alert/test/test.utils.ts b/core/src/components/alert/test/test.utils.ts
new file mode 100644
index 0000000000..e78c40943d
--- /dev/null
+++ b/core/src/components/alert/test/test.utils.ts
@@ -0,0 +1,48 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+import { cleanScreenshotName, generateE2EUrl } from '../../../utils/test/utils';
+
+export async function testAlert(
+  type: string,
+  selector: string,
+  rtl = false,
+  screenshotName: string = cleanScreenshotName(selector)
+) {
+  try {
+    const pageUrl = generateE2EUrl('alert', type, rtl);
+    if (rtl) {
+      screenshotName = `${screenshotName} rtl`;
+    }
+
+    const page = await newE2EPage({
+      url: pageUrl
+    });
+
+    const screenShotCompares = [];
+
+    await page.click(selector);
+    await page.waitForSelector(selector);
+
+    let alert = await page.find('ion-alert');
+
+    expect(alert).not.toBe(null);
+    await alert.waitForVisible();
+
+    screenShotCompares.push(await page.compareScreenshot(screenshotName));
+
+    await alert.callMethod('dismiss');
+    await alert.waitForNotVisible();
+
+    screenShotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`));
+
+    alert = await page.find('ion-alert');
+    expect(alert).toBe(null);
+
+    for (const screenShotCompare of screenShotCompares) {
+      expect(screenShotCompare).toMatchScreenshot();
+    }
+
+  } catch (err) {
+    throw err;
+  }
+}
diff --git a/core/src/components/loading/test/basic/e2e.ts b/core/src/components/loading/test/basic/e2e.ts
index f16a921ba7..ec928d71d2 100644
--- a/core/src/components/loading/test/basic/e2e.ts
+++ b/core/src/components/loading/test/basic/e2e.ts
@@ -1,15 +1,55 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testLoading } from '../test.utils';
+
+const DIRECTORY = 'basic';
 
 test('loading: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/loading/test/basic?ionic:_testing=true'
-  });
-
-  await page.click('#basic');
-  const loading = await page.find('ion-loading');
-  await page.waitFor(250);
-  await loading.waitForVisible();
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
+  await testLoading(DIRECTORY, '#basic-loading');
+});
+
+test('loading: long content basic', async () => {
+  await testLoading(DIRECTORY, '#long-content-loading');
+});
+
+test('loading: no spinner basic', async () => {
+  await testLoading(DIRECTORY, '#no-spinner-loading');
+});
+
+test('loading: translucent basic', async () => {
+  await testLoading(DIRECTORY, '#translucent-loading');
+});
+
+test('loading: custom class basic', async () => {
+  await testLoading(DIRECTORY, '#custom-class-loading');
+});
+
+test('loading: backdrop standalone', async () => {
+  await testLoading(DIRECTORY, '#backdrop-loading');
+});
+
+/**
+ * RTL Tests
+ */
+
+test('loading:rtl: basic basic', async () => {
+  await testLoading(DIRECTORY, '#basic-loading', true);
+});
+
+test('loading:rtl: long content basic', async () => {
+  await testLoading(DIRECTORY, '#long-content-loading', true);
+});
+
+test('loading:rtl: no spinner basic', async () => {
+  await testLoading(DIRECTORY, '#no-spinner-loading', true);
+});
+
+test('loading:rtl: translucent basic', async () => {
+  await testLoading(DIRECTORY, '#translucent-loading', true);
+});
+
+test('loading:rtl: custom class basic', async () => {
+  await testLoading(DIRECTORY, '#custom-class-loading', true);
+});
+
+test('loading:rtl: backdrop standalone', async () => {
+  await testLoading(DIRECTORY, '#backdrop-loading', true);
 });
diff --git a/core/src/components/loading/test/basic/index.html b/core/src/components/loading/test/basic/index.html
index dcc7343109..59410e2708 100644
--- a/core/src/components/loading/test/basic/index.html
+++ b/core/src/components/loading/test/basic/index.html
@@ -21,13 +21,13 @@
     </ion-header>
 
     <ion-content padding>
-      <ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button>
+      <ion-button id="basic-loading" expand="block" onclick="presentLoading()">Show Loading</ion-button>
       <ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
-      <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long message</ion-button>
-      <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
-      <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, message: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
-      <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
-      <ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
+      <ion-button id="long-content-loading" expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long message</ion-button>
+      <ion-button id="no-spinner-loading" expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
+      <ion-button id="translucent-loading" expand="block" onclick="presentLoadingWithOptions({duration: 5000, message: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
+      <ion-button id="custom-class-loading" expand="block" onclick="presentLoadingWithOptions({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
+      <ion-button id="backdrop-loading" expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
 
       <ion-loading-controller></ion-loading-controller>
 
diff --git a/core/src/components/loading/test/standalone/e2e.ts b/core/src/components/loading/test/standalone/e2e.ts
index ecc2dab866..dbf404c45f 100644
--- a/core/src/components/loading/test/standalone/e2e.ts
+++ b/core/src/components/loading/test/standalone/e2e.ts
@@ -1,17 +1,23 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testLoading } from '../test.utils';
 
-test('loading: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/loading/test/standalone?ionic:_testing=true'
-  });
+const DIRECTORY = 'standalone';
 
-  await page.click('#basic');
-  const loading = await page.find('ion-loading');
-  expect(loading).not.toBeNull();
-
-  await loading.waitForVisible();
-  await page.waitFor(500);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
+test('loading: basic standalone', async () => {
+  await testLoading(DIRECTORY, '#basic-loading');
+});
+
+test('loading: long content standalone', async () => {
+  await testLoading(DIRECTORY, '#long-content-loading');
+});
+
+test('loading: no spinner standalone', async () => {
+  await testLoading(DIRECTORY, '#no-spinner-loading');
+});
+
+test('loading: translucent standalone', async () => {
+  await testLoading(DIRECTORY, '#translucent-loading');
+});
+
+test('loading: custom class standalone', async () => {
+  await testLoading(DIRECTORY, '#custom-class-loading');
 });
diff --git a/core/src/components/loading/test/standalone/index.html b/core/src/components/loading/test/standalone/index.html
index 8f0cd32a89..4cfc5f39f7 100644
--- a/core/src/components/loading/test/standalone/index.html
+++ b/core/src/components/loading/test/standalone/index.html
@@ -12,11 +12,11 @@
 </head>
 
 <body>
-  <button id="basic" onclick="presentLoading()">Show Loading</button>
-  <button onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</button>
-  <button onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: null})">Show Loading with no spinner</button>
-  <button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
-  <button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>
+  <button id="basic-loading" onclick="presentLoading()">Show Loading</button>
+  <button id="long-content-loading" onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</button>
+  <button id="no-spinner-loading" onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: null})">Show Loading with no spinner</button>
+  <button id="translucent-loading" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
+  <button id="custom-class-loading" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>
 
   <ion-loading-controller></ion-loading-controller>
 
diff --git a/core/src/components/loading/test/test.utils.ts b/core/src/components/loading/test/test.utils.ts
new file mode 100644
index 0000000000..c0defd9011
--- /dev/null
+++ b/core/src/components/loading/test/test.utils.ts
@@ -0,0 +1,48 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+import { cleanScreenshotName, generateE2EUrl } from '../../../utils/test/utils';
+
+export async function testLoading(
+  type: string,
+  selector: string,
+  rtl = false,
+  screenshotName: string = cleanScreenshotName(selector)
+) {
+  try {
+    const pageUrl = generateE2EUrl('loading', type, rtl);
+    if (rtl) {
+      screenshotName = `${screenshotName} rtl`;
+    }
+
+    const page = await newE2EPage({
+      url: pageUrl
+    });
+
+    const screenShotCompares = [];
+
+    await page.click(selector);
+    await page.waitForSelector(selector);
+
+    let loading = await page.find('ion-loading');
+    expect(loading).not.toBeNull();
+
+    await loading.waitForVisible();
+
+    screenShotCompares.push(await page.compareScreenshot(screenshotName));
+
+    await loading.callMethod('dismiss');
+    await loading.waitForNotVisible();
+
+    screenShotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`));
+
+    loading = await page.find('ion-loading');
+    expect(loading).toBeNull();
+
+    for (const screenShotCompare of screenShotCompares) {
+      expect(screenShotCompare).toMatchScreenshot();
+    }
+
+  } catch (err) {
+    throw err;
+  }
+}
diff --git a/core/src/components/menu/test/basic/e2e.ts b/core/src/components/menu/test/basic/e2e.ts
index 0fbba1c3c1..8b43a17cb9 100644
--- a/core/src/components/menu/test/basic/e2e.ts
+++ b/core/src/components/menu/test/basic/e2e.ts
@@ -1,34 +1,31 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testMenu } from '../test.utils';
 
-test.skip('menu: basic', async () => {
+const DIRECTORY = 'basic';
 
-  const page = await newE2EPage({
-    url: '/src/components/menu/test/basic?ionic:_testing=true'
-  });
-
-  const start = await page.find('ion-menu[side="start"]');
-  expect(start).toHaveClasses([
-    'menu-type-overlay',
-    'menu-side-start'
-  ]);
-
-  await start.callMethod('open');
-  await start.waitForVisible();
-  await page.waitFor(250);
-  expect(await page.compareScreenshot('start menu')).toMatchScreenshot();
-
-  await start.callMethod('close');
-  await page.waitFor(250);
-
-  const end = await page.find('ion-menu[side="end"]');
-  expect(end).toHaveClasses([
-    'menu-type-push',
-    'menu-enabled',
-    'menu-side-end'
-  ]);
-
-  await end.callMethod('open');
-  await end.waitForVisible();
-  await page.waitFor(250);
-  expect(await page.compareScreenshot('end menu')).toMatchScreenshot();
+test('menu: start menu', async () => {
+  await testMenu(DIRECTORY, '#start-menu');
+});
+
+test('menu: start custom menu', async () => {
+  await testMenu(DIRECTORY, '#custom-menu');
+});
+
+test('menu: end menu', async () => {
+  await testMenu(DIRECTORY, '#end-menu');
+});
+
+/**
+ * RTL Tests
+ */
+
+test('menu:rtl: start menu', async () => {
+  await testMenu(DIRECTORY, '#start-menu', true);
+});
+
+test('menu:rtl: start custom menu', async () => {
+  await testMenu(DIRECTORY, '#custom-menu', true);
+});
+
+test('menu:rtl: end menu', async () => {
+  await testMenu(DIRECTORY, '#end-menu', true);
 });
diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html
index c355e619bb..5b8a9c4225 100644
--- a/core/src/components/menu/test/basic/index.html
+++ b/core/src/components/menu/test/basic/index.html
@@ -13,7 +13,7 @@
 
 <body>
   <ion-app>
-    <ion-menu side="start" menu-id="first">
+    <ion-menu side="start" menu-id="first" id="start-menu">
       <ion-header>
         <ion-toolbar color="primary">
           <ion-title>Start Menu</ion-title>
@@ -30,7 +30,7 @@
       </ion-content>
     </ion-menu>
 
-    <ion-menu side="start" menu-id="custom" class="my-custom-menu">
+    <ion-menu side="start" menu-id="custom" class="my-custom-menu" id="custom-menu">
       <ion-header>
         <ion-toolbar color="tertiary">
           <ion-title>Custom Menu</ion-title>
@@ -47,7 +47,7 @@
       </ion-content>
     </ion-menu>
 
-    <ion-menu side="end" type="push">
+    <ion-menu side="end" type="push" id="end-menu"> 
       <ion-header>
         <ion-toolbar color="danger">
           <ion-title>End Menu</ion-title>
diff --git a/core/src/components/menu/test/standalone/e2e.ts b/core/src/components/menu/test/standalone/e2e.ts
index 3be93f7d62..61a3aa7512 100644
--- a/core/src/components/menu/test/standalone/e2e.ts
+++ b/core/src/components/menu/test/standalone/e2e.ts
@@ -1,35 +1,11 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testMenu } from '../test.utils';
 
-test('menu: standalone', async () => {
+const DIRECTORY = 'standalone';
 
-  const page = await newE2EPage({
-    url: '/src/components/menu/test/standalone?ionic:_testing=true'
-  });
-
-  const start = await page.find('ion-menu[side="start"]');
-  expect(start).toHaveClasses([
-    'menu-type-overlay',
-    'menu-enabled',
-    'menu-side-start'
-  ]);
-
-  await start.callMethod('open');
-  await start.waitForVisible();
-  await page.waitFor(250);
-  expect(await page.compareScreenshot('start menu')).toMatchScreenshot();
-
-  await start.callMethod('close');
-  await page.waitFor(250);
-
-  const end = await page.find('ion-menu[side="end"]');
-  expect(end).toHaveClasses([
-    'menu-type-push',
-    'menu-enabled',
-    'menu-side-end'
-  ]);
-
-  await end.callMethod('open');
-  await end.waitForVisible();
-  await page.waitFor(250);
-  expect(await page.compareScreenshot('end menu')).toMatchScreenshot();
+test('menu: start standalone', async () => {
+  await testMenu(DIRECTORY, '#start-menu');
+});
+
+test('menu: end standalone', async () => {
+  await testMenu(DIRECTORY, '#end-menu');
 });
diff --git a/core/src/components/menu/test/standalone/index.html b/core/src/components/menu/test/standalone/index.html
index 8228a621c9..68feb856a2 100644
--- a/core/src/components/menu/test/standalone/index.html
+++ b/core/src/components/menu/test/standalone/index.html
@@ -20,7 +20,7 @@
 </head>
 
 <body>
-    <ion-menu side="start">
+    <ion-menu side="start" id="start-menu">
       <ion-header>
         <ion-toolbar>
           <ion-title>Start Menu</ion-title>
@@ -37,7 +37,7 @@
       </ion-content>
     </ion-menu>
 
-    <ion-menu side="end" type="push">
+    <ion-menu side="end" type="push" id="end-menu">
       <ion-header>
         <ion-toolbar>
           <ion-title>End Menu</ion-title>
diff --git a/core/src/components/menu/test/test.utils.ts b/core/src/components/menu/test/test.utils.ts
new file mode 100644
index 0000000000..3dbfc132b0
--- /dev/null
+++ b/core/src/components/menu/test/test.utils.ts
@@ -0,0 +1,41 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+import { cleanScreenshotName, generateE2EUrl } from '../../../utils/test/utils';
+
+export async function testMenu(
+  type: string,
+  selector: string,
+  rtl = false,
+  screenshotName: string = cleanScreenshotName(selector)
+) {
+  try {
+    const pageUrl = generateE2EUrl('menu', type, rtl);
+    if (rtl) {
+      screenshotName = `${screenshotName} rtl`;
+    }
+
+    const page = await newE2EPage({
+      url: pageUrl
+    });
+
+    const screenShotCompares = [];
+
+    const menu = await page.find(selector);
+
+    await menu.callMethod('open');
+    await page.waitFor(250);
+
+    screenShotCompares.push(await page.compareScreenshot(screenshotName));
+
+    await menu.callMethod('close');
+    await page.waitFor(250);
+
+    screenShotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`));
+
+    for (const screenShotCompare of screenShotCompares) {
+      expect(screenShotCompare).toMatchScreenshot();
+    }
+  } catch (err) {
+    throw err;
+  }
+}
diff --git a/core/src/components/modal/test/basic/e2e.ts b/core/src/components/modal/test/basic/e2e.ts
index 4bd87a4c47..2a778dd415 100644
--- a/core/src/components/modal/test/basic/e2e.ts
+++ b/core/src/components/modal/test/basic/e2e.ts
@@ -1,16 +1,11 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testModal } from '../test.utils';
+
+const DIRECTORY = 'basic';
 
 test('modal: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/modal/test/basic?ionic:_testing=true'
-  });
-
-  await page.click('.e2ePresentModal');
-
-  const modal = await page.find('ion-modal');
-  await modal.waitForVisible();
-  await page.waitFor(250);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
+  await testModal(DIRECTORY, '#basic-modal');
+});
+
+test('modal:rtl: basic', async () => {
+  await testModal(DIRECTORY, '#basic-modal', true);
 });
diff --git a/core/src/components/modal/test/basic/index.html b/core/src/components/modal/test/basic/index.html
index 242b95d1c4..a761148273 100644
--- a/core/src/components/modal/test/basic/index.html
+++ b/core/src/components/modal/test/basic/index.html
@@ -31,7 +31,7 @@
 
     <ion-content padding>
       <p>
-        <ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
+        <ion-button id="basic-modal" onclick="presentModal()">Present modal</ion-button>
       </p>
       <p>
         <ion-button id="presentModal" class="e2ePresentModal" onclick="presentCloseModal()">Present and close modal</ion-button>
diff --git a/core/src/components/modal/test/custom/e2e.ts b/core/src/components/modal/test/custom/e2e.ts
index 9e80e6ad2d..775145e429 100644
--- a/core/src/components/modal/test/custom/e2e.ts
+++ b/core/src/components/modal/test/custom/e2e.ts
@@ -1,16 +1,11 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testModal } from '../test.utils';
+
+const DIRECTORY = 'custom';
 
 test('modal: custom', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/modal/test/custom?ionic:_testing=true'
-  });
-
-  await page.click('.e2ePresentModal');
-
-  const modal = await page.find('ion-modal');
-  await modal.waitForVisible();
-  await page.waitFor(250);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
+  await testModal(DIRECTORY, '#custom-modal');
+});
+
+test('modal:rtl: custom', async () => {
+  await testModal(DIRECTORY, '#custom-modal', true);
 });
diff --git a/core/src/components/modal/test/custom/index.html b/core/src/components/modal/test/custom/index.html
index 6e19ec7534..11249022e6 100644
--- a/core/src/components/modal/test/custom/index.html
+++ b/core/src/components/modal/test/custom/index.html
@@ -41,7 +41,7 @@
 
     <ion-content padding>
       <p>
-        <ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
+        <ion-button id="custom-modal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
       </p>
     </ion-content>
     <ion-modal-controller></ion-modal-controller>
diff --git a/core/src/components/modal/test/standalone/e2e.ts b/core/src/components/modal/test/standalone/e2e.ts
index e5bb29102e..69776cb276 100644
--- a/core/src/components/modal/test/standalone/e2e.ts
+++ b/core/src/components/modal/test/standalone/e2e.ts
@@ -1,16 +1,7 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testModal } from '../test.utils';
 
-test('modal: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/modal/test/standalone?ionic:_testing=true'
-  });
+const DIRECTORY = 'standalone';
 
-  await page.click('#basic');
-
-  const modal = await page.find('ion-modal');
-  await modal.waitForVisible();
-  await page.waitFor(250);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
+test('modal: basic', async () => {
+  await testModal(DIRECTORY, '#basic-modal');
 });
diff --git a/core/src/components/modal/test/standalone/index.html b/core/src/components/modal/test/standalone/index.html
index ee8a90e7f0..79813769f5 100644
--- a/core/src/components/modal/test/standalone/index.html
+++ b/core/src/components/modal/test/standalone/index.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-  <button id="basic" onclick="presentModal()">Present Modal</button>
+  <button id="basic-modal" onclick="presentModal()">Present Modal</button>
 
   <ion-modal-controller></ion-modal-controller>
 
diff --git a/core/src/components/modal/test/test.utils.ts b/core/src/components/modal/test/test.utils.ts
new file mode 100644
index 0000000000..419e410b9e
--- /dev/null
+++ b/core/src/components/modal/test/test.utils.ts
@@ -0,0 +1,46 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+import { cleanScreenshotName, generateE2EUrl } from '../../../utils/test/utils';
+
+export async function testModal(
+  type: string,
+  selector: string,
+  rtl = false,
+  screenshotName: string = cleanScreenshotName(selector)
+) {
+  try {
+    const pageUrl = generateE2EUrl('modal', type, rtl);
+    if (rtl) {
+      screenshotName = `${screenshotName} rtl`;
+    }
+
+    const page = await newE2EPage({
+      url: pageUrl
+    });
+
+    const screenShotCompares = [];
+
+    await page.click(selector);
+    await page.waitForSelector(selector);
+
+    let popover = await page.find('ion-modal');
+    await popover.waitForVisible();
+
+    screenShotCompares.push(await page.compareScreenshot(screenshotName));
+
+    await popover.callMethod('dismiss');
+    await popover.waitForNotVisible();
+
+    screenShotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`));
+
+    popover = await page.find('ion-modal');
+    expect(popover).toBeNull();
+
+    for (const screenShotCompare of screenShotCompares) {
+      expect(screenShotCompare).toMatchScreenshot();
+    }
+
+  } catch (err) {
+    throw err;
+  }
+}
diff --git a/core/src/components/popover/test/basic/e2e.ts b/core/src/components/popover/test/basic/e2e.ts
index d56ce7957f..9333fc134f 100644
--- a/core/src/components/popover/test/basic/e2e.ts
+++ b/core/src/components/popover/test/basic/e2e.ts
@@ -1,29 +1,47 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testPopover } from '../test.utils';
+
+const DIRECTORY = 'basic';
 
 test('popover: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/popover/test/basic?ionic:_testing=true'
-  });
-
-  await page.click('.e2eShowPopover');
-  const popover = await page.find('ion-popover');
-  await popover.waitForVisible();
-  await page.waitFor(250);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
+  await testPopover(DIRECTORY, '#basic-popover');
 });
 
-test('popover: basic-rtl', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/popover/test/basic?ionic:_testing=true&rtl=true'
-  });
-
-  await page.click('.e2eShowPopover');
-  const popover = await page.find('ion-popover');
-  await popover.waitForVisible();
-  await page.waitFor(250);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
+test('popover: translucent', async () => {
+  await testPopover(DIRECTORY, '#translucent-popover');
+});
+
+test('popover: long list', async () => {
+  await testPopover(DIRECTORY, '#long-list-popover');
+});
+
+test('popover: no event', async () => {
+  await testPopover(DIRECTORY, '#no-event-popover');
+});
+
+test('popover: custom class', async () => {
+  await testPopover(DIRECTORY, '#custom-class-popover');
+});
+
+/**
+ * RTL Tests
+ */
+
+test('popover:rtl: basic', async () => {
+  await testPopover(DIRECTORY, '#basic-popover', true);
+});
+
+test('popover:rtl: translucent', async () => {
+  await testPopover(DIRECTORY, '#translucent-popover', true);
+});
+
+test('popover:rtl: long list', async () => {
+  await testPopover(DIRECTORY, '#long-list-popover', true);
+});
+
+test('popover:rtl: no event', async () => {
+  await testPopover(DIRECTORY, '#no-event-popover', true);
+});
+
+test('popover:rtl: custom class', async () => {
+  await testPopover(DIRECTORY, '#custom-class-popover', true);
 });
diff --git a/core/src/components/popover/test/basic/index.html b/core/src/components/popover/test/basic/index.html
index 241ed256d5..5bbcd18372 100644
--- a/core/src/components/popover/test/basic/index.html
+++ b/core/src/components/popover/test/basic/index.html
@@ -26,11 +26,11 @@
     </ion-header>
 
     <ion-content id="content" padding>
-      <ion-button class="e2eShowPopover" expand="block" onclick="presentPopover({ component: 'profile-page', event: event })">Show Popover</ion-button>
-      <ion-button expand="block" onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">Show Translucent Popover</ion-button>
-      <ion-button expand="block" color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</ion-button>
-      <ion-button expand="block" color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</ion-button>
-      <ion-button expand="block" color="tertiary" onclick="presentPopover({ component: 'translucent-page', event: event, cssClass: 'my-custom-class' })">Custom Class Popover</ion-button>
+      <ion-button id="basic-popover" expand="block" onclick="presentPopover({ component: 'profile-page', event: event })">Show Popover</ion-button>
+      <ion-button id="translucent-popover" expand="block" onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">Show Translucent Popover</ion-button>
+      <ion-button id="long-list-popover" expand="block" color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</ion-button>
+      <ion-button id="no-event-popover" expand="block" color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</ion-button>
+      <ion-button id="custom-class-popover" expand="block" color="tertiary" onclick="presentPopover({ component: 'translucent-page', event: event, cssClass: 'my-custom-class' })">Custom Class Popover</ion-button>
 
       <ion-popover-controller></ion-popover-controller>
     </ion-content>
diff --git a/core/src/components/popover/test/standalone/e2e.ts b/core/src/components/popover/test/standalone/e2e.ts
index b9d288f677..af4f2866e3 100644
--- a/core/src/components/popover/test/standalone/e2e.ts
+++ b/core/src/components/popover/test/standalone/e2e.ts
@@ -1,15 +1,7 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testPopover } from '../test.utils';
+
+const DIRECTORY = 'standalone';
 
 test('popover: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/popover/test/standalone?ionic:_testing=true'
-  });
-
-  await page.click('#basic');
-  const alert = await page.find('ion-popover');
-  await alert.waitForVisible();
-  await page.waitFor(250);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
+  await testPopover(DIRECTORY, '#basic-popover');
 });
diff --git a/core/src/components/popover/test/standalone/index.html b/core/src/components/popover/test/standalone/index.html
index fab89d2cd7..187ca833ef 100644
--- a/core/src/components/popover/test/standalone/index.html
+++ b/core/src/components/popover/test/standalone/index.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-  <button id="basic" onclick="presentPopover({ component: 'profile-page', event: event })">Show Popover</button>
+  <button id="basic-popover" onclick="presentPopover({ component: 'profile-page', event: event })">Show Popover</button>
   <button onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">Show Translucent Popover</button>
   <button color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</button>
   <button color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</button>
diff --git a/core/src/components/popover/test/test.utils.ts b/core/src/components/popover/test/test.utils.ts
new file mode 100644
index 0000000000..cd78e75998
--- /dev/null
+++ b/core/src/components/popover/test/test.utils.ts
@@ -0,0 +1,46 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+import { cleanScreenshotName, generateE2EUrl } from '../../../utils/test/utils';
+
+export async function testPopover(
+  type: string,
+  selector: string,
+  rtl = false,
+  screenshotName: string = cleanScreenshotName(selector)
+) {
+  try {
+    const pageUrl = generateE2EUrl('popover', type, rtl);
+    if (rtl) {
+      screenshotName = `${screenshotName} rtl`;
+    }
+
+    const page = await newE2EPage({
+      url: pageUrl
+    });
+
+    const screenShotCompares = [];
+
+    await page.click(selector);
+    await page.waitForSelector(selector);
+
+    let popover = await page.find('ion-popover');
+    await popover.waitForVisible();
+
+    screenShotCompares.push(await page.compareScreenshot(screenshotName));
+
+    await popover.callMethod('dismiss');
+    await popover.waitForNotVisible();
+
+    screenShotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`));
+
+    popover = await page.find('ion-popover');
+    expect(popover).toBeNull();
+
+    for (const screenShotCompare of screenShotCompares) {
+      expect(screenShotCompare).toMatchScreenshot();
+    }
+
+  } catch (err) {
+    throw err;
+  }
+}
diff --git a/core/src/components/toast/test/basic/e2e.ts b/core/src/components/toast/test/basic/e2e.ts
index 97441d5729..6ae84ab82a 100644
--- a/core/src/components/toast/test/basic/e2e.ts
+++ b/core/src/components/toast/test/basic/e2e.ts
@@ -1,70 +1,79 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testToast } from '../test.utils';
 
-test('toast: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toast/test/basic?ionic:_testing=true'
-  });
+const DIRECTORY = 'basic';
 
-  // Show bottom toast
-  let button = await page.find('#showBottomToast');
-  await button.click();
-
-  let toast = await page.find('ion-toast');
-  await toast.waitForVisible();
-  await page.waitFor(250);
-
-  let compare = await page.compareScreenshot(`bottom toast`);
-  expect(compare).toMatchScreenshot();
-
-  await toast.callMethod('dismiss');
-  await toast.waitForNotVisible();
-  await page.waitFor(250);
-
-  compare = await page.compareScreenshot('dismissed bottom toast');
-  expect(compare).toMatchScreenshot();
-
-  toast = await page.find('ion-toast');
-  expect(toast).toBeNull();
-
-  // Show middle toast
-  button = await page.find('#showMiddleToast');
-  await button.click();
-
-  toast = await page.find('ion-toast');
-  await toast.waitForVisible();
-  await page.waitFor(250);
-
-  compare = await page.compareScreenshot(`middle toast`);
-  expect(compare).toMatchScreenshot();
-
-  await toast.callMethod('dismiss');
-  await toast.waitForNotVisible();
-  await page.waitFor(250);
-
-  compare = await page.compareScreenshot('dismissed middle toast');
-  expect(compare).toMatchScreenshot();
-
-  toast = await page.find('ion-toast');
-  expect(toast).toBeNull();
-
-  // Show top toast
-  button = await page.find('#showTopToast');
-  await button.click();
-
-  toast = await page.find('ion-toast');
-  await toast.waitForVisible();
-  await page.waitFor(250);
-
-  compare = await page.compareScreenshot(`top toast`);
-  expect(compare).toMatchScreenshot();
-
-  await toast.callMethod('dismiss');
-  await toast.waitForNotVisible();
-  await page.waitFor(250);
-
-  compare = await page.compareScreenshot('dismissed top toast');
-  expect(compare).toMatchScreenshot();
-
-  toast = await page.find('ion-toast');
-  expect(toast).toBeNull();
+test('toast: bottom', async () => {
+  await testToast(DIRECTORY, '#show-bottom-toast');
+});
+
+test('toast: middle', async () => {
+  await testToast(DIRECTORY, '#show-middle-toast');
+});
+
+test('toast: top', async () => {
+  await testToast(DIRECTORY, '#show-top-toast');
+});
+
+test('toast: two lines', async () => {
+  await testToast(DIRECTORY, '#two-line-toast');
+});
+
+test('toast: close button', async () => {
+  await testToast(DIRECTORY, '#close-button-toast');
+});
+
+test('toast: custom close text', async () => {
+  await testToast(DIRECTORY, '#custom-close-text-toast');
+});
+
+test('toast: translucent', async () => {
+  await testToast(DIRECTORY, '#translucent-toast');
+});
+
+test('toast: color', async () => {
+  await testToast(DIRECTORY, '#color-toast');
+});
+
+test('toast: custom class', async () => {
+  await testToast(DIRECTORY, '#custom-class-toast');
+});
+
+/**
+ * RTL Tests
+ */
+
+test('toast:rtl: bottom', async () => {
+  await testToast(DIRECTORY, '#show-bottom-toast', true);
+});
+
+test('toast:rtl: middle', async () => {
+  await testToast(DIRECTORY, '#show-middle-toast', true);
+});
+
+test('toast:rtl: top', async () => {
+  await testToast(DIRECTORY, '#show-top-toast', true);
+});
+
+test('toast:rtl: two lines', async () => {
+  await testToast(DIRECTORY, '#two-line-toast', true);
+});
+
+test('toast:rtl: close button', async () => {
+  await testToast(DIRECTORY, '#close-button-toast', true);
+});
+
+test('toast:rtl: custom close text', async () => {
+  await testToast(DIRECTORY, '#custom-close-text-toast', true);
+});
+
+test('toast:rtl: translucent', async () => {
+  await testToast(DIRECTORY, '#translucent-toast', true);
+});
+
+test('toast:rtl: color', async () => {
+  await testToast(DIRECTORY, '#color-toast', true);
+});
+
+test('toast:rtl: custom class', async () => {
+  await testToast(DIRECTORY, '#custom-class-toast', true);
 });
diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html
index 9732ea4d71..42f1d4b7ce 100644
--- a/core/src/components/toast/test/basic/index.html
+++ b/core/src/components/toast/test/basic/index.html
@@ -20,15 +20,15 @@
       </ion-header>
 
       <ion-content id="content" padding>
-        <ion-button expand="block" id="showBottomToast" onclick="presentToast('bottom')">Show Toast Bottom</ion-button>
-        <ion-button expand="block" id="showTopToast" onclick="presentToast('top')">Show Toast Top</ion-button>
-        <ion-button expand="block" id="showMiddleToast" onclick="presentToast('middle')">Show Toast Middle</ion-button>
-        <ion-button expand="block" onclick="presentToastWithOptions({message: 'Two-line message\nwith action.', showCloseButton: true, closeButtonText: 'Action'})">Show Toast with long message</ion-button>
-        <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</ion-button>
-        <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>
-        <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button>
-        <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, color: 'danger'})">Show Color Toast</ion-button>
-        <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'my-custom-class'})">Show Toast with Custom Class</ion-button>
+        <ion-button expand="block" id="show-bottom-toast" onclick="presentToast('bottom')">Show Toast Bottom</ion-button>
+        <ion-button expand="block" id="show-top-toast" onclick="presentToast('top')">Show Toast Top</ion-button>
+        <ion-button expand="block" id="show-middle-toast" onclick="presentToast('middle')">Show Toast Middle</ion-button>
+        <ion-button expand="block" id="two-line-toast" onclick="presentToastWithOptions({message: 'Two-line message\nwith action.', showCloseButton: true, closeButtonText: 'Action'})">Show Toast with long message</ion-button>
+        <ion-button expand="block" id="close-button-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</ion-button>
+        <ion-button expand="block" id="custom-close-text-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>
+        <ion-button expand="block" id="translucent-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button>
+        <ion-button expand="block" id="color-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, color: 'danger'})">Show Color Toast</ion-button>
+        <ion-button expand="block" id="custom-class-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'my-custom-class'})">Show Toast with Custom Class</ion-button>
 
         <ion-toast-controller></ion-toast-controller>
 
diff --git a/core/src/components/toast/test/standalone/e2e.ts b/core/src/components/toast/test/standalone/e2e.ts
index 9f1fc633ad..0dbde14d12 100644
--- a/core/src/components/toast/test/standalone/e2e.ts
+++ b/core/src/components/toast/test/standalone/e2e.ts
@@ -1,18 +1,7 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { testToast } from '../test.utils';
+
+const DIRECTORY = 'standalone';
 
 test('toast: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toast/test/standalone?ionic:_testing=true'
-  });
-
-  const button = await page.find('#basic');
-  await button.click();
-
-  const toast = await page.find('ion-toast');
-  await toast.waitForVisible();
-  await page.waitFor(250);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-
+  await testToast(DIRECTORY, '#basic-toast');
 });
diff --git a/core/src/components/toast/test/standalone/index.html b/core/src/components/toast/test/standalone/index.html
index b31e82abee..f952abc2e2 100644
--- a/core/src/components/toast/test/standalone/index.html
+++ b/core/src/components/toast/test/standalone/index.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-  <button id="basic" onclick="presentToast('bottom')">Show Toast Bottom</button>
+  <button id="basic-toast" onclick="presentToast('bottom')">Show Toast Bottom</button>
   <button onclick="presentToast('top')">Show Toast Top</button>
   <button onclick="presentToast('middle')">Show Toast Middle</button>
   <button onclick="presentToastWithOptions({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})">Show Toast with long message</button>
diff --git a/core/src/components/toast/test/test.utils.ts b/core/src/components/toast/test/test.utils.ts
new file mode 100644
index 0000000000..583a161c08
--- /dev/null
+++ b/core/src/components/toast/test/test.utils.ts
@@ -0,0 +1,46 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+import { cleanScreenshotName, generateE2EUrl } from '../../../utils/test/utils';
+
+export async function testToast(
+  type: string,
+  selector: string,
+  rtl = false,
+  screenshotName: string = cleanScreenshotName(selector)
+) {
+  try {
+    const pageUrl = generateE2EUrl('toast', type, rtl);
+    if (rtl) {
+      screenshotName = `${screenshotName} rtl`;
+    }
+
+    const page = await newE2EPage({
+      url: pageUrl
+    });
+
+    const screenShotCompares = [];
+
+    const button = await page.find(selector);
+    await button.click();
+
+    let toast = await page.find('ion-toast');
+    await toast.waitForVisible();
+
+    screenShotCompares.push(await page.compareScreenshot(screenshotName));
+
+    await toast.callMethod('dismiss');
+    await toast.waitForNotVisible();
+
+    screenShotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`));
+
+    toast = await page.find('ion-toast');
+    expect(toast).toBeNull();
+
+    for (const screenShotCompare of screenShotCompares) {
+      expect(screenShotCompare).toMatchScreenshot();
+    }
+
+  } catch (err) {
+    throw err;
+  }
+}
diff --git a/core/src/utils/test/utils.ts b/core/src/utils/test/utils.ts
new file mode 100644
index 0000000000..073b918c3e
--- /dev/null
+++ b/core/src/utils/test/utils.ts
@@ -0,0 +1,15 @@
+export function generateE2EUrl(component: string, type: string, rtl = false): string {
+  let url = `/src/components/${component}/test/${type}?ionic:_testing=true`;
+  if (rtl) {
+    url = `${url}&rtl=true`;
+  }
+
+  return url;
+}
+
+export function cleanScreenshotName(screenshotName: string): string {
+  return screenshotName
+    .replace(/([-])/g, ' ')
+    .replace(/[^0-9a-zA-Z\s]/gi, '')
+    .toLowerCase();
+}