diff --git a/core/src/components/app/test/cordova/e2e.js b/core/src/components/app/test/cordova/e2e.js
deleted file mode 100644
index ae79bfe581..0000000000
--- a/core/src/components/app/test/cordova/e2e.js
+++ /dev/null
@@ -1,84 +0,0 @@
-// 'use strict';
-
-// const { register, Page, platforms } = require('../../../../../scripts/e2e');
-// const { getElement, waitForTransition } = require('../../../../../scripts/e2e/utils');
-// const expect = require('chai').expect;
-
-// class E2ETestPage extends Page {
-// constructor(driver, platform) {
-// super(driver, `http://localhost:3333/src/components/app/test/cordova?ionic:mode=${platform}&ts=${Date.now()}`);
-// }
-// }
-
-// platforms.forEach(platform => {
-// describe('app/cordova', () => {
-
-// register('should init', async (driver) => {
-// const page = new E2ETestPage(driver, platform);
-// await page.navigate();
-// });
-
-// register('should have status bar padding for all pages', async (driver, testContext) => {
-// testContext.timeout(10000);
-// const page = new E2ETestPage(driver, platform);
-// await waitForTransition(200);
-// const pageOneToolbarSelector = 'page-one ion-toolbar';
-// const pageOneToolbar = await getElement(driver, pageOneToolbarSelector);
-// const paddingTopPageOne = await pageOneToolbar.getCssValue('padding-top');
-// if (platform === 'ios') {
-// expect(paddingTopPageOne).to.equal('24px');
-// } else {
-// expect(paddingTopPageOne).to.equal('24px');
-// }
-
-
-// // navigate to a second page just to verify it's working and still has padding
-// const pageOneNextButtonSelector = 'page-one ion-button.next';
-// const pageOneNextButton = await getElement(driver, pageOneNextButtonSelector);
-// await pageOneNextButton.click();
-// await waitForTransition(600);
-
-// const pageTwoToolbarSelector = 'page-two ion-toolbar';
-// const pageTwoToolbar = await getElement(driver, pageTwoToolbarSelector);
-// const paddingTopPageTwo = await pageTwoToolbar.getCssValue('padding-top');
-// if (platform === 'ios') {
-// expect(paddingTopPageTwo).to.equal('24px');
-// } else {
-// expect(paddingTopPageTwo).to.equal('24px');
-// }
-
-// // reset the test to the original state
-// const backButtonSelector = 'page-two ion-button';
-// const backButton = await getElement(driver, backButtonSelector);
-// await backButton.click();
-// await waitForTransition(600);
-
-// });
-
-// /*register('should have status bar padding for a single modal', async (driver, testContext) => {
-// testContext.timeout(10000);
-// const page = new E2ETestPage(driver, platform);
-
-// await waitForTransition(200);
-
-// const singleModalButtonSelector = '.single-modal';
-// const singleModalButton = await getElement(driver, singleModalButtonSelector);
-// await singleModalButton.click();
-// await waitForTransition(600);
-
-// console.log('blah');
-
-// const modalOneToolbarSelector = 'modal-one ion-toolbar';
-// const modalOneToolbar = await getElement(driver, modalOneToolbarSelector);
-// const paddingTopModalOne = await modalOneToolbar.getCssValue('padding-top');
-// console.log('paddingTopModalOne: ', paddingTopModalOne);
-// if (platform === 'ios') {
-// expect(paddingTopModalOne).to.equal('24px');
-// } else {
-// expect(paddingTopModalOne).to.equal('24px');
-// }
-
-// });
-// */
-// });
-// });
diff --git a/core/src/components/app/test/cordova/index.html b/core/src/components/app/test/cordova/index.html
deleted file mode 100644
index 408320b622..0000000000
--- a/core/src/components/app/test/cordova/index.html
+++ /dev/null
@@ -1,346 +0,0 @@
-
-
-
-
-
- App - Cordova
-
-
-
-
-
-
-
-
-
-
-
-
-
- Left Menu
-
-
-
-
-
-
-
- Settings
-
-
-
-
- Close Menu
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No toolbar
-
-
-
-
- Close Menu
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/core/src/components/app/test/safe-area/e2e.ts b/core/src/components/app/test/safe-area/e2e.ts
new file mode 100644
index 0000000000..53ecc8c670
--- /dev/null
+++ b/core/src/components/app/test/safe-area/e2e.ts
@@ -0,0 +1,39 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('app: safe-area', async () => {
+
+ const page = await newE2EPage({
+ url: '/src/components/app/test/safe-area?ionic:_testing=true'
+ });
+
+ expect(await page.compareScreenshot()).toMatchScreenshot();
+
+ // Action Sheet
+ await page.click('#show-action-sheet');
+ await page.waitForChanges();
+ const actionSheet = await page.find('ion-action-sheet');
+ expect(await page.compareScreenshot('action-sheet')).toMatchScreenshot();
+ await actionSheet.callMethod('dismiss');
+
+ // Menu
+ await page.click('#show-menu');
+ await page.waitForChanges();
+ const menu = await page.find('ion-menu');
+ expect(await page.compareScreenshot('menu')).toMatchScreenshot();
+ await menu.callMethod('close');
+
+ // Picker
+ await page.click('#show-picker');
+ await page.waitForChanges();
+ const picker = await page.find('ion-picker');
+ expect(await page.compareScreenshot('picker')).toMatchScreenshot();
+ await picker.callMethod('dismiss');
+
+ // Toast
+ await page.click('#show-toast');
+ await page.waitForChanges();
+ const toast = await page.find('ion-toast');
+ expect(await page.compareScreenshot('toast')).toMatchScreenshot();
+ await toast.callMethod('dismiss');
+
+});
diff --git a/core/src/components/app/test/safe-area/index.html b/core/src/components/app/test/safe-area/index.html
new file mode 100644
index 0000000000..913a6cadbb
--- /dev/null
+++ b/core/src/components/app/test/safe-area/index.html
@@ -0,0 +1,150 @@
+
+
+
+
+
+ App - Safe Area
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Menu
+
+
+
+
+ First
+ Second
+ Third
+ Fourth
+ Fifth
+
+
+
+
+
+
+ App - Safe Area
+
+
+
+
+
+
+ Card
+
+
+ Show Action Sheet
+
+ Show Picker
+ Show Toast
+
+
+
+
+
+
+ List Header
+
+
+ Item
+
+
+ Item Divider
+
+
+
+ Item Sliding
+
+
+ Start
+
+
+ End
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Footer
+
+
+
+
+
+
+
+
+
+