Introduction to Cypress
Quality assurance plays an important role in ensuring quality standards are met in production applications to help reduce unexpected UX defects for end users. Therefore it is important to ensure that QA testing becomes an integral part of every application release process.
Ensuring that every build or release process of an application has some level of quality assurance guarantees can become a time and resource-intensive process when it is required to be done manually. Ideally, you will want to automate your testing process as much as possible, but it may become difficult or time-consuming to build your automation testing tooling.
Researching for the perfect test automation tool or library may become a very tedious task, especially with all the available open-source options in the market. You will need to make a trade-off and pick whichever works best for your particular team or use case.
In this article, I would like to introduce you to Cypress, the open-source next-generation automation testing tool built for modern web applications written in JavaScript and built on Node.js. Cypress may be all you need for your Automation testing needs.
What is Cypress?
Cypress is a QA and developer-friendly tool that uses a unique DOM manipulation technique and operates directly in the browser.
Cypress solves the key pain points developers and QA engineers face when testing modern applications. E.g., synchronization issues, the inconsistency of tests due to elements not visible or available, etc.
Cypress is best suited for:
- Unit tests
- Integration tests
- End to End Tests (E2E)
Before Cypress, we had to think about what framework, assertion library, and debugger we wanted to use. However, there is no need to worry about frameworks, libraries, or debuggers after Cypress. By default, Cypress uses Mocha as a framework and Chai as a library for assertions and Cypress has one of the most effective debuggers. It takes snapshots when your tests run. Hovering over the commands in the Command Log gives a clear view of what happened at each stage.
Advantages of Cypress
Working with any tool requires that you understand its merits and demerits before you get started, otherwise you will be stuck. Here are a few benefits of Cypress:
- There are no additional dependencies for running test cases on the browser.
- There are no additional dependencies for running test cases on the browser.
- In contrast to other testing tools, there is no need to add explicit or implicit wait commands to test scripts. Cypress waits automatically for commands and assertions.
- Earlier Cypress supported only Chrome testing. However, with recent updates, Cypress now provides support for electron, Firefox, Brave, and Edge browsers.
The mocking of server requests and responses can be used to test edge scenarios.
- API testing capabilities.
- According to the latest update now we can test Cross-Domain test scenarios.
- It captures Videos or Screenshots at the time of test execution.
- To verify and control the behavior of server responses, functions, or timers, developers or QA experts can use Spies, Stubs, and Clocks.
- Cypress Dashboard shows you every detail of your test execution, including assertions, network requests, page loads, stubs, and spies.
- There is no necessity for JSON Wire (or some other protocol) in Cypress. Since Cypress operates within the application, the test code can access all the objects (not limited to DOM elements) that the application code can.
- It supports parallel testing (or parallelization) by default. It also lets you group tests by Browsers, test labels, and more by grouping test runs. Here is a short depiction of parallel testing with Cypress.
Cypress installation
Cypress is very easy to install. The only thing you need to do is run a few commands in your text editor (VS Code) terminal, and you’re ready to create your automation scripts. It’s just like installing a game and starting it. Follow the given steps for a smooth installation:
Step 1: Install Node.js and Node Package Manager (NPM)
When you install node.js, make sure you are going to install the Latest Stable version (LTS) for your machine. Node is available for many operating systems, so download as per your system requirements
If you want to check whether the node.js and npm have been successfully installed or not. You can use the below command in your command prompt(CMD):
- node -v
- npm -v
Step 2: Create a Project folder
Cypress is installed locally in your project folder only i.e.; we need to create a folder before installing the cypress. We can create our folder by using CTRL + SHIFT + N and rename it with your project name or by using terminal commands which are given below:
- mkdir foldername — make directory/folder
- cd foldername — change directory/folder
Step 3: Create a package.json file
The package.json file is the heart of any project. It records important metadata about a project and also defines functional attributes of a project that npm uses to install dependencies, run scripts, and identify the entry point to our package.
- npm init -y
After running this command, the One package.json file will be created with some default values.
Step 4: Install Cypress
- npm install cypress — save-dev
After running the above command you have to wait for one or so minutes depending on your internet speed.
Now after completing all the installation processes you will get a successful message in your terminal and one folder named node_module will be added to your folder structure along with the package-lock.json file.
Step 5: Open Cypress test runner
To run the cypress test cases we need to open its test runner, so the command to run cypress are:
- .\node_modules.bin\cypress open or
- npx cypress open
After running the above command, you will find one new folder named cypress in your folder structure, and inside this folder, you will see the architectural design of cypress. The white window in the center of shot-8 is the test runner window through this you can execute your test cases very easily. Cypress provides you with some pre-defined test suits inside the integration folder.
Disadvantages of Cypress
- Cypress can only be used in browsers.
- There is no support for multiple tabs or windows.
- Cypress currently supports JavaScript and TypeScript for creating test cases.
- There is no support for Safari.
- It is not possible to run multiple browser sessions at the same time.
Conclusion
Considering Cypress’s relatively easy learning curve, you can start creating meaningful tests quickly. Another great thing about Cypress is that they are constantly resolving its shortcomings.
In general, I found Cypress to be a very handy and easy-to-use tool for doing end-to-end testing. I can cover most of my needs with just a few built-in commands and find additional help with third-party packages when I need them. Despite that, Cypress has its shortcomings. In some cases, parts of the application do not load quickly enough and the tests fail due to an insufficient default wait time. Cypress then times out while it waits for the element to show up. Despite these faults, I would still recommend Cypress to anyone who needs end-to-end testing for their app.
