Electron – Run your Spectron e2e tests with Travis and send failure screenshots to AWS S3

.travis.yml

os:
  - linux
  - osx

osx_image: xcode8.3

language: node_js

node_js: 8

before_script:
  # Workaround for prevent MacOS job failure, https://github.com/travis-ci/travis-ci/issues/6307
  - if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then command curl -sSL https://rvm.io/mpapis.asc | gpg2 --import -; fi
  - if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then rvm get stable; fi
  - if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then brew install rpm; fi
  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then export DISPLAY=:99.0; fi
  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sh -e /etc/init.d/xvfb start; fi
  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sleep 3; fi

after_failure:
  # Install Travis artifacts
  - curl -sL https://raw.githubusercontent.com/travis-ci/artifacts/master/install | bash
  # Upload all untracked files in the repository, except in node_modules, dist, app and e2e
  - artifacts upload $(git ls-files -o | grep -Fv -e node_modules -e dist -e app -e e2e)

install:
  - npm install

script:
  - node --version
  - npm --version
  - npm run e2e

notifications:
  email:
    on_success: never
    on_failure: change

first-test.e2e.js

import { expect } from 'chai';
import testUtils from './utils';

describe('first test', function () {
  this.timeout(20000);

  beforeEach(testUtils.beforeEach);
  afterEach(testUtils.afterEach);
  
  it('should succeed', function () {
    return this.app.client.waitUntilWindowLoaded()
      .then(() => this.waitForVisible('h1'))
      .getText('h1')
      .then(text => expect(text).equals('Welcome'));
  });

  it('should find .i-will-never-show-up', function () {

    return this.app.client.waitUntilWindowLoaded()
      .then(() => this.app.client.waitForVisible('.i-will-never-show-up', 10000))
      .catch(testUtils.saveErrorShot.bind(this));
  });
});

utils.js

const path = require('path');
const fs = require('fs');
const electron = require('electron');

const beforeEach = function (env = {}) {
  this.timeout(50000);
  this.app = new Application({
    path: electron,
    args: ['.'],
    startTimeout: 50000,
    waitTimeout: 50000,
    chromeDriverLogPath: process.cwd().concat('chrome-driver.log'),
    webdriverLogPath: process.cwd(),
    env: Object.assign(env, {
      DEBUG: 'false',
      NAME: 'test',
    }),
  });

  return this.app.start();
};

const afterEach = function () {
  this.timeout(50000);
  if (this.app && this.app.isRunning()) {
    return this.app.stop();
  }
  return undefined;
};

const saveErrorShot = function (e) {
  const filename = `errorShot-${this.test.parent.title}-${this.test.title}-${new Date().toISOString()}.png`
    .replace(/\s/g, '_')
    .replace(/:/g, '');

  this.app.browserWindow.capturePage().then(imageBuffer => {
    fs.writeFile(filename, imageBuffer, error => {
      if (error) throw error;

      console.info(`Screenshot saved: ${process.cwd()}/${filename}`);
    });
  });

  throw e;
};

export default {
  beforeEach,
  afterEach,
  saveErrorShot,
};