SAPUI5 User Interface Testing

Testing the $#*! out of your UI

Objective

• Ready to go test setup including
  • Unit Tests
  • Integration Tests
• CI-ready test automation using karma
• Visual regression testing using BackstopJS

Setup

• Create Project from SAP Web IDE Template             "SAP Fiori Master-Detail Application" (metadata.xml)
• Sync via git or export
• npm init
• add server.js
• add server.js as main script
• npm start
• http://localhost:3000

test.html

• flpSandbox.html - Runs app in launchpad sandbox
• flpSandboxMockServer.html - Runs app in launchpad sandbox with mock data
• testsuite.qunit.html - Runs all tests
• unitTests.qunit.html - Runs all unit tests
• allTests.js - Loads/includes all unit tests
• opaTest.qunit.html - Runs all integration tests
• AllJourneys.js - Loads/includes all integration tests

Test Automation with karma

• npm install --save-dev karma karma-openui5

• npm install -g karma-cli

• add karma.conf.js
• adapt openui5 path
• add resourceRoots
• add files config

• karma start

Add QUnit

• npm install --save-dev karma-qunit qunitjs

• add to frameworks in karma.conf.js

be aware of qunit version

keep in sync with your SAPUI5 version

Add a Launcher

• npm install --save-dev karma-chrome-launcher

• Add browsers config to karma.conf.js

Add Coverage Reporting

• npm install --save-dev karma-coverage

• add preprocessors to karma.conf.js
• add reporters to karma.conf.js

Add JUnit Reporting

• npm install --save-dev karma-junit-reporter

• add preprocessors to karma.conf.js
• add reporters to karma.conf.js

Add Chrome Headless

• npm install --save-dev puppeteer

• add snippet below

• karma start --browsers ChromeHeadless

// see https://github.com/karma-runner/karma-chrome-launcher
const ChromiumRevision = 
  require('puppeteer/package.json').puppeteer.chromium_revision;
const Downloader = require('puppeteer/utils/ChromiumDownloader');
const revisionInfo = Downloader
  .revisionInfo(Downloader.currentPlatform(), ChromiumRevision);

process.env.CHROME_BIN = revisionInfo.executablePath;

Add npm scripts

"scripts": {
  "test": "karma start --single-run 
--browsers ChromeHeadless",
  "tdd": "karma start"
}

see gist

BackstopJS

• npm install -g backstopjs

• backstop init

•  

backstop.json

• set url
• use flpSandboxMockServer
• set serverDelay=0
• make sure UI is completly rendered
  • delay = wait for ms
  • readyEvent = wait for string logged to the console
  • readySelectors = wait for a selector to appear 

backstop test