End-to-End Testing with Cypress

It is important for us to take into account the satisfaction of our users. That's why we decided to take you behind the scenes of the Cypress tool, allowing us to test our platform to improve the user experience as much as possible.

‍

I. Why Cypress ?

‍

In addition to unit and component testing made with Jest Framework, we were looking for an E2E (end-to-end) tool to simulate and test the full user journey on the Eden AI Platform.

‍

We had heard a lot about a tool called Selenium but it seemed quite complicated to integrate for non-experimented automation engineers.

‍

Our research led us to a more recent tool: Cypress.

‍

When compared to other automation frameworks, Cypress is more universal because it is written in JavaScript and based on Mocha and Chai. It also uses Node.js when running in browsers. Javascript is the main language for our front-end developers team so it seemed like an obvious choice.

‍

Cypress consists of a free, open source, locally installed application and a Dashboard Service for test’s recording.

‍

Cypress also provides features that will make our tests more efficient :

‍

• As it automatically waits for DOM to be loaded, we don’t have to implement additional waits, nor implicit or explicit.
• We can also test how our API interacts with our front-end by executing http requests with Cypress.
• The framework also captures the test execution in real time. This allows testers or developers to hover a specific command in the command log to see exactly what happened at that particular step.
• We can also run cross-browser testing by executing tests with Cypress on Firefox and browsers within the Chrome family, such as Edge and Electron.
• Cypress can also provide screenshots of test failures, which makes finding defects and debugging apps quick and simple.

‍

II. How do we integrate Cypress to our CI-CD ?

‍

In addition to punctual testing with the Cypress interface, we wanted to add the E2E testing process to our CI/CD. 

‍

When a new feature is pushed to a certain branch of our repository, circle CI will launch headless Cypress tests by adapting Cypress environment with the current git branch. For example : when a feature is added on our staging environment, Cypress will test the user journey on the staging app. 

‍

We also needed to schedule automatic e2e tests each day.

The integration of Cypress to Circle CI was pretty easy. Cypress provides an orb to correctly install, cache and run Cypress with very little effort.

Circle CI running Cypress tests 

‍

In conclusion, we used a E2E testing tool called Cypress, allowing us to test our platform to give the best performance for our users. We also added it to our CI-CD, which was a relatively easy process. If you have any questions, you can email me: françois.humbert@edenai.co.

‍

‍