Cypress for Test Automation

Cypress is an open-source and free automation tool, MIT-licensed and written in JavaScript. Cypress is a next-generation front-end testing tool built for the modern web. 

This allows you to write easier,  faster, and more reliable tests.

Our users are typically developers or Quality Assurance engineers building web applications using modern JavaScript frameworks. Cypress allows you to write all types of tests: 

• End-to-end tests 
• Component tests 
• Integration tests 
• Unit tests 

Cypress can test anything that runs in a browser.

Cypress Features

Cypress is a fully-featured test automation framework with all the necessary tools and functionalities. It offers a unique set of features that cannot be found in any other testing framework. Here are some of the things that make Cypress stand out:

• Screenshots on Each Step: Cypress gives you an amazing feature which is that Cypress takes snapshots as your tests run at each and every step with clear steps written about what is getting on and which DOM element it is. You can hover over commands in the Command Log to see exactly what happened at each step in the Cypress test runner.
• Easy Debugging: Cypress enables easy debugging of tests directly from familiar tools, like Developer Tools. Cypress generates easy-to-read errors and stack traces, making debugging lightning-fast.
• Automatic Waiting: Cypress adds by default 4.0 seconds of a wait while performing any activity. So don’t add wait times or sleep phases to your tests. Cypress automatically waits for commands and assertions before continuing. No more async hell.
• Network Traffic Control: With Cypress, you can easily control, cancel, and test edge cases without involving your server. You have the flexibility to stub network traffic in any way that you prefer, which makes it easy to test different scenarios and edge cases without having to rely on the server.
• Consistent Results: Our architecture does not use Selenium or WebDriver. Say hello to fast, consistent, and reliable tests that are flake-free.
• Screenshots and Videos: Cypress enables automatic screenshot capture on test failure and recording of test suite videos for comprehensive outcomes.
• Cross-Browser Testing: Cypress allows you to run tests within Firefox and Chrome-family browsers, including Edge and Electron, both locally and in a Continuous Integration (CI) pipeline. You can run your tests on these browsers with optimal performance, ensuring that your tests are comprehensive and reliable.
• Intelligent Coordination: After setting up the recording to the Cypress Cloud, you can efficiently perform parallel testing of your test suite, prioritize failed specs first with Spec Prioritization, and cancel test runs on failures using Auto Cancellation for quick feedback loops. These features enable you to streamline your testing process and optimize your testing efforts.
• Flake Detection: We can discover and diagnose unreliable tests with Cypress Cloud’s Flaky test management.
• Getting Started with Cypress: You can install Cypress using npm (Node Package Manager) by running the following command in your project directory.

You can create a new Cypress project by running the following command.

This will create a sample test and launch the Cypress Test Runner.

Best practices for writing Cypresstests:

Here are some best practices to follow when writing Cypress tests:

• Write independent tests: Each test should be independent and not rely on the outcome of any other test. This ensures that your tests are reliable and repeatable.
• Use descriptive test names: Use descriptive test names that explain what the test is doing and what it is testing.

• Use fixtures for test data: Use fixtures to load test data instead of hard-coding it into your tests. This makes it easier to modify your test data without changing your tests.
• Use beforeEach() and afterEach() hooks: Use the beforeEach() and afterEach() hooks to set up and tear down your tests. This ensures that each test starts with a clean slate.
• Use Cypress commands to interact with web elements: Cypress provides a set of built-in commands to interact with web elements, such as click(), type(), and select(). Use these commands instead of native browser APIs to ensure consistency across different browsers.

Common mistakes to avoid when writing Cypress tests:

Here are some common mistakes to avoid when writing Cypress tests:

• • Using non-deterministic selectors: Avoid using non-deterministic selectors, such as using the text of an element as a selector. This can lead to flaky tests, as the text of an element can change depending on the context.
  • Not waiting for elements to load: Cypress provides a set of commands to wait for elements to load, such as the cy.get() command. Use these commands to ensure that your tests wait for the elements to be available before interacting with them.
  • Using hard-coded test data: Avoid hard-coding test data in your tests. Instead, use fixtures to load test data, or generate test data dynamically.
  • Not cleaning up after your tests: Make sure to clean up any data created by your tests, such as removing test users or deleting test records.

Cypress Architecture: 

Cypress has a unique architecture that sets it apart from other testing frameworks.

At a high level, the Cypress architecture consists of two main components: the Test Runner and the Cypress Driver.

Test Runner:

The Test Runner is the graphical user interface (GUI) that developers use to write, manage, and run their tests. It provides an interactive way to write test scripts, view test results, and debug test failures. The Test Runner is built on top of Electron, a popular framework for building desktop applications using web technologies.

Cypress Driver:

The Cypress Driver is a Node.js process that runs in the background and communicates with the Test Runner. It is responsible for controlling the browser, running the tests, and reporting results back to the Test Runner. The Cypress Driver uses a lightweight browser automation library called “Electron Browser” to interact with the web application being tested. This is different from other testing frameworks that rely on heavy-weight browser automation libraries like Selenium.

Cypress has a unique architecture that allows it to run tests in the same run-loop as the application being tested. This means that developers can directly interact with the application’s DOM and JavaScript objects and stub and mock network requests. This makes it easy to write tests that are more comprehensive and cover more use cases.

Overall, the architecture of Cypress is designed to make end-to-end testing easier and more powerful for developers.

Why Choose Cypress:

Let’s suppose a startup developing an e-commerce website may prefer Cypress over Selenium for test automation. Cypress allows them to quickly create and execute tests covering critical functionality like browsing products, adding items to the cart, and processing payments. It helps catch issues early in development and ensures a flawless website. Cypress’s streamlined and intuitive nature saves time on test maintenance and debugging, allowing the team to focus on enhancing the user experience. 

In contrast, while Selenium 4 has improved test execution efficiency, it may still be slower than Cypress due to architectural differences. Selenium tests can be prone to flakiness, resulting in inconsistent and unreliable results due to timing issues and synchronization problems. Cypress addresses these challenges with its browser-based architecture, offering a reliable testing experience with built-in event synchronization and eliminating timing-related problems. Overall, Cypress provides a robust and efficient testing framework for consistent and dependable results.

Quick UI Automation With The Help Of Cypress:

Pre-requisites:

1. Node js must be already installed in the system.
2. Cypress must be installed.
3. Open the folder using vs code and write the following command on the terminal by this Cypress test runner will be appeared:

1. Now Select End-to-End Automation.
2. Then choose your browser.
3. Now Add the test in the cypress end-to-end folder. For example, UI Automation of login and listing page using Cypress.
4. After adding the test, you can run a login test by your test runner.

We will create UI test cases using Cypress for the login page below. The test cases will cover various user interface aspects to ensure proper functioning and behaviour.

The following test script provides comprehensive UI automation coverage, ensuring 100% coverage of the user interface:

Below is the test runner screenshot while running the test of the above login script:

The Cypress test runner provides a user-friendly display that shows the progress of each test case execution. It includes information about the static page being tested, setup, and teardown steps before and after each test.

Conclusion:

In summary, Cypress is a powerful and user-friendly tool for UI automation. With its intuitive syntax and extensive command set (cy commands), Cypress simplifies the process of writing and executing tests. It provides fast test execution, real-time reloading, and powerful debugging tools. By leveraging Cypress, you can create robust and reliable UI automation tests, ensuring the quality and consistency of your application’s user interface. With its comprehensive documentation and strong community support, Cypress empowers you to achieve efficient and effective UI automation.

Saima Hanif