Why We Automated Our Frontend Testing at Instabug

As our application grew bigger and more complex, we had to think about how we can make our delivery process more robust. We already covered the functionality by adding unit tests in development, but we also wanted to test the application on a high level while adhering to our core principle of delivering quickly and efficiently.

Since it ticked all the boxes, it was clear that automating our front-end testing was the answer. Automation will make our process more efficient by testing the visual aspect, and the interaction between the user and the application. It will enable us to run and test our code in a web browser as if a real customer is using it and test simple scenarios as well as more complex ones. And finally, it helps us deliver fast because when we make any changes, we don’t need to manually test everything to make sure we didn’t break anything.

‍

Choosing a frontend test automation tool

Choosing a new technology is always a challenge. You need to consider how this technology actually does the job, how efficient it is, its learning curve, and its community. After considering many options, we decided that Cypress was the best fit for us. It is easy to learn, configurable, and continuously updated with new releases. It also has a very active community that comes up with creative solutions. And finally, it provides you with an electron app that acts as a test runner and runs your app in the browser, giving you time travel capabilities for each spec.

‍

Benefiting from frontend test automation

Automation played a crucial role in helping us migrate and refactor our codebase safely while saving us the hassle of having our quality assurance team test our refactor and migration manually. We just run the automation suite to make sure that everything is working well and then we can safely merge and release those major changes with the confidence that our code is working as expected. It has become a crucial part of our release process too, preventing bugs from going into production and helping us make sure new features do not break old ones without sacrificing speed.  And it has saved our team a lot of time and effort since they don't have to test everything manually, allowing them to focus on other tasks that can have a bigger impact.

‍

Moving to a web app

When we introduced automation to our development process, we had two separate repos for our main app and automation. We decided to integrate both of them into one repo to have one PR containing both the feature implementations and their automation. This simplifies the release process and makes it easier to manage. Naturally, this integration did come with some challenges. We wanted to add our automation and its history in our app repo as a sub-directory, and after some investigation, we achieved that using the subtree merge strategy. We found this solution to be easy and flexible since we only need the history for the master branch.

‍

Adding test automation to our CI/CD pipeline

After we saw the huge impact that front-end test automation had on our release speed and quality, we are currently pushing ourselves to add test automation to our CI/CD pipeline. This will help us automatically run our test automation suite as part of the build process to make sure everything is ready to be shipped to production.

‍

"The journey was very insightful and helpful in many ways. Cypress was a great addition to our project and helped us feel confident about migrating to VueJS, and discovering bugs early on. It's also very easy to learn, use, and implement. A simple tool yet very powerful" —Menna Ali and Radwa Saeed

‍

Wrapping it up

Frontend test automation has a lot to offer developers, especially the ones working on large and complex applications that require a lot of time and effort on manual testing. This isn't suggesting that you get rid of manual testing, but as your application grows it becomes imperative to use test automation to take care of the easier scenarios and free up your testers' time for more important tasks.

‍

Instabug is growing! Check out our open positions.