Search
  • Dhiren Patel

Cypress + Applitools match made in heaven

Updated: Feb 7

Experimented with much-hyped + developer-loved functional testing framework Cypress clubbed with Applitools (UI testing tool).


This started with the requirements to do a functional test ReactJs based application with UI testing.


Cypress + Applitools + React

Requirements

  • It’s React-based SPA

  • Clients want UI testing with mobile device compatibility checking

  • With subsequent release application should not make different functional behavior as well UI should not vary on various devices

  • Testing should cover API response validation in future


Possible solutions

  • The first one comes to mind is selenium. I used that earlier and it was painful due to different languages (different from the application’s language) and doesn’t give good performance with JS-based SPA. The developer needs to take lot of care in a long run.

  • Protractor/Jest + puppeteer: I tried protractor for CodeZinger.com, it was really hard to test when you integrate with CI (continuous integration). Many times tests goes haywire due js page loading or delay in API response. Hard to code every possible scenario. And saw a similar approach in Puppeteer.

  • Cypress: Looks like a magic wand. (WAIT !!! Isn’t that the same feeling I had every time when I start on tech-stack?). This time I am being cautious. But I choose this one with Applitools for UI testing. I will tell you the reasons.


Why Cypress

  • Easy to us (true for any testing framework, right?)

  • Tests can be written in JavaScript (something which I like)

  • Really fast (tried on Ubuntu 16 with 4 GB RAM)

  • Out of box support for API response waiting (Loved this)

  • Supported for API testing too

  • Well integrated with Applitools + Percy

  • Well supported in CI (Continuous Integration)

  • Supports Stubs (which is really amazing)


So what are the Issues (not much)

  • API response waiting does not support Fetch (there is workaround but still it’s an issue)

  • Only support Chrome which is really important for me and that’s why I used Applitools

  • Yet to test: What if I run a large JavaScript-based SPA with CI? Is Cypress able to give consistently the same result? All experiments with the earlier frameworks failed at this junction. (I will update the results of this too)


Applitools + Cypress (a match made in heaven)

  • Cypress focused on functional testing only while applitools does the UI testing

  • Solves the cross-browser + cross-device testing issue

  • Visual AI of applitools helps to detect misaligned components in various views

  • Run-on their server simultaneously for various devices


I tried to create architecture for a developer to bootstrap quickly with various feature like

  • Environment variable configuration (in cypress.json as well package.json)

  • Integration of cross-env in package.json

  • Use of common function via common_spec.js (don’t use Cypress command for common UI operation)

  • Wait for API response via “route” and “wait” implementation.

https://github.com/bytesofdhiren/cypress-todo


If you want to know how the actual implementation goes, wait for 15 days.


Also, I am yet to integrate Applitools in this project.

12 views

©Apache 2