How to approach e2e tests with cypress.io using Babylon.js engine

Questions
1

Hello everyone, I am wondering if there’s a good way to test Babylon.js UI navigation and scene composition. like picking components on the scene etc. Using an e2e library like Cypress. This is because I have an application that relies on recording microinteractions on the canvas and I would love it if I can write e2e tests for these interactions.

2

Hello! That’s an interesting question! :smiley: I wasn’t familiar with Cypress, so I’m checking it out now and it seems a very neat library. I see that it has methods for interacting with DOM elements, so I think you could use the click method with specific coordinates click | Cypress Documentation to click on the Babylon UI elements. The asserting part is more complex, however, as the Cypress runner won’t be able to look into the contents of the canvas. But I think you could save a screenshot of the Babylon scene and use snapshot testing: Using Cypress | Cypress Documentation to compare the canvas to a “base state”.

@PolygonalSun was working on some controls testing (he’s on vacation now), I don’t think he was using Cypress but he might have some ideas too :slight_smile:

3

Hey @DANIEL_S,
We don’t really use anything like Cypress for our testing. TBH, I manually create the event objects that I need and just dispatch them to the canvas. For testing UI elements, you could do something like what @carolhmj is suggesting with snapshot testing. We do something like that with our CI where we have our UI elements do something (like change colors or modify a mesh) so that there’s a visual change. We then take a snapshot and compare that with a control.

For things other than UI, it’ll depend on what you’re trying to test. For example, with picking, you can use onPointerObservable to tell you if you are picking what you intend to pick (at least with meshes):

scene.onPointerObservable.add((eventData) => {
    const pickInfo = eventData.pickInfo;

    if (pickInfo.pickedMesh === /* some mesh */) {
        // Do something
    }
}, BABYLON.PointerEventTypes.POINTERPICK);

Sadly, I’m not too familiar with Cypress but I could see using something like for more precise and human-like interaction testing.

2 Likes