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

in 30 minutes

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

Automation

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"
}
npm test

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

SAPUI5 User Interface Testing

By Christian Schuff

SAPUI5 User Interface Testing

  • 426
Loading comments...

More from Christian Schuff