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/EirFrO3eY9xAlXZTaT9xkFIBgBsCQ6RUQGjvwZ43GSzgIw?e=3kALDk

• 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. 🙂