[Blocked] Selenium tests: Use Marionette instead of add-on based driver

.travis.yml

@@ -7,13 +7,13 @@ cache:
     - node_modules
 
 addons:
-  firefox: "46.0.1" # Firefox 47+ breaks Selenium. See https://github.com/fxbox/app/pull/161
+  # Firefox 48+ is needed because it allows to call window.foo within Selenium
+  # https://bugzilla.mozilla.org/show_bug.cgi?id=1123506
+  firefox: latest-beta
 
 install:
   - "sh -e /etc/init.d/xvfb start"
   - "export DISPLAY=:99.0"
-  - "wget http://selenium-release.storage.googleapis.com/2.53/selenium-server-standalone-2.53.0.jar"
-  - "java -jar selenium-server-standalone-2.53.1.jar > /dev/null &"
   - npm install
 
 script:

gulpfile.js

@@ -10,7 +10,7 @@ const zip = require('gulp-zip');
 const del = require('del');
 const runSequence = require('run-sequence');
 const webserver = require('gulp-webserver');
-const mocha = require('gulp-mocha');
+const mocha = require('gulp-spawn-mocha');
 const gls = require('gulp-live-server');
 const gsww = require('gulp-sww');
 const pkg = require('./package.json');
@@ -31,6 +31,10 @@ const cssnano = require('cssnano');
 const stylelint = require('gulp-stylelint');
 const git = require('gulp-git');
 const ghPages = require('gulp-gh-pages');
+const download = require('gulp-downloader');
+const gunzip = require('gulp-gunzip');
+const chmod = require('gulp-chmod');
+const process = require('process');
 
 const APP_ROOT = './app/';
 const TESTS_ROOT = './tests/';
@@ -375,6 +379,38 @@ gulp.task('run-unit-tests', ['compile-unit-tests'], function(cb) {
   server.start();
 });
 
+gulp.task('install-gecko-driver', function() {
+  const GECKO_DRIVER_VERSION = '0.8.0';
+  const GECKO_DRIVER_FOLDER = `${__dirname}/dist`;
+
+  // GeckoDriver must be in the path, so Selenium client can locate it
+  const oldPath = process.env.PATH;
+  process.env.PATH = `${oldPath}:${GECKO_DRIVER_FOLDER}`;
+
+  const os = getOsName();
+
+  return download(`https://github.com/mozilla/geckodriver/releases/\
+download/v${GECKO_DRIVER_VERSION}/geckodriver-\
+${GECKO_DRIVER_VERSION}-${os}.gz`)
+    .pipe(gunzip())
+    .pipe(chmod(755))
+    // wires is the previous project name of geckodriver, selenium will look
+    // for that name in the path
+    .pipe(rename('wires'))
+    .pipe(gulp.dest(GECKO_DRIVER_FOLDER));
+});
+
+function getOsName() {
+  switch (process.platform) {
+    case 'darwin':
+      return 'OSX';
+    case 'linux':
+      return 'linux64'; // Warning: No 32 bits binary is available
+    default:
+      throw new Error('Unsupported OS');
+  }
+}
+
 gulp.task('run-test-integration', function() {
   return gulp.src(
     `${TESTS_ROOT}{common,integration}/**/*_test.js`, { read: false }
@@ -387,10 +423,13 @@ gulp.task('doc', function() {
 });
 
 gulp.task('test-integration', function(cb) {
-  runSequence('start-simulators', 'run-test-integration', () => {
+  runSequence(
+    'install-gecko-driver',
+    'start-simulators',
+    'run-test-integration',
     // Tear down whatever the result is
-    runSequence('stop-simulators', cb);
-  });
+    () => { runSequence('stop-simulators', cb); }
+  );
 });
 
 gulp.task('run-test-e2e', function() {

package.json

@@ -43,6 +43,7 @@
     "babel-plugin-transform-react-inline-elements": "^6.8.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.2.7",
     "babel-preset-react": "^6.5.0",
+    "base64-js": "^1.1.2",
     "chai": "^3.5.0",
     "chai-as-promised": "^5.3.0",
     "cors": "^2.7.1",
@@ -53,16 +54,20 @@
     "express": "^4.13.4",
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
+    "gulp-chmod": "^1.3.0",
+    "gulp-concat": "^2.6.0",
+    "gulp-downloader": "^1.0.4",
     "gulp-esdoc": "^0.2.0",
     "gulp-eslint": "^2.0.0",
     "gulp-gh-pages": "^0.5.4",
     "gulp-git": "^1.7.2",
+    "gulp-gunzip": "0.0.3",
     "gulp-live-server": "0.0.29",
-    "gulp-mocha": "^2.2.0",
     "gulp-postcss": "^6.1.1",
     "gulp-rename": "^1.2.2",
     "gulp-rollup ": "^1.9.0",
     "gulp-sourcemaps": "^1.6.0",
+    "gulp-spawn-mocha": "^2.2.2",
     "gulp-stylelint": "^2.0.2",
     "gulp-sww": "0.0.12",
     "gulp-uglify": "^1.5.3",
@@ -88,7 +93,7 @@
     "rollup-plugin-uglify": "^0.3.1",
     "run-sequence": "^1.2.0",
     "rxjs": "^5.0.0-beta.8",
-    "selenium-webdriver": "^2.53.2",
+    "selenium-webdriver": "https://github.com/JohanLorenzo/selenium/releases/download/2.54.0-dev-2/selenium-webdriver-2.54.0-dev.tgz",
     "sinon": "^1.17.4",
     "sinon-chai": "^2.8.0",
     "stylelint": "^6.5.1",

tests/common/global_set_ups_test.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const app = require('../lib/app');
+
+afterEach(function() {
+  return app.cleanUp();
+});
+
+after(function() {
+  return app.stop();
+});

tests/common/login_test.js

@@ -1,25 +1,17 @@
 'use strict';
 
-const App = require('../lib/app');
+const app = require('../lib/app');
 
 describe('Login', function() {
-  let app;
-  let loginView;
-  this.timeout(30000);
+  this.timeout(60000);
 
-  before(() => {
-    app = new App();
-  });
+  let loginView;
 
   beforeEach(() => {
     return app.init()
       .then((defaultView) => { loginView = defaultView; });
   });
 
-  afterEach(() => app.cleanUp());
-
-  after(() => app.stop());
-
   it('should login', () => loginView.loginSuccess(12345678));
 
   // @todo Delete this test once a new one comes in. It was initially meant to

tests/common/logout_test.js

@@ -1,20 +1,17 @@
 'use strict';
 
-const App = require('../lib/app');
+const app = require('../lib/app');
 
 describe('Logout', function() {
-  let app;
+  this.timeout(60000);
+
   let loginView;
-  this.timeout(30000);
 
-  before(() => {
-    app = new App();
+  beforeEach(() => {
     return app.init()
       .then((defaultView) => { loginView = defaultView; });
   });
 
-  after(() => app.stop());
-
   it('should logout', () => {
     return loginView.loginSuccess(12345678)
       .then((servicesView) => servicesView.logoutSuccess());

tests/common/new_recipe_test.js

@@ -1,25 +1,18 @@
 'use strict';
 
-const App = require('../lib/app');
+const app = require('../lib/app');
 
 describe('Recipes tests', function() {
-  let app;
-  let loginView;
+  this.timeout(60000);
+
   let servicesGeneralView;
-  this.timeout(30000);
 
-  before(() => {
-    app = new App();
+  beforeEach(() => {
     return app.init()
-      .then((defaultView) => { loginView = defaultView; })
-      .then(() => loginView.loginSuccess(12345678))
+      .then((loginView) => loginView.loginSuccess(12345678))
       .then((servicesView) => servicesGeneralView = servicesView);
   });
 
-  afterEach(() => app.cleanUp());
-
-  after(() => app.stop());
-
   it('should be able to start creating a new recipe', () => {
     return servicesGeneralView.goToRecipesView()
       .then((recipesView) => recipesView.goToNewRecipe().tap);

tests/lib/app.js

@@ -1,12 +1,22 @@
 'use strict';
 
+const fs = require('fs');
+const path = require('path');
+const base64 = require('base64-js');
 const webdriver = require('selenium-webdriver');
+const firefoxCapabilities = require('selenium-webdriver/lib/capabilities')
+  .Capabilities.firefox();
 
-const ASYNC_SCRIPT_TIMEOUT_IN_MS = 10000;
+firefoxCapabilities.set('marionette', true);
 
-function App(driver, url) {
-  this.driver = driver || new webdriver.Builder().forBrowser('firefox').build();
-  this.driver.manage().timeouts().setScriptTimeout(ASYNC_SCRIPT_TIMEOUT_IN_MS);
+const zippedProfile = fs.readFileSync(path.join(__dirname, 'profile.zip'));
+const encodedProfile = base64.fromByteArray(zippedProfile);
+firefoxCapabilities.set('firefox_profile', encodedProfile);
+const driverBuilder = new webdriver.Builder()
+  .withCapabilities(firefoxCapabilities);
+
+function App(url) {
+  this.driver = driverBuilder.build();
   this.url = url || 'https://localhost:8000';
 }
 
@@ -54,4 +64,6 @@ App.prototype = {
   },
 };
 
-module.exports = App;
+const app = new App();
+
+module.exports = app;

tests/lib/views/login/view.js

@@ -14,13 +14,13 @@ function LoginView() {
 LoginView.prototype = Object.assign({
 
   loginSuccess(password) {
-    return this.accessors.startLoginButton.click().then(() => {
-      this.accessors.passwordField.sendKeys(password);
-      this.accessors.submitButton.click();
-    }).then(() => {
-      const ServicesView = require('../services/view');
-      return new ServicesView(this.driver);
-    });
+    return this.accessors.startLoginButton.click()
+      .then(() => this.accessors.passwordField.sendKeys(password))
+      .then(() => this.accessors.submitButton.click())
+      .then(() => {
+        const ServicesView = require('../services/view');
+        return new ServicesView(this.driver);
+      });
   },
 
 }, View.prototype);