diff --git a/packages/core/scripts/e2e/README.md b/packages/core/scripts/e2e/README.md
index aef7c44ff8..7a22aa666d 100644
--- a/packages/core/scripts/e2e/README.md
+++ b/packages/core/scripts/e2e/README.md
@@ -105,14 +105,18 @@ You can also take snapshots of each end-to-end test to check for visual regressi
To take snapshots:
-```
+```bash
npm run snapshot
```
+To take snapshots of a specific folder:
+
+```bash
+npm run snapshot -- -f=toast
+```
+
## TODO
- [ ] Move this script up a directory and use for all packages?
- [ ] Turn off animations and then adjust the wait time accordingly
- [ ] Adjustments will likely be needed when the Snapshot tool has better reporting, for example the tool will likely have `start` and `finish` methods (or some such thing)
-- [ ] Cycle through the various platforms (or at least iOS and Android)
-- [ ] Remove scrollbar from snapshots
diff --git a/packages/core/scripts/e2e/index.js b/packages/core/scripts/e2e/index.js
index 1b6203a773..8543738297 100644
--- a/packages/core/scripts/e2e/index.js
+++ b/packages/core/scripts/e2e/index.js
@@ -10,10 +10,13 @@ const chromedriver = require('chromedriver');
const Page = require('./page');
const Snapshot = require('./snapshot');
+const platforms = ['android', 'ios'];
+
let driver;
let snapshot;
let specIndex = 0;
let takeScreenshots = false;
+let folder = null;
function startDevServer() {
const server = require('@stencil/dev-server/dist'); // TODO: fix after stencil-dev-server PR #16 is merged
@@ -34,7 +37,12 @@ function generateTestId() {
function getTestFiles() {
return new Promise((resolve, reject) => {
- const src = path.join(__dirname, '../../src/**/e2e.js');
+ let src = path.join(__dirname, '../../src/**/e2e.js');
+
+ if (folder) {
+ src = path.join(__dirname, `../../src/**/${folder}/**/e2e.js`);
+ }
+
glob(src, (err, files) => {
if (err) {
reject(err);
@@ -50,6 +58,10 @@ function processCommandLine() {
if (arg === '--snapshot') {
takeScreenshots = true;
}
+
+ if (arg.indexOf('-f') > -1) {
+ folder = arg.split('=')[1];
+ }
});
}
@@ -79,7 +91,14 @@ async function run() {
slow: 2000
});
- driver = new webdriver.Builder().forBrowser('chrome').build();
+ // setting chrome options to start the browser without an info bar
+ let chromeCapabilities = webdriver.Capabilities.chrome();
+ let chromeOptions = {
+ 'args': ['--disable-infobars']
+ };
+ chromeCapabilities.set('chromeOptions', chromeOptions);
+
+ driver = new webdriver.Builder().withCapabilities(chromeCapabilities).forBrowser('chrome').build();
processCommandLine();
@@ -150,5 +169,6 @@ module.exports = {
Page,
navigate: (url, tagName) => driver => new Page(driver, url).navigate(tagName),
register: registerE2ETest,
- run: run
+ run: run,
+ platforms: platforms
};
diff --git a/packages/core/scripts/e2e/snapshot.js b/packages/core/scripts/e2e/snapshot.js
index 7352519040..089fe19c9a 100644
--- a/packages/core/scripts/e2e/snapshot.js
+++ b/packages/core/scripts/e2e/snapshot.js
@@ -91,6 +91,12 @@ class Snapshot {
.setSize(this.width, this.height);
}
+ _getQueryString(field, url) {
+ var reg = new RegExp( '[?&]' + field + '=([^]*)', 'i' );
+ var string = reg.exec(url);
+ return string ? string[1] : null;
+ };
+
async _takeScreenshot(driver, options) {
const capabilities = await driver.getCapabilities();
@@ -100,12 +106,14 @@ class Snapshot {
// TODO remove the modified url/description once we're happy with the comparison to v3
let platform = 'android';
- let replacedUrl = url.replace('3333', '8876').replace('src/components', '/e2e').replace('test/', '');
+ if (url.indexOf('ionicplatform') > -1) {
+ platform = this._getQueryString('ionicplatform', url);
+ }
+
+ let replacedUrl = url.replace('3333', '8876').replace('src/components', '/e2e').replace('test/', '').replace(`?ionicplatform=${platform}`, '');
url = replacedUrl + `/index.html?ionicplatform=${platform}&ionicOverlayCreatedDiff=0&snapshot=true`;
- console.log('url', url);
let description = options.name.replace(': ', `: ${platform} `) + '.';
- console.log('description', description);
return Promise.resolve({
app_id: this.appId,
diff --git a/packages/core/src/components/action-sheet/test/basic/e2e.js b/packages/core/src/components/action-sheet/test/basic/e2e.js
index 123a7dbf84..63899166ae 100644
--- a/packages/core/src/components/action-sheet/test/basic/e2e.js
+++ b/packages/core/src/components/action-sheet/test/basic/e2e.js
@@ -1,11 +1,11 @@
'use strict';
const { By, until } = require('selenium-webdriver');
-const { register, Page } = require('../../../../../scripts/e2e');
+const { register, Page, platforms } = require('../../../../../scripts/e2e');
-class ActionSheetE2ETestPage extends Page {
- constructor(driver) {
- super(driver, 'http://localhost:3333/src/components/action-sheet/test/basic');
+class E2ETestPage extends Page {
+ constructor(driver, platform) {
+ super(driver, `http://localhost:3333/src/components/action-sheet/test/basic?ionicplatform=${platform}`);
}
present(buttonId) {
@@ -17,47 +17,50 @@ class ActionSheetE2ETestPage extends Page {
closeWithBackdrop() {
this.driver.findElement(By.css('ion-backdrop')).click();
+ return this.driver.wait(until.elementIsNotVisible(this.driver.findElement(By.css('ion-backdrop'))));
}
}
-describe('action-sheet/basic', () => {
- register('should init', driver => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.navigate();
- });
+platforms.forEach(platform => {
+ describe('action-sheet/basic', () => {
+ register('should init', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.navigate();
+ });
- register('should open action sheet', driver => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.present('basic');
- });
+ register('should open action sheet', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.present('basic');
+ });
- register('should close with backdrop click', driver => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.closeWithBackdrop();
- });
+ register('should close with backdrop click', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.closeWithBackdrop();
+ });
- register('shows noBackdropDismiss', (driver) => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.present('noBackdropDismiss');
- });
+ register('shows noBackdropDismiss', (driver) => {
+ const page = new E2ETestPage(driver, platform);
+ return page.present('noBackdropDismiss');
+ });
- register('shows alertFromActionSheet', (driver) => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.present('alertFromActionSheet');
- });
+ register('shows alertFromActionSheet', (driver) => {
+ const page = new E2ETestPage(driver, platform);
+ return page.present('alertFromActionSheet');
+ });
- register('shows scrollableOptions', (driver) => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.present('scrollableOptions');
- });
+ register('shows scrollableOptions', (driver) => {
+ const page = new E2ETestPage(driver, platform);
+ return page.present('scrollableOptions');
+ });
- register('shows scrollWithoutCancel', (driver) => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.present('scrollWithoutCancel');
- });
+ register('shows scrollWithoutCancel', (driver) => {
+ const page = new E2ETestPage(driver, platform);
+ return page.present('scrollWithoutCancel');
+ });
- register('shows cancelOnly', (driver) => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.present('cancelOnly');
+ register('shows cancelOnly', (driver) => {
+ const page = new E2ETestPage(driver, platform);
+ return page.present('cancelOnly');
+ });
});
});
diff --git a/packages/core/src/components/action-sheet/test/standalone/e2e.js b/packages/core/src/components/action-sheet/test/standalone/e2e.js
index 00dcd29eee..d1b21fd139 100644
--- a/packages/core/src/components/action-sheet/test/standalone/e2e.js
+++ b/packages/core/src/components/action-sheet/test/standalone/e2e.js
@@ -1,9 +1,19 @@
+'use strict';
- const { register, navigate } = require('../../../../../scripts/e2e');
+const { By, until } = require('selenium-webdriver');
+const { register, Page, platforms } = require('../../../../../scripts/e2e');
+class E2ETestPage extends Page {
+ constructor(driver, platform) {
+ super(driver, `http://localhost:3333/src/components/action-sheet/test/standalone?ionicplatform=${platform}`);
+ }
+}
+
+platforms.forEach(platform => {
describe('action-sheet/standalone', () => {
-
- register('should init', navigate('http://localhost:3333/src/components/action-sheet/test/standalone'));
-
+ register('should init', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.navigate();
+ });
});
-
+});
diff --git a/packages/core/src/components/alert/test/basic/e2e.js b/packages/core/src/components/alert/test/basic/e2e.js
index d02aa25de1..a7dd21469c 100644
--- a/packages/core/src/components/alert/test/basic/e2e.js
+++ b/packages/core/src/components/alert/test/basic/e2e.js
@@ -1,11 +1,11 @@
'use strict';
const { By, until } = require('selenium-webdriver');
-const { register, Page } = require('../../../../../scripts/e2e');
+const { register, Page, platforms } = require('../../../../../scripts/e2e');
-class ActionSheetE2ETestPage extends Page {
- constructor(driver) {
- super(driver, 'http://localhost:3333/src/components/alert/test/basic');
+class E2ETestPage extends Page {
+ constructor(driver, platform) {
+ super(driver, `http://localhost:3333/src/components/alert/test/basic?ionicplatform=${platform}`);
}
present(buttonId) {
@@ -17,53 +17,55 @@ class ActionSheetE2ETestPage extends Page {
closeWithBackdrop() {
this.driver.findElement(By.css('ion-backdrop')).click();
+ return this.driver.wait(until.elementIsNotVisible(this.driver.findElement(By.css('ion-backdrop'))));
}
}
-describe('alert/basic', () => {
- register('should init', driver => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.navigate();
- });
+platforms.forEach(platform => {
+ describe('alert/basic', () => {
+ register('should init', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.navigate();
+ });
- register('should open basic alert', driver => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.present('basic');
- });
+ register('should open basic alert', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.present('basic');
+ });
- register('should open alert long message', driver => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.present('longMessage');
- });
+ register('should open alert long message', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.present('longMessage');
+ });
- register('should open alert multiple buttons', driver => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.present('multipleButtons');
- });
+ register('should open alert multiple buttons', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.present('multipleButtons');
+ });
- register('should open alert no message', driver => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.present('noMessage');
- });
+ register('should open alert no message', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.present('noMessage');
+ });
- register('should open confirm alert', driver => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.present('confirm');
- });
+ register('should open confirm alert', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.present('confirm');
+ });
- register('should open prompt alert', driver => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.present('prompt');
- });
+ register('should open prompt alert', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.present('prompt');
+ });
- register('should open radio alert', driver => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.present('radio');
- });
+ register('should open radio alert', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.present('radio');
+ });
- register('should open checkbox alert', driver => {
- const page = new ActionSheetE2ETestPage(driver);
- return page.present('checkbox');
+ register('should open checkbox alert', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.present('checkbox');
+ });
});
-
});
diff --git a/packages/core/src/components/alert/test/standalone/e2e.js b/packages/core/src/components/alert/test/standalone/e2e.js
index 2c481b363e..c73c43988d 100644
--- a/packages/core/src/components/alert/test/standalone/e2e.js
+++ b/packages/core/src/components/alert/test/standalone/e2e.js
@@ -1,9 +1,19 @@
+'use strict';
- const { register, navigate } = require('../../../../../scripts/e2e');
+const { By, until } = require('selenium-webdriver');
+const { register, Page, platforms } = require('../../../../../scripts/e2e');
+class E2ETestPage extends Page {
+ constructor(driver, platform) {
+ super(driver, `http://localhost:3333/src/components/alert/test/standalone?ionicplatform=${platform}`);
+ }
+}
+
+platforms.forEach(platform => {
describe('alert/standalone', () => {
-
- register('should init', navigate('http://localhost:3333/src/components/alert/test/standalone'));
-
+ register('should init', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.navigate();
+ });
});
-
+});
diff --git a/packages/core/src/components/avatar/test/standalone/e2e.js b/packages/core/src/components/avatar/test/standalone/e2e.js
index 91d7f41996..d37a004508 100644
--- a/packages/core/src/components/avatar/test/standalone/e2e.js
+++ b/packages/core/src/components/avatar/test/standalone/e2e.js
@@ -1,9 +1,19 @@
+'use strict';
- const { register, navigate } = require('../../../../../scripts/e2e');
+const { By, until } = require('selenium-webdriver');
+const { register, Page, platforms } = require('../../../../../scripts/e2e');
+class E2ETestPage extends Page {
+ constructor(driver, platform) {
+ super(driver, `http://localhost:3333/src/components/avatar/test/standalone?ionicplatform=${platform}`);
+ }
+}
+
+platforms.forEach(platform => {
describe('avatar/standalone', () => {
-
- register('should init', navigate('http://localhost:3333/src/components/avatar/test/standalone'));
-
+ register('should init', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.navigate();
+ });
});
-
+});
diff --git a/packages/core/src/components/badge/test/basic/e2e.js b/packages/core/src/components/badge/test/basic/e2e.js
index 01907899ac..d077603aa1 100644
--- a/packages/core/src/components/badge/test/basic/e2e.js
+++ b/packages/core/src/components/badge/test/basic/e2e.js
@@ -1,7 +1,19 @@
-const { register, navigate } = require('../../../../../scripts/e2e');
+'use strict';
-describe('badge/basic', () => {
+const { By, until } = require('selenium-webdriver');
+const { register, Page, platforms } = require('../../../../../scripts/e2e');
- register('should init', navigate('http://localhost:3333/src/components/badge/test/basic'));
+class E2ETestPage extends Page {
+ constructor(driver, platform) {
+ super(driver, `http://localhost:3333/src/components/badge/test/basic?ionicplatform=${platform}`);
+ }
+}
+platforms.forEach(platform => {
+ describe('badge/basic', () => {
+ register('should init', driver => {
+ const page = new E2ETestPage(driver, platform);
+ return page.navigate();
+ });
+ });
});
diff --git a/packages/core/src/components/badge/test/basic/index.html b/packages/core/src/components/badge/test/basic/index.html
index 6951934c5b..8a08ca17a3 100644
--- a/packages/core/src/components/badge/test/basic/index.html
+++ b/packages/core/src/components/badge/test/basic/index.html
@@ -45,7 +45,7 @@
Dark Badge
- 99
+ primary
Dynamic Badge Color (toggle)
@@ -87,8 +87,8 @@
function toggleColor() {
const prev = badge.getAttribute('color');
- const base = 'secondary';
- badge.setAttribute('color', prev === base ? null : base);
+ badge.setAttribute('color', prev === 'secondary' ? 'primary' : 'secondary');
+ badge.innerHTML = prev === 'secondary' ? 'primary' : 'secondary';
}