Advancing in DevOps with Cypress and Percy

Advancing in DevOps with Cypress and Percy

In general, emerging development technologies in the software industry require more attention from those who contribute to the creation of products. How can we deliver qualitative products that meet customer needs? By staying on our toes, constantly seeking new solutions that can be applied to projects.

As the web evolves, testing needs to evolve along with it. In the QA discipline, there’s been a persistent growth in the need to automate manual testing. Integrating a tool that could accelerate such automation in the DevOps process is necessary to fuel a fast, qualitative and reliable delivery. At Expert Network, we recognized that the best-fit tool for us would need to be developer-friendly, powerful, and as open-source as possible. Its scalability for all browsers and resolutions was also a criterion we needed to consider.

The solution we chose was Cypress, a new automation tool that met all these qualities and has already been implemented in several projects since.

The benefits of Cypress

The need to deliver correctly, on time, and as easily as possible led to the question: “Which automation tool is best for us?” To find our answer, we compared the particularities of Selenium and Cypress. Selenium is a famous and widely used automation tool, whilst Cypress is a new tool with a JavaScript based testing framework built for the modern web. After comparing the tools and balancing their differences, we found that the benefits of Cypress outweighed Selenium.

What are the benefits of Cypress?

  • The speed of test writing was a decisive criterion in this “dispute”. The development of tests in Cypress is much faster due to its programming language (namely JavaScript), but also much easier since it requires minimal knowledge of JavaScript.
  • Easier and quicker debugging in case of failure. The location and cause of errors are clearly presented, and Cypress would even offer a solution at times. This reduces and eliminates the amount of time spent looking for errors and solutions, which in turn meant that maintenance became faster.
  • The real-time reload. After each code change, Cypress gives itself a real-time reload, running the new freshly modified automation test. This helps to streamline the test development process so you can quickly view the results of new changes.
  • Cypress supports many browsers, which makes testing on different types of environments more accurate.
  • Consistent and well-structured testing results make it easy to create reports based on them. Furthermore, Cypress’s screenshot and video feature help to accurately diagnose and cover a problem encountered in the application.
  • Cypress has great integration with Percy, a visual test tool.

Alongside Cypress, Percy is the newest way to design, develop and deliver software with confidence. Percy is a testing tool that provides a complete visual overview: rendering, comparing and reviewing visual changes to catch bugs. With Percy, we could get visual coverage across our entire UI. We chose Percy because it has a scalable infrastructure optimized to be fast. It’s secure, reliable, and allows our team to work collaboratively. It adapts easily to browsers or changes in resolution and finds even the smallest changes of components in the application.

Bumps along the road to Cypress

The main challenge we encountered in our switch from Selenium to Cypress was the transition to a new programming language. Although Cypress’s JavaScript language is easy to learn, there are considerable differences compared to Selenium’s C# language. This difference in language had the potential to create conflicts of knowledge when developing the automation suite.

Another challenge was the complex task of implementing object-oriented programming (OOP) for a suite that would be organized and easy to understand. We needed to create a space that was very well-structured, which is more difficult than it sounds in a sentence. It also needed to facilitate the maintenance and reuse of certain tests, functions and commands.

The last bump in our road to Cypress was creating the right structure for test results, as well as moving or rewriting existing tests in Cypress. The test results, in the form of screenshots and videos, had to be easy to find so they could be accessed by everyone. Our saving solution was the formation of a Page Object type of structure for an orderly and well-systemized development.

What kind of results did Cypress provide?

By implementing Cypress, we experienced the possibility to improve metrics. It takes less time to write and run tests due to the Cypress interface, the complexity of regression decreased considerably, and releases are no longer as painful. The automation process also starts from the early stages of user stories, helping us to successfully catch bugs from the first stages of development.

Other advantageous results include how the differences in application between browsers are easy to identify and the search for errors in debugging is done by Cypress. The consistency of Cypress’s testing results, as well as the photo-video evidence preservation of a bug, also makes the creation of an automation running report extensive and accurate.

It was observed that many of our colleagues were very open to the transition from Selenium to Cypress. They were quick to notice the advantages that came with this tool and keen to learn more about it.

Additionally, Cypress (along with Percy) provides insight into every product change, which was exactly what we needed. Now we see constant progress at project level and there’s nothing we enjoy more.

Never stop improving, this is how we DevOps

It’s undeniable that the software industry goes through continuous upgrades. A more efficient new tool or design pattern could appear at any time. As such, we put a lot of focus on remaining up-to-date and willing to adapt to new requirements or opportunities in the market.

At the moment, our plans are to improve the structure of the automation project. This will optimize the development and running of test suites from a spatial and temporal point of view. Additionally, the total elimination of hardcodes or workarounds from the project is in a continuous process of development. This particular improvement is a priority for the creation of a reliable, usable and efficient project.

Another target we’re aiming to reach (as soon as possible) is the full integration of Percy in the project to automate the validation of its design. Finally, we plan to adapt our developers to Cypress-specific coding best practices. Accomplishing this would aid both the project and the QA Engineer in charge of creating the tests.

We’re constantly seeking new solutions and planning for future implementations or possible improvements. As the need to automate manual testing continues to grow in the QA discipline, we’ve chosen Cypress and Percy as our solutions. They’re the best-fit automation tool for us and we already benefit from increased speed of test writing and running, easier debugging, consistent and well-structured testing results, and more. We have plans in store for future developments and aim to continuously adopt innovative technologies that benefit us and our clients. This way, we can remain competitive in this rapidly evolving industry.

Share this article on

Join us

Reach your full potential and value. Visit our Careers page.