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.
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
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.
Easy to us (true for any testing framework, right?)
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
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.
If you want to know how the actual implementation goes, wait for 15 days.
Also, I am yet to integrate Applitools in this project.