Skip to Content
Technical Articles
Author's profile photo Georg Bischoff

Testing your SAPUI5 application with OPA5

What is OPA5?

OPA5 (One Page Acceptance Tests) is a testing framework to write JavaScript based acceptance tests for SAPUI5 applications . It hides asynchronicity using a polling mechanism. This ensures clean and readable tests. OPA5 is especially helpful for testing user interactions, inner-app navigation  and data bindings.

Test strategy

 

The diagram above is a representation of the agile test pyramid concept that was initially designed by Mike Cohn in his book “Succeeding with Agile”. The concept describes the recommended proportions of tests to be implemented for an application on each layer of the test pyramid.

The major reasons behind these proportions are :

  • Low-level tests are much faster and stable by nature
    Unit tests and OPA5 tests are much faster and stable compared to system tests. Faster tests give faster feedback that allows to catch issues on an early stage, especially if they are part of a continuous integration pipeline .
  • Lower costs to write and maintain the tests
    In contrast to System tests which are more fragile, difficult to maintain and which must be adapted more often, Unit and Component tests are easier to handle because they are running in an isolated context. They run independently and exhaustively, which eases the root cause analysis and thus saves a lot of costly evaluation time .

OPA5 belongs to the component test layer of the test pyramid and benefits from the advantages of fast feedback and low costs.

OPA 5 Best practices

Structure your tests with Journeys & Pages

Writing OPA5 tests seems complicated at first but if you follow some best practices and guidelines you’ll see that your tests become much more stable and less fragile. And having the tests continuously and frequently running in your continuous integration pipeline will give you reliable, fast and precise feedback about the internal quality of your app.

Use SAP Web IDE templates

SAP Web IDE offers commands to help you quickly create skeleton OPA Pages and OPA Journeys.

Use Code Completion in SAP Web IDE

Beside the templates you can use new code completions in SAP WebIDE to create a skeleton for OPA actions, OPA assertions in OPA Pages or a new OPA test in your OPA Journeys.

“OPA”+<Ctrl-Space> OPA Action / Assertion / Test

Use stable ids to identify elements

actions: {
		iEnterTextTextArea_commentArea: function (sComment) {
			return this.waitFor({
				id: "commentArea",
				viewName: "CustomerRefund",
				actions: new EnterText({
					text: sComment
				}),
				errorMessage: "Was not able to find the control with id commentArea"
			});
		}

Locating elements via stable Ids is always recommended because they are the safest locator option and you will never have a problem with finding more than one element. Ids are usually designed to be unique, therefore this locator strategy is more reliable and makes tests more robust.

Use stable OPA5 matchers in case no stable id is available

If no stable id is available, you need to find a different solution. In this case you should use stable OPA5 matchers like I18NText, BindingPath or LabelFor.

Stable Matchers examples:

  • I18NText: search for language independent key
return this.waitFor({
	controlType: "sap.m.Title",
	matchers: new I18NText({
		propertyName: "text",
		key: "openBaseSet"
	}),
	success: function (aDialogs) {
		Opa5.assert.ok(true, "Found title with i18n key \"openBaseSet\"");
	},
	errorMessage: "Did not find a title with i18n key \"openBaseSet\""
});
  • BindingPath: search binding information of an element
return this.waitFor({
	controlType: "sap.m.StandardListItem",
	matchers: new BindingPath({
		path: "/ProductCollection/0"
	}),
	success: function (aItems) {
		Opa5.assert.ok(aItems[0].getSelected(),
			"The binding path for selected item was matched");
	},
	errorMessage: "The binding path for selected item was not matched"
});
  • LabelFor: search associated label of an element
 return this.waitFor({
 	viewName: sViewName,
 	controlType: "sap.m.Input",
 	matchers: new LabelFor({
 		key: "NAME_LABEL"
 	}),
 	actions: new EnterText({
 		text: sName
 	}),
 	errorMessage: "Failed to fulfill Name input"
 })

Use standard OPA Actions

Using OPA5 action instead of writing own success function code ensures that the UI is interactable when an action is executed and subsequent events are triggered.

Learn more about OPA5 actions:

https://openui5.hana.ondemand.com/#/topic/8615a0b9088645ae936dbb8bbce5d01d

iEnterGroupIdInDialog: function (sGroup) {
	return this.waitFor({
		id: "idGroupInput",
		actions: new EnterText({
			text: sGroup
		}),
		errorMessage: "Could not find input idGroupInput"
	});
}

Speedup the OPA5 test runtime by using UI Component mode

Benefits are:

  • Faster App startup during test execution as all resources being loaded at once
  • UI5 Inspector can be used
  • Eases access to Mock Server

Below screenshot shows how the test results look like when starting your OPA5 tests in UI Component mode instead of within an iFrame. In this case your UI Component will run in the same window as your OPA5 Tests.

Further details about OPA startup by using UI Component can be found here.

Use default OPA5 config settings

We recommend to use the default timeouts and polling intervals. Further you should set autoWait: true in the OPA5 config settings in the AllJourney.js file.

Opa5.extendConfig({
    autoWait: true
);

We recommend you to overwrite the default settings for individual waitFor calls only if necessary.

For example, in case of a Message Toast that disappears after a short time unless the user moves the mouse over the message or taps on it. To ensure stable execution of OPA5 tests which manipulate Message Toast elements, it is recommended to explicitly set autoWait parameter to false only for the affected waitFor methods, as shown by the following code snippet:

iShouldSeeMessageToastAppearance: function () {
	return this.waitFor({
		// Turn off autoWait    
		autoWait: false,
		check: function () {
			// Locate the message toast using its class name in a jQuery function    
			return $(".sapMMessageToast").length > 0;
		},
		success: function () {
			Opa5.assert.ok(true, "The message toast was shown");
		},
		errorMessage: "The message toast did not show up"
	});
}

Another sample is in case you want to add an assertion to check that a button is disabled. As mentioned before we recommend you to set autoWait to true in the config settings. As a consequence the button is not found by your waitFor statement as the autoWait property ensures that only interactable elements are considered in the locator results. If you want to find the disabled button you have to set autoWait explicitely to false for this specific waitFor statement as shown in the code snippet below.

iShouldSeeDisabledButton: function () {
	return this.waitFor({
		// Turn off autoWait    
		autoWait: false,
		id: "idButton",
		matchers: [
			// button is disabled
			new Properties({
				enabled: false
			})
		],
		success: function (oButton) {
			Opa5.assert.ok(ok, "Found disabled button");
		},
		errorMessage: "The disabled button cannot be found"
	});
}

Use RegExp to identify elements & match on property values

If a regular expression and a viewName are provided, OPA5 will only look for controls in the view with a matching ID.

RegExp to identify element by ID

this.waitFor({
	id: /myId/,
	viewName: "myView"
});

RegExp to identify element by Properties Matcher

Here we identify “Fluffy Teddy Bear” in the table by title using RegExp. Example has been taken from BulletinBoard app in SAPUI5 Demo Apps.

this.waitFor({
	viewName: sViewName,
	controlType: "sap.m.ObjectIdentifier",
	matchers: [
		// text start with "Peer Groups"    
		new Properties({
			title: new RegExp("^Teddy Bear")
		})
	],
	success: function () {
		Opa5.assert.ok(true, "Teddy Bear is found in the list");
	},
	errorMessage: "Could not find Teddy Bear in the list"
});

We hope that this blog post is helpful to you. If you have further ideas or best practices that you would like to share please add in comments section below.

Happy Testing! ?

If you’re attending SAP TechEd join our CodeJam session together with the colleagues from SAP Web IDE about “Easy Automated Testing in the Cloud with SAP Web IDE”:

Further Info

Useful links & References

Automated Testing for SAP Fiori Apps (Blog)

Cookbook for OPA5

SAP UI5 Demokit

SAP Web IDE

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michelle Crapo
      Michelle Crapo

      OK - now I am going through like 100 blogs.  (maybe not that many)  One of the things I read was not to have both SAP Web IDE and UI5 in use.  It causes issues.   So same question, different blog.

      Since you nicely provided links to both IU5 and Web IDE.  What do you recommend UI5 or SAP Web IDE?

      Thank you!

      Michelle

      Author's profile photo Georg Bischoff
      Georg Bischoff
      Blog Post Author

      Hi Michelle,

      thanks for your comment.

      We recommend you to use the SAP Web IDE as development environment to develop your apps with the SAP UI5 framework.

      The main advantages in regards to component testing with OPA5 are the predefined templates and code completion that eases the creation of QUnit and OPA5 tests.

      Further you can easily run your OPA5 tests directly from SAP Web IDE with just one click.

      Please find more details about the capabilities of SAP Web IDE here:

      https://cloudplatform.sap.com/capabilities/product-info.SAP-Web-IDE.9e5c9d90-e8e0-4e82-aed2-09087a10c973.html

      You can find tutorials how to create SAP UI5 apps easily with SAP Web IDE in this tutorial series:

      https://developers.sap.com/sea/mission.pre-teched-2018.html

      Best regards,

      Georg

      Author's profile photo Michelle Crapo
      Michelle Crapo

      Hi Georg,

      Thank you for taking the time to write the blog and answer my very simple question.  I'm just starting on this journey.  I'll check out the links.   I think I've download a lot of software that I'll never use.  But since you are the second one to verify SAP Web IDE.  I'm gong to start there.  I also am excited to have a way to set up code tests!

      Thank you again,

      Michelle

      Author's profile photo Dirk Raschke
      Dirk Raschke

      Hi Georg,

      really a nice blog. Thank you very much!

      Do you know, what the reason is, when the Opa wizard within the context menu is not there as in your screenshots shown?

      I was looking for it on the on-premise Web IDE & Cloud Full-Stack Web IDE, but couldn't find only one sap template "QuickStartApplication" where it works.

      But couldn't for the heck find out, what this app does have and the others not.

      Any ideas?

      Thanks a lot!

      Dirk

      Author's profile photo Dirk Raschke
      Dirk Raschke

      found it by myself. Maybe one of you has the same issue:

      1. click on top project folder.

      2. right click on project –> project settings –> project types .

      3. take care that the flag for SAP Fiori is set.

      4. save it

      5. you will see the OPA wizard in the context menu.

      in my case it was already set, did it again and it worked for me.