Run Angular 2 Protractor in Bitbucket Pipelines

Question

I'm new to Bitbucket Pipelines, so I'm struggling a little bit trying to run my Protractor E2E tests of my Angular 2 application on the build. My bitbucket-pipelines.yml looks like this

image: adrianmarinica/bitbucket-pipelines-protractor

pipelines:
  default:
    - step:
        caches:
          - node
        script: # Modify the commands below to build your repository.
          - npm install
          - protractor protractor.conf.js

When all dependencies are installed and protractor starts ruuning, I get this error

How can I run my tests as I do successfully in my local machine?

Answer 1

In order to make e2e tests on bitbucket pipelines, I've to make some changes to bitbucket-pipelines.yml, package.json and protractor.conf.js.

Firstly, bitbucket-pipelines.yml looks like this. We used the docker image provided by adrianmarinica instead of the default node image.

# You can specify a custom docker image from Docker Hub as your build environment.
image: adrianmarinica/bitbucket-pipelines-protractor

pipelines:
    branches:
        master:
            - step:
                caches:
                    - node
                script:
                    - npm install
                    - npm start
                    - protractor protractor.conf.js

Then, package.json looks like this

  "scripts": {
    ...
    "start": "ng serve &"
    ...
  }

The key change here is the "&" in the start command. This will run ng serve in background, allowing the protractor command to get fired.

Finally, some tweaks to the protractor.conf.js

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 1800000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  getPageTimeout: 120000,
  capabilities: {
    'browserName': 'chrome',
    'chromeOptions': {
      'args': [
        '--no-sandbox',
        '--disable-gpu'
      ]
    }
  },
  useAllAngular2AppRoots: true,
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 120000,
    print: function () { }
  },
  beforeLaunch: function () {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
  },
  onPrepare() {
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

If your tests run succesfully locally, they also should in the pipelines, as per this configurations, the environment should be the same.