Integrate Cypress in ui.tests for aem cloud

[NageshRaja]

Hi Guys,

I am trying to integrate Cypress in AEM repo.

My local integration is working fine. But when deploying to cloud the build error comes up - 

19:25:04,735 [main] [INFO] --- frontend:1.12.0:npm (run-cypress-tests) @ com.adobe.cq.cloud.testing.ui.cypress.tests ---
19:25:04,736 [main] [INFO] Running 'npm run test' in /build_root/build/benz-pxxxyyy-uk121212/ui.tests
19:25:05,024 [Exec Stream Pumper] [INFO]
19:25:05,024 [Exec Stream Pumper] [INFO] > ui.tests@1.0.0 test
19:25:05,024 [Exec Stream Pumper] [INFO] > npm run cypress:run
19:25:05,024 [Exec Stream Pumper] [INFO]
19:25:05,629 [Exec Stream Pumper] [INFO]
19:25:05,629 [Exec Stream Pumper] [INFO] > ui.tests@1.0.0 cypress:run
19:25:05,629 [Exec Stream Pumper] [INFO] > CYPRESS_VERIFY_DISABLE=true cypress run --browser chrome --headless --config video=false,reporter=spec -- --no-sandbox --disable-gpu
19:25:05,629 [Exec Stream Pumper] [INFO]

19:25:05,946 [Exec Stream Pumper] [INFO] [FAILED] Error: spawn Xvfb ENOENT
19:25:05,946 [Exec Stream Pumper] [INFO] [FAILED] Platform: linux-x64 (Ubuntu - 22.04)
19:25:05,946 [Exec Stream Pumper] [INFO] [FAILED] Cypress Version: 14.5.4
19:25:05,947 [Exec Stream Pumper] [INFO] Your system is missing the dependency: Xvfb

19:25:05,918 [Exec Stream Pumper] [INFO] It looks like this is your first time using Cypress: 14.5.4

19:25:05,947 [Exec Stream Pumper] [INFO] Install Xvfb and run Cypress again.

How can I install Xvfb on cloud containers? @daniel-strmecki 

Thanks,

Nagesh

[daniel-strmecki]

Are you running your Cypress tests during the Maven build process? In AEMaaCS, the right place to run Cypress is the Custom UI Testing step, which executes your tests inside a Docker image that already has the browsers/display stack.

Good luck,

Daniel

[NageshRaja]

Hi @daniel-strmecki, yes I am running the Cypress tests during the maven build process.

I am not sure if that's the right place but how do I run Cypress in the Custom UI Testing step?

[Rohan_Garg · Accepted solution]

Try the following link - https://github.com/adobe/aem-test-samples/tree/aem-cloud/ui-cypress
There's a section towards the end which points to replacing the files in the ui.tests.

Integrate into your Cloud Manager repository

Follow these steps to use the Cypress tests:

1. Remove all content in the ui.tests folder from your Cloud Manager repository.

2. Copy all files located in this folder into the ui.tests folder.

3. (Optionally) adjust the file pom.xml and set parent as well as artifact information to the desired naming.

4. Commit and push the changes.

During the next pipeline execution, Cloud Manager will use the Cypress tests.

Hope this helps!

Rohan Garg

[NageshRaja]

Hi @Rohan_Garg, thanks for this I will try this but is the maven build process not the best place to run Cypress tests?

[giuseppebaglio]

Cypress test execution must be integrated into the pipeline lifecycle. This is evident in the profiles section of the pom.xml file in the AEM Test Samples repository, where it is triggered by a specific Maven profile. However, there are limitations you should be aware of while developing these tests, as outlined here: