chore(snapshot): add support for ios platform and passing a folder (#13635)

* chore(snapshot): adds support for multiple platforms and passing folder

* test(e2e): update e2e tests for multiple platforms

* test(e2e): fix failing backdrop tests

* chore(snapshot): remove console logs

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

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

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,