Add Automated System Tests with the SAPUI5 Test Recorder to Your CI/CD Pipeline

In Visual Studio Code, set up your UIVeri5 test project.

1. In Visual Studio Code, open a new terminal.

2. Navigate to the folder to which you want to add your UIVeri5 project.

3. Use the following command to call the generator for UIVeri5 tests:

   Shell/Bash Copy

   yo easy-ui5 project uiveri5

   Now, you’re asked a couple of questions that help the generator create your test structure.

4. Answer the questions as follows:

   Question	Answer
   Please enter the name of your project	uiveri5
   URL to the app under test	https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/cart/webapp/index.html
   Choose authentication	none
   Choose additional reporters	JUNIT
   Do you want to add a page object	Y
   Do you want to add a spec	Y
   Page object name	Home
   Add action with name	Press Enter to skip
   Add assertion with name	Press Enter to skip
   Name for the suite (describe block)	teched
   Name for the spec (it block)	Should validate the home screen

5. Press Enter. Now, your project structure is generated.

   

6. In Visual Studio Code, open the folder uiveri5. As a result, the project uiveri5 is loaded into the EXPLORER pane and you can see its resources in the outline:

   

   Like all system tests with UIVeri5, you’ll define your tests through different files:

   • (a) The conf.js file:

     In this file, you can define, for example, the browser and reporter that are used, the base URL, and the credentials for your login dialog.

   • (b) The spec.js file (in this case, it’s called teched.spec.js):

     In this file, you’ll define your test scenario, which comprises steps that are triggered one after the other. Within the test scenario, you’ll refer to your page objects.

   • (c) Page objects (in this case, you have home.js for the home screen and product.js for the detail view of a product):

     Page objects are design patterns that represent a significant part of an app, for example, a view. They group two kinds of elements:

     - Actions, for example, entering a specific text in a search field and triggering the search
     - Assertions, for example, getting a search result that matches the previously entered text
     

     Page objects use locators to identify specific elements on the screen. Thereby, they allow test runners to see and do anything a real user would. Page objects reside in the pages folder of your project.

     If you want to set up a project for an application that is protected by credentials, you need to add authentication configurations. See Authentication.

7. To check if the test execution works, choose Terminal → New Terminal in the root folder of your project, and enter the following command:

   Shell/Bash Copy

   uiVeri5

   As a result, the browser briefly opens to execute the tests. However, as you haven’t defined any tests, yet, the application doesn’t load.

8. In the terminal response, check if the test execution has been successful:

   

Manually, familiarize yourself with your test scenario before starting to code it. Later, you’ll automate the following steps so that they are automatically executed during your system tests.

1. In Google Chrome, use the following URL to access the home screen of your shopping application:

   Code Copy

   https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/cart/webapp/index.html

2. Check how many product categories are shown in the Product Catalog:

   

3. In the Product Catalog, search for Watch and check if the displayed results match your request:

   

4. Choose Flat Watch HD32 and check if the product appears in the detailed view:

   

5. Check if at the bottom right of the detailed view, there is an Add to Cart button:

   

Implement a test that checks if in the product catalog on the home screen of your application, all categories are shown. To verify this, the expected number of product categories are compared with the displayed ones.

1. From the EXPLORER pane in Visual Studio Code, open teched.spec.js.

   In this file, you’ll define the steps of your test scenario and within them, refer to your page objects.

2. Implement the it function by adding the skeleton of the home screen test:

   Code Copy

   it("Should validate the home screen", function () {
   
   });

   Your code should now look as follows:

   

3. To specify what you want to check, add the following line to the test skeleton:

   Code Copy

   Then.onTheHomePage.iShouldSeeAllCategories();

   iShouldSeeAllCategories is a reference to the test function that you’ll define in the following.

   Now, your first test scenario is complete. Make sure that it looks as follows and choose File → Save.

   

4. From the EXPLORER pane, open pages → home.js.

   This file represents the page object for your home screen. In page objects, you can define actions that are performed during a test and make assertions. In this specific case, however, you won’t implement an action that is executed during the test but only check the home screen. Therefore, leave the actions function empty and only make assertions:

   

5. In the Shopping Cart application in Google Chrome, press CTRL + SHIFT + ALT + T (if you use a Windows system) or SHIFT + CTRL + OPTION + T (if you use a Mac system) to open the Test Recorder in a new browser window.

6. In your sample application, right-click the first entry of the Categories list and choose Highlight. As a result, the Test Recorder highlights the entry to indicate its activity:

   

   Now, the Test Recorder provides a code snippet for your test:

   Please make sure that the dialect UIVeri5 is selected.

   

7. Copy this code snippet into the assertions section of your home.js page object.

8. To identify all elements, remove the bindingPath and interaction:

   

9. Add a suitable name for your assertion and the following code snippets:

   

   Now, the page object for your home screen is ready. Make sure that your code looks as follows and choose File → Save.

   

10. To run the test, execute the following command in the terminal:

    Code Copy

    uiveri5

    As a result, the browser opens and the home screen is loaded.

11. In the terminal response, check if the test has been passed successfully:

    

Implement a test that checks if when you search for a product, the search results are displayed accordingly. To verify this, the entered search term is compared with the search result.

1. From the EXPLORER pane in Visual Studio Code, open teched.spec.js.

2. Into the describe function, add the skeleton of the product search test:

   Code Copy

   it("Should search for a product", function () {
   
   });

   Your code should now look as follows:

   

3. Within the test skeleton, add the following interaction, which will be defined later:

   Code Copy

   When.onTheHomePage.iSearchForProduct();

4. Then, add the expected behavior, namely that the product list is filtered:

   Code Copy

   Then.onTheHomePage.theProductListShouldBeFiltered();

   Now, your test is complete. Make sure that it looks as follows and choose File → Save.

   

5. From the EXPLORER pane, open pages → home.js.

6. In the Shopping Cart application in Google Chrome, press CTRL + SHIFT + ALT + T (if you use a Windows system) or SHIFT + CTRL + OPTION + T (if you use a Mac system) to open the Test Recorder in a new browser window.

7. In your sample application, right-click the search field and choose Enter Text. As a result, the Test Recorder highlights the search field to indicate its activity:

   

   Now, the Test Recorder provides a code snippet for your test:

   Please make sure that the dialect UIVeri5 is selected.

   

8. Copy this code snippet into the actions section of your home.js page object.

9. Add a suitable name for your assertion and define that during your test, the test runner should search for Watch:

   

   Next, make an assertion about the title of the product that is displayed first in the filtered catalog.

10. After your first assertion, add a comma.

11. In the search field of your sample application, enter Watch.

12. Right-click the first product in the filtered catalog and choose Highlight. As a result, the Test Recorder highlights the list entry to indicate its activity:

    

    Now, the Test Recorder provides a code snippet for your test:

    Please make sure that the dialect UIVeri5 is selected.

    

13. Copy this code snippet into the assertions section of your home.js.

14. Remove the bindingPath and interaction:

    

15. Add a suitable name for your assertion and the following code snippets:

    

    Now, the page object for your home screen is ready. Make sure that your code looks as follows and choose File → Save.

    

16. To run the test, execute the following command in the terminal:

    Shell/Bash Copy

    uiveri5

    As a result, the browser opens and you can watch the automated test software execute the actions you have defined.

17. In the terminal response, check if the test has been passed successfully:

    

Check if the following two statements are true:

• When you select a product from the filtered catalog, it is shown in the detailed view. To verify this, compare the selected product title with the title in the detailed view.
• In the detailed view, there is an Add to cart button.

1. From the EXPLORER pane in Visual Studio Code, open teched.spec.js.

2. Into the describe function, add the skeleton of the product search test:

   Code Copy

   it("Should navigate to the product", function () {
   
     });

   Your code should now look as follows:

   

3. Within the test skeleton, add the following interaction with reference to your home.js:

   Code Copy

   When.onTheHomePage.iSelectTheFirstProduct();

4. Then, add the first behavior you expect, namely that the product title appears in the detail view:

   Code Copy

   Then.onTheProductPage.theProductTitleIsShown();

5. Next, add your second expectation, which is that the Add to cart button appears:

   Code Copy

   Then.onTheProductPage.theProductCouldBeOrdered();

   Now, your test is complete. Make sure that it looks as follows and choose File → Save.

   

6. From the EXPLORER pane, open pages → home.js.

7. Add a comma after the close bracket of the first action.

8. In the Shopping Cart application in Google Chrome, press CTRL + SHIFT + ALT + T (if you use a Windows system) or SHIFT + CTRL + OPTION + T (if you use a Mac system) to open the SAPUI5 Test Recorder in a new browser window.

9. In your sample application, right-click the title of the first search result and choose Press. As a result, the Test Recorder highlights the title to indicate its activity:

   

   Now, the Test Recorder provides a code snippet for your test:

   Please make sure that the dialect UIVeri5 is selected.

   

10. Copy this code snippet into the actions section of your home.js.

11. Adapt the name of the action. With this action, you define that during your test, the test runner clicks on the first search result:

    

    Now, the page object for your home screen is ready. Make sure that it looks as follows and choose File → Save.

    

    Next, add an assertion that is related to the product details.

    As you don’t have a page object for the detailed view, yet, use the yeoman sub-generator to generate its scaffolding. The generator yo easy-ui5:newuiveri5po creates a new page object and adds it to the existing specs.

12. In the terminal in Visual Studio Code, make sure that you’re in the uiveri5 root folder.

13. Enter the following command:

    Shell/Bash Copy

    yo easy-ui5 project newuiveri5po

14. Answer the questions that help the generator create your new page object as follows:

    Question	Answer
    Page object name	Product
    Add action with name	Press Enter to skip
    Add assertion with name	Press Enter to skip

    Now, your page object is created.

    

15. From the Explorer pane, open pages → product.js.

    This file represents the page object for the detail view of your selected product.

16. In the Shopping Cart application in Google Chrome, right-click the header of the detail view and choose Highlight. As a result, the Test Recorder highlights the header to indicate its activity:

    

    Now, the Test Recorder provides a code snippet for your test:

    Please make sure that the dialect UIVeri5 is selected.

    

17. Copy this code snippet into the assertions section of your product.js.

18. Add a suitable name for your action and the following code snippets:

    

    Now, your page object should look as follows:

    

    To verify if there is an Add to Cart button in the detail view of your selected product, add another assertion.

19. Add a comma after your last assertion.

20. In the Shopping Cart application in Google Chrome, right-click the Add to Cart button and choose Highlight. As a result, the Test Recorder highlights the button to indicate its activity:

    

    Now, the Test Recorder provides a code snippet for your test:

    Please make sure that the dialect UIVeri5 is selected.

    

21. Copy this code snippet into the assertions section of your product.js.

22. Add a suitable name for your assertion and add the following code snippet to define that you expect the Add to Cart button to be displayed:

    

    Now, the page object for the detail view of your selected product is ready. Make sure that it looks as follows and choose File → Save.

    

23. To run the test, execute the following command in the terminal:

    Code Copy

    uiveri5

24. In the terminal response, check if the test has been passed successfully:

    

Automate your system tests by integrating them into a CI/CD pipeline.

1. Execute a Git commit and push the content of your local TECHED2019-UIVERI5 project into your GitHub repository.

2. In Google Chrome, open and sign in to your Jenkins instance.

3. To create a new Jenkins pipeline, choose New Item.

4. As item name, enter UI-Testing (or any other name you like), select Pipeline, and choose OK.

5. Switch to the Pipeline tab.

   For your CI/CD pipeline, you’ll use the library of project “Piper”. It contains all steps you need to automate the tests you have implemented.

6. In the Script area, add the skeleton of your pipeline with reference to the project “Piper” library:

   Code Copy

   #!/usr/bin/env groovy
   @Library(['piper-lib-os']) _
   
   //Setup the skeleton for Jenkins based Runs
   node {
       stage('System Tests') {
   
       }
   }

   Make sure that your script looks as follows and choose Save:

   

7. To run your newly created pipeline, choose Build Now.

   As a result, your build is scheduled.

8. In the Build History, choose #1 to check the results of your first pipeline run.

9. To check the log for failures due to syntax issues, choose Console Output. Make sure that the (empty) pipeline has run successfully:

   

   Next, implement a pipeline stage for your system tests with UIVeri5.

10. From the sidebar, choose Back to Project.

11. Choose Configure and switch to the Pipeline tab.

12. Add the following content to your System Tests stage:

    Code Copy

    deleteDir()
    
    // Clone code from the system test repository
    git '<YOUR GITHUB REPOSITORY>'
    
    // checkout the master branch
    sh 'git checkout master'
    
    // With this next step UIVeri5 tests can be executed.
    uiVeri5ExecuteTests script: this
    
    // HTML Publisher plugin
    // Publish HTML reports
    // Publish Test Report for UIveri5 on Jenkins
    publishHTML target: [
        allowMissing: true,
        alwaysLinkToLastBuild: true,
        keepAll: true,
        reportDir: 'target/report/screenshots/',
        reportFiles: "report.html",
        reportName: "UIVeri5 Test Report"
    ]

13. In the script, exchange <YOUR GITHUB REPOSITORY> with the URL of the GitHub repository into which you have pushed your local TECHED2019-UIVERI5 project.

Make sure that your script looks as follows and choose **Save**:

![Pipeline Script Part 1](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-cicd-systemtest-recorder/script-1.png)

![Pipeline Script Part 2](https://raw.githubusercontent.com/sap-tutorials/Tutorials/master/tutorials/cp-cicd-systemtest-recorder/script-2.png)

14. To run your pipeline, choose Build Now.

    As a result, your build is scheduled.

    The pipeline run might take a few minutes.

15. Choose #2 to view the results of your second pipeline run. Make sure that it has run successfully:

    

16. From the sidebar, choose UIVeri5 Test Report.

    Here, you get an overview of all test results together with screenshots from their execution:

    

Congratulations!

You have successfully created different system tests with UIVeri5 and integrated them into a continuous integration and delivery pipeline.