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

**URL:** <https://forum.babylonjs.com/t/how-to-approach-e2e-tests-with-cypress-io-using-babylon-js-engine/32169>\
**Category:** Questions\
**Tags:** tests\
**Created:** [July 14, 2022, 9:39am UTC](https://forum.babylonjs.com/t/how-to-approach-e2e-tests-with-cypress-io-using-babylon-js-engine/32169 "2022-07-14T09:39:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![DANIEL\_S](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/daniel_s/32/9709_2.png) [@DANIEL\_S](https://forum.babylonjs.com/u/DANIEL_S)\
**Post date:** [July 14, 2022, 9:39am UTC](https://forum.babylonjs.com/t/how-to-approach-e2e-tests-with-cypress-io-using-babylon-js-engine/32169/1 "2022-07-14T09:39:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [July 14, 2022, 11:56am UTC](https://forum.babylonjs.com/t/how-to-approach-e2e-tests-with-cypress-io-using-babylon-js-engine/32169/2 "2022-07-14T11:56:45Z")

</div>

Hello! That’s an interesting question! 😃 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](https://docs.cypress.io/api/commands/click#Syntax) 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](https://docs.cypress.io/faq/questions/using-cypress-faq#Can-I-use-Jest-snapshots) 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 🙂

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [July 18, 2022, 9:12pm UTC](https://forum.babylonjs.com/t/how-to-approach-e2e-tests-with-cypress-io-using-babylon-js-engine/32169/3 "2022-07-18T21:12:34Z")

</div>

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):

```auto
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.