test(): Take more screenshots, DRY up code, add more tests (#17534)

* test(toast): DRY up tests, add expanded tests, add rtl tests

* test(popover): add more screenshots, add rtl tests

* clean up tests a bit more

* test(modal): DRY up tests, add RTL tests

* add missing type to util function

* add utils file, update standlone test

* update standalone tests, add utils file

* test(menu): DRY up tests, add rtl tests

* test(loading): DRY up tests, add rtl tests, add utils file

* lint files

* test(alert): add more screenshots, dry up tests

* fix potential race condition

* remove artificial delay

* lint files

* lint files

* remove artificial delays

* remove artificial delay

* add initial test updates, need to figure out alert from action sheet

* test(): dry up tests some more, add generic utils file

* lint files

* add hook

* fix typescript error

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);
+});

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');
 });

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;
+  }
+}

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');
 });

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);
 });

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');
 });

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;
+  }
+}

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);
 });

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>
 

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');
 });

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>
 

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;
+  }
+}

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);
 });

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>

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');
 });

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>

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;
+  }
+}

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);
 });

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>

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);
 });

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>

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');
 });

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>
 

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;
+  }
+}

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);
 });

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>

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');
 });

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>

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;
+  }
+}

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);
 });

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>
 

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');
 });

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>

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;
+  }
+}

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();
+}