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?

score 6 · Accepted Answer · answered Aug 07 '17 at 19:47

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.

score 0 · Answer 2 · edited Aug 07 '17 at 23:30

This is just my example: (Non AngularJS App)

Inside Source: test_specs.js, conf.js, bitbucket.pipeline.yml

Source: ( Bitbucket ) test_spec.js

      describe("Facebook App test", function(){

       beforeEach(function(){
       browser.driver.ignoreSynchronization = true;

       });

      it("should launch the browser", function(){

       browser.driver.get("https://www.facebook.com");    

       console.log("Launch the browser");

      }

});

---------------------------

Source: conf.js

exports.config = {
directConnect: true,

allScriptsTimeout: 20000,
capabilities: {
'browserName': 'chrome'
},

// Framework to use. Jasmine is recommended.
framework: 'jasmine',

// Spec patterns are relative to the current working directory when
// protractor is called.
specs: ['test_spec.js'],

// Options to be passed to Jasmine.
jasmineNodeOpts: {
//showColors: true,
defaultTimeoutInterval: 30000

}
};

-----------------------------

bitbucket.pipeline.yml ( **Is this correct?** )

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

You should explain why this is the correct solution. – Difster Aug 07 '17 at 23:30 — Difster, Aug 07 '17 at 23:30

score -1 · Answer 3 · answered Aug 03 '17 at 18:37

-1

By default Protractor waits for the angular variable to be present in the webpage. It waits for a default time of ten seconds and then times out. If your application is not an angular application, you can turn it off by setting

browser.waitForAngularEnabled(false);

in your describe blocks, before the it section.

PS - If the above doesn't work, try browser.ignoreSynchronization = true; in your very first describe block, before the it section, which would make Protractor not wait for Angular promises.

answered Aug 03 '17 at 18:37

demouser123

4,108
9
50
82

It's an angular 2 application actually – MarBVI Aug 03 '17 at 18:40
But to run E2E testa, I need the app to be served in port 4200 right? How can I do that in pipelines? Because, if I put npm start on my script, it will get stuck there and protractor statement will never be fired – MarBVI Aug 04 '17 at 13:23
Ya, because you're not answering the question – MarBVI Aug 07 '17 at 12:05

Run Angular 2 Protractor in Bitbucket Pipelines

3 Answers3