Introduction

former_member597252 · ‎08-01-2019

Introduction

During my internship I learnt automated testing is key in continuous integration. For SAPUI5/OpenUI5 based applications, automated One Page Acceptance(OPA) tests can be run using the Karma plugin, the UI5 plugin, and the Puppeteer plugin. In this post I show how OPA tests can be run in a Jenkins pipeline with these plugins, using the Jenkins shared library Piper, also known as Project Piper, and a Docker image.

Prerequisites

Before running the Jenkins pipeline, I configured my Jenkins as follows:

The Piper library must be included in the Jenkins configuration. I followed the steps in this blog post to import the Piper library into my Jenkins project: https://blogs.sap.com/2017/11/21/continuous-delivery-with-jenkins-pipelines/

I added the plugins required by the Piper library: https://sap.github.io/jenkins-library/jenkins/requiredPlugins/

In addition I added these plugins into my Jenkins project:
- Pipeline utility steps
- Node JS
- Groovy
- Groovy Laval Assignment plugin
- Groovy Postbuild
- Groovy Remote Control plugin
- Configuration as Code Plugin - Groovy Scripting Extension
- Docker Pipeline
- HTTP POST plugin
- Kubernetes plugin
- Pipeline
- Pipeline: Groovy
- Pipeline: Github Groovy libraries
- Pipeline: Shared Groovy libraries
- Pipelines: Shared Groovy Libraries through HTTP retrieval
- Matrix Groovy Execution Strategy plugin

I included into the Jenkins pipeline a web application with the following structure:
- src
- .....
- web
  - package.json
  - karma.conf.json
  - webapp
    - test
      - integration
        
        arrangements
        
        pages
        
        AllJourneys.js
        
        ......
        
        opaTests.qunit.html
        
        opaTests.qunit.js
      - unit
      - testuite.qunit.html
      - testuite.qunit.js

Puppeteer

A headless browser is required to run OPA tests in a Jenkins pipeline. Puppeteer is a plugin provided by Google and it helps running an instance of a headless Google Chrome browser. A headless browser runs without an interface which facilitates front end testing in a pipeline. I installed this plugin during one of the Jenkins pipeline steps before running the OPA tests.

Karma

In order to use the Karma plugin, a configuration file named karma.conf.js must be added in the web folder. In this configuration file, I defined the test framework and the browser used to run the OPA tests.

I set the environment variable CHROME_BIN to Puppeteer's executable path. When Karma attempts to launch the Google Chrome browser, it looks for the browser environment variables to find where the browser is installed.

I set the framework to "ui5". This plugin can be used to test SAPUI5 and UI5 projects.

I defined a custom browser named "Chrome_without_security" which is a headless Google Chrome browser.

process.env.CHROME_BIN = require('puppeteer').executablePath()

module.exports = function(config) {

  "use strict";

  config.set({



    frameworks: ['ui5'],

    reporters: ["progress"],



    browsers: ["Chrome_without_security"],

    

    customLaunchers: {

      Chrome_without_security: {

         base: 'ChromeHeadless',

         flags: ['--disable-web-security', '--no-sandbox']

      }

    },

    singleRun: true



  });

};

package.json

In the package.json file, located in the web folder, I defined the NPM commands that run Karma and the OPA tests. I run the OPA tests by executing the command "npm run opa" or "npm run karma".

{

	"name": "web-app-name",

	"version": "2.0.0",

	"description": "Project description",

	"devDependencies": {

	},

	"scripts": {

		"karma": "karma start",

		"clean": "rm -rf node_modules",

		"reinstall": "npm run clean && npm install",

		"opa": "npm run karma"

	}

}

Docker

I created a Docker image and I pushed it to the SAP Docker registry. In this Docker image, I installed dependencies of the Puppeteer plugin and the Google Chrome browser. I also installed the Karma Command Line Interface(CLI) since I had to execute the command "karma start". I believe that by adding these dependencies into a Docker image the testing process is faster since I don't need to install all the dependencies required every time the OPA tests are run. I re-install these dependencies only when an update is required. This is the Dockerfile of my Docker image:

FROM node:11

USER root

RUN apt-get update

RUN apt-get install -y wget unzip fontconfig locales gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils

RUN npm install -g karma-cli

For more details on how I created a Docker image in the SAP Docker registry, I followed the instructions in this link: https://jam4.sapjam.com/groups/bj6jHmbsTtR3CSKav2gwYY/overview_page/z18IxsQR6qbnS31OqBWDYP .

Jenkins

As mentioned earlier I imported the SAP Piper Jenkins library to my Jenkins project. I followed the steps in this blog post: https://blogs.sap.com/2017/11/21/continuous-delivery-with-jenkins-pipelines/. In the Jenkins configuration, I named the imported Piper library 'piper-library-os'. This name is variable and is required to import the Piper library into the Jenkinsfile. I explain this in the Jenkinsfile section.

Also, I provided the Docker credentials to use the SAP Docker image I created. In the Jenkins project configuration (Path: Jenkins>Manage Jenkins>Configure System), I added the Docker credentials:

I clicked on "Add" and I entered my SAP username and password. I set the ID of my Docker credentials to "dockerCredentials". In the Jenkinsfile, this ID is passed as argument to the command docker.withRegistry(..). This gives the permission to pull the Docker image I created in the SAP Docker registry.

Jenkinsfile

In my Jenkinsfile, I did the following:

I imported the Piper library with this command: @Library('piper-library-os') _. The name piper-library-os is the name I provided in the Jenkins configuration when I imported the Piper library.

I set the Docker registry to the SAP Docker registry. I entered the port number I was granted when I created the Docker image. Also, I specified the credentials to access the Docker image from the SAP Docker registry:
docker.withRegistry('https://docker.wdf.sap.corp:[port-number]', 'dockerCredentials')

I used the Piper command dockerExecute and as argument the name of the SAP Docker image docker.wdf.sap.corp:[port]/[image-name] .

I run the Jenkins pipeline under the "web" folder. I used the command dir('./[path-to-web-folder]') to do so.

I installed the Karma, Puppeteer, and UI5 plugins: sh 'npm install karma karma-chrome-launcher karma-coverage puppeteer karma-ui5 --save-dev ' .

I installed @openui5 resources. These are UI resources that are added to the resources folder when the UI is run: sh 'npm install @openui5/sap.m @openui5/sap.ui.core --save-prod'.

I run the OPA tests by executing this command: sh 'npm run opa' .

@Library('piper-library-os') _



pipeline {

    agent any

    stages {

        stage('Demo OPA5'){

            steps {

                    script{

                     //Set the Docker registry to the SAP Docker registry. Enter the port number you were granted when creating the docker image in the SAP docker registry. 

                     docker.withRegistry('https://docker.wdf.sap.corp:[port]', 'dockerCredentials'){

                     dockerExecute(script: this,dockerImage: 'docker.wdf.sap.corp:[port]/[image-name]'){

                     dir ('./web'){ . 



                          sh 'npm install karma karma-chrome-launcher karma-coverage puppeteer karma-ui5  --save-dev '  //install karma, puppeteer, and ui5 plugins

                          sh 'npm install @openui5/sap.m @openui5/sap.ui.core --save-prod' . // Install @openui5 resources. These are UI resources that are added to the resources folder when the UI is run.

                          sh 'npm run opa' //run the node js script that runs karma and opa5 tests.

                    }

                    }}

                    }

            }

        }

    }

   

}

Conclusion

In conclusion I showed how OPA tests can be automated and run in a Jenkins pipeline by using the plugins Karma, UI5, Puppeteer. Moreover, I showed how a headless Google Chrome browser and its dependencies can be installed in a Docker image and how this can be used as an environment to run OPA tests.