Deploy Protractor E2E test in Gitlab Pipeline

  • img
    Anandu S
  • July 29,2019

Introduction

Gitlab's builtIn continuous integration and delivery tool is called Gitlab CI. We will use Gitlab CI to deploy a protractor test for an angular project uploaded in a gitlab repo.

GitLab CI will monitor your repositories for changes and run E2E tests to validate new code. After configuring our CI process, when a new commit is pushed to the repository GitLab CI will use a runner to execute our tests.

Prerequisites

You should be familiar with basic protractor E2E test. If you are new to Protractor you can read my quick start tutorial for Protractor. You should create a new angular project with protractor test cases in gitlab. If you don’t have one setup. you can generate a sample project with angular cli and use the default protractor test cases.

Understanding the .gitlab-ci.yml

gitlab looks for .gitlab-ci.ymlto run the pipeline. You should create a file .gitlab-ci.yml in the root repo directory. On any push to your repository, GitLab will look for the .gitlab-ci.yml file and start jobs on Runners according to the contents of the file, for that commit.

An .gitlab-ci.yml looks like this:

image: node:latest
stages:
  - build
  - test
cache:
  paths:
    - node_modules/
job1:
  stage: build
  script:
    - npm install
job2:
  stage: test
  script: npm test.

stages is used to define stages that can be used by jobs. The ordering of elements in stages defines the ordering of jobs’ execution:

  1. Jobs of the same stage are run in parallel.
  2. Jobs of the next stage are run after the jobs from the previous stage complete successfully.

Jobs are Top-level elements with an arbitrary name and must contain at least the script clause. Here we have two jobs job1 and job2, you can use any arbitrary name for jobs.

yml file for protractor test

image: node:10
stages:
  - pretest
  - test
job0:
  only:
    - schedules
  stage: pretest
  script:
    # If you have any code to run before test,you can put those code here 
   
job1:
  only:
    - schedules
  stage: test
  before_script:
    # Add Google Chrome to aptitude's (package manager) sources
    - echo "deb http://dl.google.com/linux/chrome/deb/ stable main" | tee -a /etc/apt/sources.list
    # Fetch Chrome's PGP keys for secure installation
    - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
    # Update aptitude's package sources
    - apt-get -qq update -y
    # Install latest Chrome stable, Xvfb packages
    - apt-get -qq install -y --allow-unauthenticated google-chrome-stable xvfb gtk2-engines-pixbuf xfonts-cyrillic xfonts-100dpi xfonts-75dpi xfonts-base xfonts-scalable imagemagick x11-apps default-jre
    # Launch Xvfb
    - Xvfb :0 -ac -screen 0 1024x768x24 &
    # Export display for Chrome
    - export DISPLAY=:99
    # Create symlink of core in webclient (Mac/Ubuntu users)
    - ln -s ../../../native_client/app/core/ web_client/src/app/core
    - cd web_client
    # Install AngularJS CLI exclusively
    # Add --unsafe-perm to resolve problems with node-gyp infinite loop on Docker
    - npm install --silent --unsafe-perm -g @angular/[email protected]
    # Install remaining project dependencies
    - npm install --silent
    # Download Selenium server JAR, drivers for Chrome
    - node ./node_modules/.bin/webdriver-manager update
  script:
    - ng e2e --protractorConfig=protractor.conf.js

Here there is two jobs. Job0 is actually used to execute any operation before the test is performed ex: DB resetting etc.

job1 is where the actual test is happening. It has a before_script and script section. In before_srcipt we do some environment setup to run protractor on gitlab runner. It is easier to run the protractor test on GUI based system (For example when we run the test on our local machine)because it launches a browser automatically during the test. But when we run the test on the non-GUI environments like Linux server in non-GUI mode or Jenkins server for CI/CD. It is possible through Xvfb.

Xvfb (X virtual framebuffer) is an in-memory display server used in a UNIX-like OS (e.g., Linux). Xvfb enables one to run graphical applications without a display.”

So the before_script will install the latest chrome,webdriver and launch Xvfb for us. Next, the test will start when gitlab execute the script section.

Protractor configuration

// protractor.conf.js


const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
    allScriptsTimeout: 11000,
specs: [
    // spec paths
    './e2e/**/*.e2e-spec.ts'
    ],
    capabilities: {
    browserName: 'chrome',
    chromeOptions: {
     args: [ '--headless', '--no-sandbox', '--disable-gpu', '--        window-size=1920,1080' ]
    }
    },   
    maxSessions: 2,
    directConnect: true,
    baseUrl: 'http://localhost:4200/',
    framework: 'jasmine',
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 300000,
        print: function() {}
    },
    onPrepare() {
        require('ts-node').register({
            project: 'e2e/tsconfig.e2e.json'
        });
        const junitReporter = new JUnitXmlReporter({
            savePath: './e2e/test-results/E2E',
            consolidateAll: false
        });
        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
    }
};

In protractor configuration file we should use ‘ — headless’ and ‘ — no-sandbox’ in chrome options to launch the test in headless mode.

Hope this helps you to integrate protractor with Gitlab pipeline

Subscribe to newsletter
Need more tech news? Tune in to our weekly newsletter to get the latest updates