Create Automated System Tests for SAP Cloud Application Programming Model Projects

In Visual Studio Code, set up and run your bookshop application.

1. Before you start working, fork this repository to your personal GitHub account. See Forking a repository.
2. In Visual Studio Code, choose View → Command Palette… → Git:Clone.

3. As Repository URL, enter:

   URL

   Copy

   https://github.com/<your github username>/cap-bookshop-wdi5.git
   

4. Choose Select Repository Location and select a folder into which to clone the test repository.

5. When asked if you want to open the cloned repository, choose Open.

   As a result, the CAP-BOOKSHOP-WDI5 project is loaded into the EXPLORER pane and you can see its resources in the outline:

   

6. In Visual Studio Code, choose Terminal → New Terminal.

7. Execute the following command to install the npm packages:

   Shell/Bash

   Copy

   npm install
   

8. Execute the following command to start your bookshop application:

   Shell/Bash

   Copy

   npm run start
   

9. To open a new terminal, choose Terminal → New Terminal.

10. Execute the following command to call the quick start installation of wdi5:

    Shell/Bash

    Copy

    npm init wdi5@latest -- --configPath ./app/admin-books/webapp/test/wdi5/ --specs ./**/wdi5/specs/**.js --baseUrl http://localhost:4004/fiori-apps.html\#Books-manage
    

    The console output should look as follows:

    

11. In your project in the EXPLORER pane, choose app → admin-books → webapp → test → wdi5.

    Now you can see all files you need to define system tests with wdi5:

    • The wdio.conf.js file:

      In this file, you’ll define the settings for the wdi5 plugin, for example the browser and reporter, as well as the URL to access the SAP Fiori app under test.

    • The test.js file (in this case, it’s called bookshop.test.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.

    • Page objects (in this case, you have pageobjects/manageBooks.page.js for the list of books that are added and the button to create a new book, and pageobjects/newBook.page.js to provide the details of the new book):

      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, choosing the Create button to create a new book
      • Assertions, for example, checking if the newly created book is displayed in the list of books

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

12. Execute the following command to install the timeline reporter:

    Shell/Bash

    Copy

    npm run install --save-dev wdio-timeline-reporter
    

    The console output should look as follows:

    

13. In the wdio.conf.js file, add the following snippets to configure the timeline reporter and the Chrome browser:

    JavaScript

    Copy

    const { TimelineService } = require("wdio-timeline-reporter/timeline-service");
    exports.config = {
    // ...
    

    JavaScript

    Copy

    // ...
    services: ['chromedriver','ui5', [TimelineService]],
    // ...
    

    JavaScript

    Copy

    // ...
    reporters: ['spec',[
        "timeline",
        {
            outputDir: "target",
            embedImages: true,
            screenshotStrategy: "before:click",
        },
        ]
    ],
    // ...
    

    JavaScript

    Copy

    // ...
    capabilities: [{
        maxInstances: 5,
        browserName: 'chrome',
        acceptInsecureCerts: true,
        "goog:chromeOptions": {
            args: ["--no-sandbox", "--disable-dev-shm-usage"]
        }
    }],
    // ...
    

14. Now, your project setup is ready. Make sure that your code looks as follows and choose File → Save.

    

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. As your bookshop application runs on your local server, use the following URL to access it:

   URL

   Copy

   http://localhost:4004/fiori-apps.html#Books-manage
   

2. In the bookshop application, choose Create.

   

3. Enter the title of your new book, for example, How to Cook Pancakes.

4. From the Genre drop-down menu, choose Fiction.

5. From the Author drop-down menu, choose Emile Bronte.

   

6. Choose Create.

7. Verify that the Edit button is displayed.

8. Choose Back to return to the list of books.

9. Verify that the new book has been added to the list.

   

   The created book will persist as long as the local server with the application is running. To start with a fresh database, stop the process and restart it with npm run start.

Create a wdi5 script to test the creation of a new book in your bookshop application.

1. In your project in the EXPLORER pane, choose fiori → app → admin-books → webapp → test → wdi5 → specs/bookshop.test.js.

   The bookshop.test.js file contains your test scripts, which are divided into two sections:

   • The describe block, which is like a test suite and holds sets of test cases that are called it
   • The it block, which comprises the test cases

   You can have multiple it blocks in a single spec file.

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

2. Into the describe function, implement the it function by adding the skeleton of the create new book test:

   JavaScript

   Copy

   it("create a new book", async () => {
   
   });
   

   Your code should now look as follows:

   

3. As a first step to create a new book, you have to choose the Create button. Implement this action as follows in the it block:

   JavaScript

   Copy

   await ManageBooksPage.iClickOnCreateNewBook();
   

   Here, iClickOnCreateNewBook() is a reference to the test function that you’ll define in the following.

   Your code should now look as follows:

   

   After each step make sure to save your changes by choosing File → Save.

4. From the EXPLORER pane, open pageobjects → manageBooks.page.js.

   This file represents the page object for your bookshop application. In page objects, you can define actions that are performed during a test and make assertions:

   

5. In the bookshop 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 on the Create Button and choose Press.

   As a result, the Test Recorder highlights the entry to indicate its activity:

   

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

   

   Note: Make sure that the dialect wdi5 is selected.

7. Copy the generated code snippet into the module.exports section of your manageBooks.page.js and name the function iClickOnCreateNewBook.

   

Create a wdi5 script to test the addition of detailed information to your newly created book.

1. From the EXPLORER pane in Visual Studio Code, open bookshop.test.js.

2. In the describe block, add the following line to declare the variable bookTitle and assign the value "How to Cook Pancakes" to it:

   JavaScript

   Copy

   const bookTitle = "How to Cook Pancakes";
   

3. When adding detailed information to a book in the bookshop application, as a first action, you have to enter the title of the book. Implement this action as follows in the it block:

   JavaScript

   Copy

   await NewBookPage.iEnterTitle(bookTitle);
   

   The bookTitle constant, which you have declared before, is passed as an argument, here.

   Now, your code should look as follows:

   

4. From the EXPLORER pane, open pageobjects → newBook.page.js.

5. In your bookshop application, right-click the Title input field and choose Enter Text.

   As a result, the Test Recorder highlights the input field to indicate its activity:

   

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

   

   Note: Make sure that the dialect wdi5 is selected.

6. Copy this code snippet into the module.exports section of your newBook.page.js and name the function iEnterTitle.

   Here, pass the sBook as an argument in the function name and use it in the enterText() method.

   

7. In the it block of your bookshop.test.js, add the following line to choose a value from the Genre drop-down list:

   JavaScript

   Copy

   await NewBookPage.iSelectGenre();
   

   

8. In your bookshop application, right-click the Genre drop-down menu and choose Press.

   As a result, the Test Recorder highlights the drop-down icon to indicate its activity:

   

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

   

   Note: Make sure that the dialect wdi5 is selected.

9. Copy this code snippet into the module.exports section of your newBook.page.js file and name the function iSelectGenre.

   

10. From the Genre pop-up window in your bookshop application, right-click Fiction and choose Press.

11. Again, the Test Recorder provides a code snippet for your test. Copy it into the module.exports section of your newBook.page.js file under the same function name (iSelectGenre).

    Your code should now look as follows:

    

12. In the it block of your bookshop.test.js file, add the following line to choose a value from the Author drop-down list:

    JavaScript

    Copy

    await NewBookPage.iSelectAuthor();
    

13. Repeat the procedure for selecting the author (that is, copying the generated code snippets from the Test Recorder for choosing the drop-down menu and Emily Bronte from the pop-up window into your page object). Name the functions iSelectAuthor.

    In the end, the code in your newBook.page.js should look as follows:

    

14. In the it block of your bookshop.test.js, add the following line to select the Create button at the bottom of the application:

    JavaScript

    Copy

    await NewBookPage.iPressCreate();
    await NewBookPage.iSeeEditButton()
    

15. Now, at the footer in the bookshop application, right-click the Create button and choose Press.

16. Copy the generated snippet into the module.exports section of your newBook.page.js file. Name the functions iPressCreate and add the expected behavior to your bookshop.test.js file.

    

17. To ensure that the saving action was successful, verify that the Edit button is displayed. Add the expected behavior to your bookshop.test.js file:

    

18. In the bookshop application, right-click the Edit button and choose Highlight.

19. On the right side of the Test Recorder window, you can find a section with Properties and Bindings. Choose the icon that is located on the left of the property enabled. This will add expect(enabled).toBeTruthy(); to the code snippet.

    

20. Copy the generated code snippet from the Test Recorder into the module.exports section in your newBook.page.js file and name the function iSeeEditButton.

    It should look as follows:

    

21. Let’s proceed with our test scenario by implementing another it function in the bookshop.test.js file. To achieve that, we need to add the skeleton of the should check book is added test function:

    JavaScript

    Copy

    it("should check book is added", async () => {
    
    });
    

22. In this it function, we need two steps. First an action to navigate back to the list of books and a second step to assert that our newly created book is contained in the list. Implement this as follows in the it block:

    JavaScript

    Copy

    await NewBookPage.iNavigateBack();
    await ManageBooksPage.theBookListContains(bookTitle);
    

    Now, your test is complete. Make sure that it looks as follows:

    

23. To get the code snippet for the implementation of the NewBookPage.iNavigateBack action, right-click the < (Go Back) button and choose Press in the bookshop application.

    

24. Again, copy the generated code snippet into the module.exports section of your newBook.page.js file and name it iNavigateBack.

    Your page object should now look as follows:

    

25. In your bookshop application, choose the < (back) button. As a result, you should see the list of all books including the one you’ve added.

26. In the list of books of your bookshop application, right-click the title of the book you’ve created and choose Highlight.

    Note: Make sure that only the specific title of the row is highlighted in blue and not the whole row.

27. On the right side of the Test Recorder window, you can find a section with Properties and Bindings. Choose the icon that is located on the left of the property visible in the Inherited section. This will add expect(visible).toBeTruthy(); to the code snippet.

    

28. Copy the generated code snippet into the module.exports section of your manageBooks.page.js file and name the function theBookListContains. Here, pass the sBook as an argument in the function name and use it in the locator to identify the control by its text.

    It should look as follows:

    

29. Choose File → Save.

30. Right-click your test\wdi5 folder in the EXPLORER pane and choose Open in Integrated Terminal.

31. Execute the following command to run your test:

    Bash/Shell

    Copy

    npm run wdi5
    

    If your test run was successful, your terminal response should look as follows:

    

    You might face a timeout error as shown in the following screenshot:

    

    The timeout property is applicable at each step definition. However, if you want to increase the timeout because your test takes longer than the default value, you need to set it in the mocha framework options. In the wdio.conf.js file, set the time as follows:

    JavaScript

    Copy

    // wdio.conf.js
    exports.config = {
        //.....
        mochaOpts: {
            ui: 'bdd',
            timeout: 60000
        }
        //.....
    }
    

    Another known timeout error is while waiting for the UI5 controller to load as shown in the following screenshot:

    

    If you are getting timeout errors while waiting for an UI5 element to load, consider increasing the maximum waiting time for the availability of UI5 control. In the wdio.conf.js file, set the time as follows:

    JavaScript

    Copy

    /// wdio.conf.js
    exports.config = {
        //.....
        wdi5: {
            waitForUI5Timeout: 60000,
        },
        //.....
    }
    

32. In the EXPLORER pane, right-click the timeline-report.html in the target folder and choose Reveal in File Explorer.

33. Double-click the timeline-report in the file explorer:

    

Create credentials for deploying your application to SAP BTP, Cloud Foundry environment.

1. In the Credentials tab in SAP Continuous Integration and Delivery, choose + (Create Credentials).

   

2. For Name, enter a freely chosen name for your credentials, which is unique in your SAP BTP subaccount, for example cfdeploy.

3. As Type, select Basic Authentication.

4. For Username, enter your username for the SAP BTP cockpit.

5. For Password, use your password for the SAP BTP cockpit.

   

6. Choose Create.

Note: If your GitHub repository is not private, you can skip this section.

If your GitHub repository is private, configure credentials for it, so that SAP Continuous Integration and Delivery can connect to it.

1. In the Credentials tab in SAP Continuous Integration and Delivery, choose + (Create Credentials).

2. For Name, enter a freely chosen name for your credential, which is unique in your SAP BTP subaccount, for example github.

3. As Type, select Basic Authentication.

4. For Username, enter your GitHub username.

5. For Password, use a personal access token.

   Note: When creating the token, select repo as scope.

6. Choose Create.

Connect SAP Continuous Integration and Delivery to the repository in which your project sources reside.

1. In SAP Continuous Integration and Delivery, choose Repositories → + (Add).

   

2. In the Add Repository pane, add a name for your repository.

3. In GitHub, copy the HTTPS clone URL of the repository that contains your application.

4. Paste it into the Clone URL field in the Add Repository pane in SAP Continuous Integration and Delivery.

5. (Optional) If your GitHub repository is private, choose the GitHub credentials you’ve created in the previous step from the Credentials drop-down list.

6. Choose Add.

   Note: Optionally, you can automate SAP Continuous Integration and Delivery builds through webhooks. Thereby, builds are triggered through creating and committing a code change in your GitHub project. For more information, see Add a Webhook in GitHub.

Configure a basic SAP Continuous Integration and Delivery job and automate your system tests by integrating them into it.

1. Execute a Git commit and push the content of your local CAP-BOOKSHOP-WDI5 project into your GitHub repository.

2. In SAP Continuous Integration and Delivery, go to the Jobs tab and choose + (Create job).

3. In the General Information section of the Create Job pane, enter the following values:

   • Job Name: Freely choose a unique name for your job, for example, cap-bookshop-wdi5.
   • Repository: From the drop-down list, choose your repository.
   • Branch: Enter the branch of your repository for which you want to configure your CI/CD job, for example, main.
   • Pipeline: From the drop-down list, choose SAP Cloud Application Programming Model.
   • Version: If you create a new job, the latest version is selected by default.
   • State: To enable your job, choose ON.
   

4. In the Build Retention section, keep the default values.

5. In the Stages section, choose Job Editor as Configuration Mode.

6. For the Build stage, keep the default values.

7. For the Acceptance stage, enter the following values for the Deploy to Cloud Foundry Space step:

   • Application Name: Enter a unique application name.
   • API Endpoint: Enter the URL of your SAP BTP, Cloud Foundry API Endpoint. You can find it in the overview of your subaccount in the SAP BTP cockpit, under the Cloud Foundry Environment: tab.
   • Org Name: Enter the name of your Cloud Foundry organization. You can also find it in the overview of your subaccount.
   • Space: Enter the name of the Cloud Foundry space in which you want to test your application.
   • Credentials: From the drop-down list, choose the SAP BTP credentials you created.
   

8. Enter the following values for the WebdriverIO Test step:

   • npm Script: Use the same script name that is used to execute for local execution of the tests (wdi5).
   • Base URL: Enter the URL of the application against which the tests shall be executed. The application will be available under the following URL:
     URL

     Copy

     https://<Org Name>-<Space>-bookshop-srv.cfapps.us10-001.hana.ondemand.com/fiori-apps.html#Books-manage
     

     Note: Depending on your region, us10-001 could be different.

   • Space: Enter the name of the Cloud Foundry space in which you want to test your application.
   • Credentials: As your test application doesn’t require credentials, leave this field empty.

9. Switch all other stages off and choose Create.

   Note: As this tutorial focuses on how to get started with SAP Continuous Integration and Delivery, we’ve decided to configure only a very basic CI/CD pipeline in it. For how to configure more elaborate ones, see Supported Pipelines.

10. To run your CI/CD pipeline, choose Run.

As a result, a build of the connected job is triggered and a new build tile appears in the Builds section of your job. If you choose it, the Build Stages view opens and you can watch the individual stages of your build run through. The pipeline run might take a few minutes.

You can get an overview of the test results in the detailed log of your build: