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
