Customer Relationship Management Blogs by SAP
Stay up-to-date on the latest developments and product news about intelligent customer experience and CRM technologies through blog posts from SAP experts.
cancel
Showing results for 
Search instead for 
Did you mean: 
joris_quenee
Product and Topic Expert
Product and Topic Expert

Introduction

SAP Commerce Cloud Product team is using internally Cypress tool to run automated testing. This helps to qualify a new release and ensure that no regression will be embedded with.

BackOffice user interface is based on ZK Framework and it can be sometime hard to automate the testing.

BackOffice automated testing can be interesting where you're using SAP Commerce Cloud as PIM solution and when you applied significant customization.

This article shows you how to do proceed and where're the potential difficulties.

Prerequisites

First at all, test can be automated when you're mastering data set. You should NOT run automated testing on volatile data as Production copy. Otherwise, you could face some difficulty to maintain automated tests scripts. Test assertion is always based on expected data output. SAP Commerce Cloud comes with Sample Data notion that should help to setup immuable data for running those tests.

Secondly, you need to get static HTML code/id tag generated by the server. This code/id is using by Cypress to identify the right element where action/verification should be executed. Unfortunately, ZK Framework is generating dynamic code/id tag at each page rendering. It is why, you need to activate the following flag to get static attribute ytestid into HTML code. 

 

 

backoffice.cockpit.ytestid.enabled=true

 

 

Then, you should have this kind of output

 

 

<span id="eDpL1e1" class="yw-explorerTree-filterTextbox ..
ytestid="filterTextbox" role="combobox" 
aria-expanded="false" aria-owns="eDpL1e1-pp" 
aria-haspopup="dialog">

 

 

Cypress

This automation tool is based on JavaScript. And it needs NodeJS installed to be executed. Installation is quite straightforward.

 

npm install cypress --save-dev
npm install -D cypress-iframe
npm i -D cypress-wait-until

 

To run user interface where implementation and debugging can be done

 

npx cypress open

 

To run tests in command line

 

npx cypress run --spec "cypress/tests/*.cy.js"

 

Test result can be see in many different format as

  • Video
  • Screenshot
  • XML report

BackOffice CookBooks

As evoked previously, you could face some difficulties because of ZK Framework and SAP Commerce specificities. This CookBook list should help to bypass over them.

Waiting Data Loading Indicator

 

cy.wait(Cypress.env('backofficeWaitBusyTime'))
    cy.waitUntil(
        () => {
            return Cypress.$('.z-loading').length == 0 && Cypress.$('.z-loading-indicator').length == 0
        },
        {
            errorMsg: 'Processing timeout.',
            timeout: Cypress.env('backofficeAsyncTaskTimeout'),
            interval: 500,
            verbose: true,
        }
    )

 

Drag and Drop

 

function dragAndDrop() {
   // `cy.trigger()` failed, but drag is working
   cy.get('tr[data-drag-key=true]').drag('tr[data-drop-target=true]', { force: true });
   cy.get('tr[data-drop-target=true]').click();
   cy.waitDataLoadingIndicator();
}

 

Simple search

 

cy.get('[ytestid="yw-textsearch-searchbox"] > input')
  .filter(':visible')
  .type(searchTerm)
cy.get('[ytestid="yw-textsearch-searchbutton"] .yw-textsearch-toolbar')
  .filter(':visible')
  .click()
cy.waitDataLoadingIndicator()

 

Select line after a simple search

 

cy.get('[ytestid="browserContainer mainListBox-list-view"] .z-listbox-body tr .z-label')
    .filter(':visible')
    .contains(code)
    .click()

 

 Browser left menu System > Type

 

cy.get('[ytestid="hmc_treenode_system"]').click();
cy.waitDataLoadingIndicator();
cy.get('[ytestid="hmc_typenode_type"]').click();

 

Conclusion

Automated testing is considered as DevOps best practice. Implementing all of them may seem intimidating, but you can ease into it by focusing on one scenario at first. And gradually expand your test coverage at each release.

If you encounter difficulties or lack of expertise, do not hesitate to seek help from SAP Expert Services