JavaScript E2E functional testing using Cypress- complete guide to the dev/test experience
Modern JavaScript frameworks present an easier and more organized way to create various web applications. However, they add complexity that at times break things in a subtle yet impactful way. Testing bugs or issues are captured either during Manual or Automated tests which are most commonly developed in Selenium or Phantom.js frameworks. Because of this there has always been a disconnect between the development and testing teams, as developers were not comfortable writing code in the test framework. So to overcome these shortcomings found in traditional testing frameworks Cypress.io was designed to address the key pain points developers and QA engineers face when testing modern applications. Cypress is one of the most widely used tools for Web integration and End-to-End UI test automation in the market.
Key features:
Automatic waiting — There is no need to define implicit and explicit waits as in traditional test frameworks. Cypress automatically waits for the DOM to load, elements to become visible, the animation to be completed, the XHR calls to be finished.
Real-Time Reloads — Cypress is intelligent enough to know that after saving your test *.js file, you are going to run it again, so it automatically triggers the run next to your browser as soon as you press to save your file. Hence, there is no need to manually trigger the run.
Debuggability — Cypress gives you the ability to directly debug your app under test from chrome Dev-tools, it gives a readable and a clear error message and also provides some suggestions on how the errors can be approached or change the implementation. Cypress Also provides additional features such as, capture screenshots after every test fails or any instance of the test which enables us to debug faster.
Pros of Cypress:
- JavaScript Testing framework
- Easy and Reliable testing for any data that runs in the browser
- Free and open source
- Easy control of response bodies, status and headers
- Fast, <20ms response time
- Ability to choose whether to stub responses or to allow them to hit the server
- Active community in GitHub, Gitter & StackOverflow
- Rich and easy to read documentation
- Auto reload & acts as a real user, bridging between app and user experience
Cons of Cypress:
- Cypress is JavaScript based, does not support any other language
- Mobile native device functionality cannot be tested as Cypress mocks the mobile environment within the browser
- Cypress does not support browsers like IE, Safari or Opera
Benefits of Cypress:
- Modern tool
- Fast setup
- Quick and efficient to implement and debug
- Fast to execute
- Combines functional testing with API checking
Easy few steps to start writing tests: Setup tests, Write Tests, Run Test, Debug Tests
Setup Test: Installing Cypress
Write Test: Write First Test
Run Test: Test the App
After these steps are finished, now you are ready to start writing real tests which are specific to your application and get your hands on code. The best way to learn and understand is described in the write a real test section of the docs. Below is a sample screenshot of a real test run.
For API reference cypress.io has provided an incredible, simple and easy to understand documentation: cypress.io docs
Few tips to improve and write e2e Tests: Use Commands, Wait for Network request to finish, Use data-attributes…
Use Commands:
Wait for Network request to finish:
Use data-attributes:
We can run tests in 2 modes: “Cypress headless” & “Test Runner / App Mode” with below commands. When the test runs in headless mode, default tests are executed on electron browser with specific command options listed here, where as in app mode a user friendly UI is available to select the browsers to run the test and visualize the test execution.
When the test runs in headless mode, default tests run on an electron browser with specific command options listed here
Cypress dashboard: Cypress Dashboard is a service that gives you access to recorded tests — typically when running Cypress tests from your CI provider. A setup to record test, Run in CI, Optimize Test, Maximize efficiency with parallelization. The Dashboard provides you insight into what happened when your tests ran. Easy to organize project, see test results, manage runs, manage users, manage organization, integrate with git-hub / slack…Reference.
Cross Browser Testing: Cypress has the capability to run tests across multiple browsers. Currently, Cypress has support for Chrome-family browsers (including Electron and Chromium-based Microsoft Edge), and Firefox. Tests can be triggered / started by selecting a supported browser from the test runner. The desired browser can also be specified via the --browser flag when using run command to launch Cypress. For example, to run Cypress tests. Reference for Cross Browser Testing
I am hoping the information provided above is helpful to understand the best practices to work with Cypress. The Cypress testing framework has helped Dev & Test teams to come closer and integrate with each other without any complexities, so everyone is on the same page when it comes to the automation framework.
As an additional perk to Cypress, there are many visual test monitors in the market that can be integrated with Cypress to enhance tool functionality. I would suggest looking into AI driven tools to extend E2E testing furthermore. Most of the tools provide a handful of APIs which helps in capturing any visual bugs for all static and dynamic web data.I am hoping the information provided above is helpful to understand the best practices to work with Cypress. The Cypress testing framework has helped Dev & Test teams to come closer and integrate with each other without any complexities, so everyone is on the same page when it comes to the automation framework.
As an additional perk to Cypress, there are many visual test monitors in the market that can be integrated with Cypress to enhance tool functionality. I would suggest looking into AI driven tools to extend E2E testing furthermore. Most of the tools provide a handful of APIs which helps in capturing any visual bugs for all static and dynamic web data.
Above content should help anyone to kick start writing test in Cypress.
ENJOY!!!!!
