Cypress Modern Automation Testing Framework

Quality Assurance
Quality Automation
by Zymr

Share It

The role of Quality Assurance (QA) is more paramount than we think it is. Because, when it comes to software, quality is everything. And, to achieve that top-notch quality, the relevance of tools can’t be underestimated at all. Cypress is a revolutionary front-end testing tool developed for the modern web. Developers and QA engineers develop web apps through modern JavaScript frameworks. Cypress enables you to write various types of tests such as end-to-end tests, integration tests, and unit tests. Without further ado, let’s quickly check out some of the critical points related to Cypress,

  • There are no servers, drivers, or any other dependencies to install or configure. You can write your first passing test in 60 seconds.
  • Built on Node.js and it comes packaged as an npm module.
  • Delivers fast, consistent, and reliable test execution compared to other automation tools because of its architectural design.
  • Uses JavaScript for writing test cases but 90% of coding can be done using Cypress inbuilt cmds.
  • Can bundle with JQuery.
  • Runs as fast as your browser can render content.
  • Readable error messages help you to debug quickly.
  • Automatically waits for commands and assertions.
  • Takes a snapshot as your tests run. We can hover over each cmds in the command log to see exactly what happened at each step.
  • Videos of your entire tests execution when run from the Cypress dashboard.
Contact our team to know more about Cypress! Talk to us !

Architecture of Cypress:

Most testing tools (like Selenium) operate by running outside of the browser and executing remote commands across the network. However, the Cypress engine directly operates inside the browser. In other words, it is the browser that is executing the test code. It enables Cypress to listen and modify the browser behavior at run time by manipulating DOM and altering network requests and responses on the fly.

Features:

Here is a list of things Cypress can do that no other testing framework can,

  • Time Travel: Cypress takes snapshots as your tests run. Just hover over commands in the Command Log to see exactly what happened at each step.
  • Debuggability: Stop guessing why your tests are failing. You can debug directly from familiar tools like developer tools. 
  • Automatic Waiting: Cypress automatically waits for commands and assertions before moving on. No more async hell.
  • Spies, Stubs, and Clocks: Verify and control the behavior of functions, server responses, or timers. 
  • Network Traffic Control: Easily control, stub, and test edge cases without involving your server. You can stub network traffic however you like.
  • Screenshots and Videos: View screenshots taken automatically on failure, or videos of your entire test suite when run from the CLI.
  • Cross Browser Testing: Run tests within Firefox and Chrome-family browsers (including Edge and Electron) locally and optimally in a CI pipeline. 

Installation:

  • Supports Windows, Linux, and Mac OS.
    • Windows 7 and above
    • Linux Ubuntu 12.04 and above, Fedora 21, and Debian 8 (64-bit only)
    •  macOS 10.9 and above (64-bit only)
  • Cypress can install using cmd – npm install cypress (which have electron browser bundled).
    • Install node.js  (npm 6.14.4)
      • Node.js 10 or 12 and above
    • npm init – so that you have package.json and node_modules folder to install Cypress from npm
    • npm install Cypress –save-dev
  • Can also be installed with yarn.
    • cd /your/project/path
    • yarn add Cypress –dev

Basic Test Structure:

  • As JavaScript recommends using frameworks like Jasmine or mocha. Cypress pre-bundled with mocha.
    • For Ex – ‘’describe” & “it” comes from mocha
    • And “expect” comes from chai
  • Another feature borrowed from Mocha is hooks. Hooks are used to set conditions that you want to run before a set of tests or before each test.
  • With its default “BDD”-style interface, Mocha provide the hooks before(), after(), beforeEach(), and afterEach(). These should be used to set up preconditions and clean up after your tests.

Folder Structure:

After adding a new project, Cypress will automatically scaffold out a suggested folder structure. By default it will create,

How to write tests in Cypress:

  • Fixtures
    • Fixtures are external pieces of static data that can be used by your tests.
    • We should not hard code data in the test case. It should drive from an external source like CSV, HTML, or JSON.
    • They will be majorly used with the cy.fixture() command when you need to stub the network calls.
  • Integration
    • The integration folder provides a place that writes out test cases.
    • It also provides an “examples” directory, which contains the default test cases provided by Cypress and can be used to add new test cases also.
    • We can also create our folder under the integration directory and add out test cases under that.
  • Plugins
    • Plugins contain the plugins or listeners.
    • By default, Cypress will automatically include the plugins file “cypress/plugins/index.js” before every test it runs.
    • You can programmatically alter the resolved configuration and environment variables using plugins, Eg. If we have to inject customized options to browsers like accepting the certificate, or do any activity on test case pass or fail or to handle any other events like handling screenshots.
    • They enable you to extend or modify the existing behavior of Cypress.
  • Support
    • Support writes customized commands or reusable methods that are available for usage in all of your spec/test files.
    • This file runs before every single spec file. That’s why you don’t have to import this file in every single one of your spec files. 
    • The “support” file is a great place to put reusable behavior such as Custom Commands or global overrides that you want to be applied and available to all of your spec files.
  • Node_Modules
    • Node_Modules in the default project structure is the heart of the cypress project.
    • All the node packages will be installed in the node_modules directory and will be available in all the test files. So, in a nutshell, this is the folder where NPM installs all the project dependencies.
  • Cypress.json
    • Cypress.json is used to store different configurations. E.g., timeout, base URL, test files, or any other configuration that we want to override for tweaking the behavior of Cypress.
    • We can also manage the customized folder structure because it is part of by default Cypress configurations.

How to run tests in Cypress:

  • Cypress runs the tests in two ways,
    • Via test runner – head mode
    • Via command line – headless mode
    •  Can run specific tests by command argument as –spec
      • node_modules/cypress/bin/cypress run –browser chrome –headed –spec ./cypress/integration/examples/testapi.js
      • Cypress run –browser chrome –headed
  • Cypress runs tests in a unique interactive runner that allows you to see commands as they execute while also viewing the application under test.
  • Open cypress test runner
    • node_modules/.bin/cypress open
    • npx cypress runner

How to debug tests in Cypress:

  • Cypress comes with a host of debugging tools to help you understand a test. Here are some abilities :
    • Travel back in time to each command’s snapshot.
    • See special page events that happened.
    • Receive additional output about each command.
    • Step forward / backward between multiple command snapshots.
    •  Pause commands and step through them iteratively.
    • Visualize when hidden or multiple elements are found.
  • Cypress prints several pieces of information when an error occurs during a Cypress test.
    • Error name: This is the type of the error (e.g. AssertionError, CypressError)
    • Error message: This generally tells you what went wrong. It can vary in length. Some are short like in the example, while some are long, and may tell you exactly how to fix the error. Some also contain a Learn more link that will take you to relevant Cypress documentation.
    • Learn more: Some error messages contain a Learn more link that will take you to relevant Cypress documentation.
    • Code frame file: This is usually the top line of the stack trace and it shows the file, line number, and column number that is highlighted in the code frame below. Clicking on this link will open the file in your preferred file opener and highlight the line and column in editors that support it.
    • Code frame: This shows a snippet of code where the failure occurred with the relevant line and column highlighted.
    • View stack trace: Clicking this toggles the visibility of the stack trace. Stack traces vary in length. Clicking on a blue file path will open the file in your preferred file opener.
    • Print to console button: Click this to print the full error to your Dev Tools console. This will usually allow you to click on lines in the stack trace and open files in your Dev Tools.

Cypress Test Runner:

Cypress runs tests in a unique interactive runner that allows you to see commands as they execute while also viewing the application under test.

Cypress Cloud Dashboard:

  • Test and debug faster with the Cypress Dashboard.
  • See the exact point of failure of tests running in CI.
  • Supercharge test times by running tests in parallel.
  • Get instant test failure alerts via Slack or GitHub.
  • But if you want to use the dashboard for multiple projects and users then you have to pay the price.

Cypress Plugins And Integrations:

  • Plugins
  • Plugins provide a way to support and extend the behavior of Cypress.
  • Some of the popular plugins that cypress supported:
    • Totp : Valid OTP token generation for Cypress.
    •  Keycloak : authenticate users with Keycloak Identity Provider.
    • Social login : Currently supports google SSO login.
    •  Code-coverage : to save code coverage collected during Cypress tests.
    • Docker : Docker images providing all the dependencies to run Cypress in CI including browsers.
    • Percy : Visual regression testing for Cypress tests with Percy.
    • Explore currently available plugins: https://docs.cypress.io/plugins/index.html
  • Integrations
    • Currently cypress have Github and Slack integration.
    • But it lacks critical supports like Jira integration which most of the modern frameworks have to ease the life of automation testers.

Advantages of Cypress:

  • Fast, reliable, consistent, and flake-free tests as its architecture doesn’t depend on Selenium or Webdriver.
  • Can capture snapshots at the time of test execution. This allows QAs or developers to hover over a specific command in the Command Log to see exactly what happened at that particular step.
  • Automatically waits for the DOM to load, elements  to become visible, the animation to be completed, the XHR and AJAX calls to be finished, and much more.

Disadvantages of Cypress:

  • You should have knowledge of JavaScript, Mocha, and Chai syntax and framework.
  • Difficult to debug as it gives a very complex error trace.
  • Cypress is lacking to handle the iFrame element.
  • Doesn’t support to open multiple tabs or multiple browser at the same time.
  • Doesn’t provide support for browsers like Safari and IE at the moment.

How Cypress is different from other automation tools:

  • Considers all the circumstances that could cause querying a DOM element to fail:
    • The DOM has not been loaded yet.
    • Your framework hasn’t finished bootstrapping.
    • An XHR request hasn’t been responded.
    • An animation hasn’t been completed.
  • Built-in retrying and customizable timeouts, Cypress sidesteps all of these flaky issues. This makes Cypress robust and immune to dozens of common problems that occur in other testing tools.
  • For example, when writing a .click() command, Cypress ensures that the element is able to be interacted with (like a real user would). It will automatically wait until the element reaches an “actionable” state by:
    • Not being hidden
    • Not being covered
    • Not being disabled
    • Not animating

Leveraging QA tools and technologies doesn’t have to be hard. All you need is a trusted and reliable QA automation and testing services partner whom you can bank on. Zymr can help you capitalize on the power of a plethora of testing tools like Cypress to take your QA game to the next level.

Zymr’s QA Automation Services

Experience our technologically advanced, commercially viable, and economically feasible QA automation testing services. We are a QA automation company that can take your digital services to the market faster, enhance your market coverage, and respond effectively to market feedback like never before with us. Let’s talk testing!

Contact us to know more about us! Talk to us !

Article Contributed by Shakuntala Choudhary, Sr. Software Engineer – QE

Leave a comment

Your email address will not be published.

Let's continue the conversation!

    Please prove you are human by selecting the Plane.