Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member683242
Participant
4,930

Introduction


Automation Testing has proven itself to be a blessing when it comes to QA. It has effectively reduced the time to run repetitive tests.Once created, automated tests can be run over and over again at no additional cost and they are much faster than manual tests.

Vyper is one such Test Automation Framework used to test UI application. It is based on Jasmine and Protractor. Vyper is easy to use and is a simple browser extension that enables automation of scenarios.

In this blog post, you will get an insight on how Vyper can be used to automate testing of your SAP UI5 Application.

Setup


Vyper Prerequisites


For getting started with Vyper, you need the following:

  • Java Development Kit (JDK)


https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

  • Node JS :


https://nodejs.org/en/

  • OpenSSL (extract in C drive)


https://sap-my.sharepoint.com/:f:/p/marvin_gruessinger/EirFrO3eY9xAlXZTaT9xkFIBgBsCQ6RUQGjvwZ43GSzgI...

  • Python


https://www.python.org/downloads/windows/

  • Visual Studio Code(optional but recommended)


https://code.visualstudio.com/

Apart from this, you will require the vyperForAll and vyper-recorder repositories cloned onto your system

Go to the vyperForAll directory and perform the following steps:

  • Open up the cmd/terminal and do a "npm install" to install the required node modules.

  • Execute the SetUp.bat file.


Open extensions for your Chrome browser and drag and drop the ChromeExtension folder which would be available in the vyper-recorder repository. You will be able to see Vyper for UI5 added into your Chrome extensions.

 


 

Getting Started


Next, we will perform Automation testing on a sample SAP UI5 Application. I have created an SAP Fiori Worklist Application and will test the same using Vyper. 

Create a new Folder Vyper Automation and add the following files:

  1. Config.js


// import failFast from 'protractor-fail-fast';
exports.config = {
directConnect: true,
restartBrowserBetweenTests: false,
capabilities: {
browserName: "chrome",
loggingPrefs: {
driver: "ALL",
server: "ALL",
browser: "ALL",
},
chromeOptions: {
args: [
"--no-sandbox",
"--ignore-certificate-errors",
"--start-maximized",
"--disable-web-security",
"--enable-logging",
"--disable-infobars",
"--incognito",
"--disable-extensions",
],
prefs: {
// disable chrome's annoying password manager
"profile.password_manager_enabled": false,
credentials_enable_service: false,
password_manager_enabled: false,
},
},
}, //browser.params.glob.contractNo
params: {
glob: {
contractNo: "",
xyz: "",
srv3: 0,
winHandles: "",
},
auth: {
//settings for the authorizations and the test type E2E/UI-Component Test [2]
formType: "plain",
// username: 'PURCHASER',
// password: 'Welcome1!'
},

//settings for the coverage [3]
coverage: {
status: false,
coverage_files: ["mm_po_manages1"],
//To exclude files/folders you don't want to cover you can use the exclamation mark "!"
//['sap/bc/ui5_ui5/sap','!CUAN_SHELL_LIB/FLPPlugin','!cuan_shell_lib/FLPPlugin']
sourcePath: "./sourceFolder",
},
},

baseUrl:
"YOUR_SAP_UI5_APPLICATION_URL",
framework: "jasmine2",

// Spec patterns are relative to the current working directory when [5]
// protractor is called.
specs: ["FirstScript.js"],

// Options to be passed to Jasmine.
jasmineNodeOpts: {
showColors: false,
//silent: true,
defaultTimeoutInterval: 3000000,
allScriptsTimeout: 3000000,
},
};


Mention the URL of your SAP UI5 Application as the baseURL in the above file. The specs should contain the list of scripts you want to execute. In this blog post, we are creating a simple Vyper script.

2. Create a sub folder with the title .vscode and add the file launch.json.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "launch current opened config.js",
"program": "BASE_PATH\\vyperForAll\\protractor\\bin\\protractor",
"args":["${workspaceRoot}/config.js"]
}
]
}

Edit the above code and provide the correct path of the folder vyperForAll.

3. Create a file FirstScript.js with the following code:
describe ( "script", function () {

it("Step 01: navigate to demo SAP UI5 app", async function () {
let url = "YOUR_SAP_UI5_APPLICATION_URL";
await ui5.common.navigation.navigateToUrl(url);
});

});

Edit the url and replace it with the URL of your sample SAP UI5 application. Click on the run button and you will see your chrome browser pop up with your application webpage.

Record the Vyper Script


Now, we will record the Vyper script using the Vyper for UI5 extension. Go to your SAP UI5 application using Google Chrome browser. Open the developer tools and perform the following steps:

  • Right click on the element you want to inspect and click on "Inspect UI5 control".



 

  • Click on the Start Recording icon and it will change the icon color to red.





  • Right click on the inspected element to see all the actions you can perform.



 

  • Select the action you want to execute and click on the Stop Recording button. You will get a popup window with the script.





  • Edit the file FirstScript.js and add the complete code that was generated in the last step. Once you have completed all the steps, your folder structure should look like this.




Run the Script


After the tests are prepared, you can run the script. You can also debug it by placing a debugger point.


 

You will see the script launches the chrome browser and will execute all the test cases sequentially.

If all the test cases are executed successfully, you can see the following output in the console log.


 

Adding new test cases is not really hard when using Vyper for UI5. You can simply add more test cases by recording them in the same way as shown above. A benefit of Vyper is that you`ll end up having functional tests, as a real browser will make the calls to the application and validate the result.

 

Thank you. Hope you liked the blog post. 🙂

 
7 Comments
Great Blog pranavkapoor ! ??
vfweiss
Participant
Is it also available in a public GIT repo? 🙂
We can't reach: https://github.wdf.sap.corp/sProcurement/vyperForAll

Looks good at least, so want to be able to share and test this. 🙂
former_member683242
Participant
Hello Vincent,

Unfortunately, it is not available in a public GIT repo.

I'll surely update you if anytime in future it is available publicly. 🙂
Lakshmi_2006
Product and Topic Expert
Product and Topic Expert
Great Blog Pranav
amarnath_n2
Advisor
Advisor
0 Kudos
can we user vyper for testing reuse libraries also?

 
sunil1101
Product and Topic Expert
Product and Topic Expert
0 Kudos
Hi Pranav,

Does vyper support unit testing for SAP UI5 ?

 

Regards

Sunil
0 Kudos
Hi Pranav,

 

Nice Blog !!!

Can you comment does vyper support upload of a file using the sapui5  fileuploader ?

Regards,

Tapishnu