Yeoman generators for OPA5 and UIVeri5

[tsvetealex]

In this blog post you will learn about a new way to write OPA5 and UIVeri5 tests.
We've often received questions over the last two years on how to easily setup tests and if there is some scaffolding solution. We answered these requests in the form of Yeoman generators. Yeoman is an open source command line tool and is one of the most popular scaffolding tools.

Overview

OPA5 and UIVeri5 Yeoman generators are available as part of the project generator-easy-ui5 as of version 2.3.0.  We chose to contribute to this project because it is open source and aims to incorporate the best practices for creating UI5-based web applications. You can read more about it in this SAP Community article.

Our contribution is in several sub-generators of easy-ui5 that provide the most basic scaffolding to help you kickstart your testsuite and write new tests fast. You will still be required to write your own action and assertion logic and journey steps that are relevant for your use case.

We recommend the Test Recorder tool to help you write UIVeri5 control locators and OPA5 waitFor statements.

Sub-generators are typically meant to supplement a project that has already been generated with Yeoman. They also help you avoid recurring tasks, such as creating a page object. The OPA5 and UIVeri5 sub-generators would be typically called for an easy-ui5 project. It also makes sense to have a separate project for UIVeri5 tests, or add tests to any pre-existing UI5 project, so this is also possible.

Update 16.04.21: The commands below use the latest easy-ui5 v3.0.0. Please refer to the GitHub page of the default plugin and this blog post for more details.

Prerequisites

You need to have Yeoman and generator-easy-ui5 installed on your system:

npm install -g yo generator-easy-ui5

How to use the generators

OPA5 sub-generators

OPA5 is an integration testing framework part of UI5. For more information about OPA5 visit the UI5 documentation. You can find good examples of OPA5 tests In the UI5 demoapps.

There are a couple of sub-generators for creating OPA5 tests:

• This sub-generator initializes the testsuite, OPA5 test page and configuration. It can add a journey and page object if required. If you skip these steps, you can add them later with two specific sub-generators.
  

  yo easy-ui5 project opa5

  
  

  

  
  


• This sub-generator creates a new page object and includes it in the existing journeys:
  

  yo easy-ui5 project newopa5po

  
  

  

  
  


• This sub-generator creates a new journey and includes it in the test page:
  

  yo easy-ui5 project newopa5journey

  
  

  

  
  

This simple npm command executes the tests with Karma on headless Chrome:

npm run test

UIVeri5 sub-generators

UIVeri5 is an open source E2E testing tool for UI5 applications based on WebDriverJS. It uses Jasmine and is inspired by Protractor. The UIVeri5 GitHub repo offers a detailed documentation and support.

There are a couple of sub-generators for creating UIVeri5 tests:

• This sub-generator creates the UIVeri5 configuration and installs UIVeri5 as a project dependency. It can add a Jasmine spec file and UIVeri5 page object if required. If you skip these steps, you can add them later with two specific sub-generators.
  

  yo easy-ui5 project uiveri5

  
  

  

  
  


• This sub-generator creates a new page object and includes it in the existing specs:
  

  yo easy-ui5 project newuiveri5po

  
  

  

  
  


• This sub-generator creates a new spec file:
  

  yo easy-ui5 project newuiveri5spec

  
  

  

  
  

This simple npm command executes the tests on Chrome with WebDriverJS:

npm run uiveri5

Conclusion

In this blog post you learned about the new updates in easy-ui5. You learned how to generate and execute OPA5 and UIVeri5 tests and hopefully along the way you picked up valuable tips on improving your tests.

We hope you find this contribution useful!

If you have any questions or feedback, please leave them in the GitHub repo for easy-ui5,the GitHub repo for UIVeri5 or in the comment section below!