This article provides a step-by-step guide to getting started with Cypress, a popular testing framework. It covers installation, running Cypress, building tests, and running tests. It also mentions the importance of checking the official documentation and provides links for further reference.

Learn About Cypress

Cypress is a modern test automation tool used for testing web applications. It is known for its fast, reliable, and easy-to-use features, making it popular among developers and QA professionals. Here's a summary of Cypress test automation tool:

Fast and Reliable: Cypress is designed for speed and reliability, providing fast test execution and consistent results, which makes it suitable for both small and large-scale test suites.
Easy Setup: Cypress has a straightforward setup process, allowing users to start writing and running tests quickly without the need for additional dependencies.
JavaScript-based: Cypress test scripts are written in JavaScript, which is widely used and familiar to many developers, making it accessible for those with JavaScript knowledge.
Interactive Test Runner: Cypress provides an interactive test runner that allows users to see the application under test while the tests are running, making it easier to debug and troubleshoot issues.
Real-time Reloads: With real-time reloads, Cypress automatically reloads the application when changes are made, providing instant feedback during the development and testing process.
Time Traveling Debugging: Cypress offers time-traveling debugging, allowing users to see exactly what happened at each step of the test, making it easier to diagnose failures.
Cross-browser Testing: Cypress supports cross-browser testing, allowing users to run tests across different browsers to ensure consistent behavior.
Built-in Assertions and Spies: Cypress comes with built-in assertions and spies that simplify the process of writing test assertions and interacting with the application under test.
Community Support: Cypress has a strong community with active support forums, documentation, and plugins, making it easy to find resources and solutions to common testing challenges.

Overall, Cypress is a powerful and user-friendly test automation tool that provides an intuitive testing experience for web applications, enabling developers and QA professionals to create and maintain reliable test suites with ease.

LEARN MORE: Before starting with useful tips and comments is highly recommended that you always check the official documentation on Cypress

Getting Started

Installation of Cypress

To install Cypress, you can follow these general steps:

Node.js Installation: Ensure that you have Node.js installed on your system. Cypress requires Node.js to be installed to run the tests.
Project Setup: If you are setting up Cypress for a specific project, navigate to the root directory of the project in your terminal.
Package Manager: Use a package manager such as npm (Node Package Manager) or yarn to install Cypress. Here are the commands for both package managers:

Package Manager Installation

If you haven't initiated the project yet, open your folder in VSCode, access the terminal, and type the following command:

npm init --y or yarn init (it depends on which package manager you’re using)

With NPM

Open your folder on VSCode, open the terminal, and type npm i cypress --save-dev to install cypress as dev dependencies:

With Yarn

Open your folder on VSCode, open the terminal, and type yarn add cypress --dev to install cypress as dev dependencies

After initializing and installing the cypress you should check and confirm that the cypress is on dependencies and it’s on the version that you want

Running Cypress

Running Cypress involves executing test scripts and interacting with the Cypress Test Runner to manage and view the test results. Here's an overview of running Cypress:

Launch Cypress Test Runner: To run Cypress, you can launch the Cypress Test Runner by using the following command in your project directory:
Select Test Files: In the Cypress Test Runner, you can select the test files or test suites that you want to run.
Run Tests: Once the test files are selected, you can run the tests by clicking on the "Run All Tests" button or by selecting specific tests to run.
View Test Execution: As the tests run, you can view the test execution in real-time, including the status of each test, any commands being executed, and any assertions being made.
Test Results: After the tests are completed, you can view the test results, including any passed, failed, or skipped tests, along with detailed logs and screenshots if applicable.
Debugging: If any tests fail, you can use the Cypress Test Runner to debug and troubleshoot the failures by viewing detailed error messages and inspecting the application state at the time of failure.
Integration with CI/CD: Cypress tests can also be executed as part of a continuous integration/continuous deployment (CI/CD) pipeline, allowing for automated testing and reporting.

Execution with NPM, open the terminal and type:

npx cypress open

Execution with Yarn, open the terminal and type:

yarn cypress open

After this you should be able to see that folders and files were created

Use of cypress.json

The cypress.json file is a configuration file used to customize the behavior of Cypress for a specific project. It allows users to define various settings and options that affect how Cypress runs and interacts with the application under test. Here's an overview of the cypress.json file:

Project-specific Configuration: The cypress.json file is typically located in the root directory of a Cypress project and contains project-specific configuration settings.
Customization Options: Users can customize various aspects of Cypress, such as the browser to use, the base URL of the application being tested, environment variables, file path aliases, and other Cypress-specific settings.
Default Values: The cypress.json file can override default values for Cypress configuration options, allowing users to tailor Cypress behavior to their specific project requirements.
JSON Format: The file is written in JSON format, making it easy to define key-value pairs for different configuration options.
Version Control: The cypress.json file can be version controlled along with the project's source code, allowing teams to maintain consistent configuration settings across different environments and collaborators.

By using the cypress.json file, users can ensure that Cypress behaves according to their project's specific needs and requirements, providing flexibility and control over the testing environment.

Within cypress.json, you’ll change configurations regarding cypress. For example, in the following illustration we are changing; Environment base url and h

eight and width of viewport:

Use of the Integration folder, here you’ll create the file where your code will be written, to run it on cypress, the file's name must finish with .spec.js

The "integration" folder in Cypress is a special directory where test files are typically stored. It plays a key role in organizing and running tests using Cypress. The role of the "integration" folder for Cypress is summarized as:

Test File Storage: The "integration" folder is the default location for storing test files written in Cypress. When Cypress runs, it automatically looks for test files within this folder.
Hierarchical Structure: Test files within the "integration" folder can be organized into subdirectories to create a hierarchical structure that reflects the structure of the application being tested. This makes it easy to manage and locate specific tests.
Test Execution: When Cypress is launched, it scans the "integration" folder and its subdirectories to discover and execute the test files found within them.
Isolation of Test Code: Keeping test files in a dedicated "integration" folder helps separate test code from application code, promoting a clear distinction between production code and testing code.

Use of the Support folder, this is a special directory that contains support files and custom commands that provide additional functionality and utilities for test authoring and execution. Here's an explanation of the role of the "support" folder in Cypress:

Custom Commands: The "support" folder is used to store custom Cypress commands that extend the built-in functionality of Cypress. These custom commands can be used to encapsulate repetitive actions, interact with the application under test, or perform specific testing operations.
Utility Functions: The "support" folder can also contain utility functions, fixtures, and other support files that are used to assist in writing and running tests. These files can provide helper functions, data fixtures, or configuration settings that are useful across multiple test files.
Centralized Location: By storing custom commands and support files in the "support" folder, developers can maintain a centralized location for reusable testing utilities, making it easier to manage and share these resources across different test files.
Initialization Code: The "support" folder can also contain an "index.js" file, which is used to define initialization code that runs before each test suite. This allows developers to set up common configurations or perform setup tasks before running tests.
Separation of Concerns: The "support" folder helps in separating support code and custom commands from the actual test files, promoting a clean and modular test codebase.

For example, here you should see the commands.js file that you will use to create customized methods:

The commands.js should always have all the most common and used methods in terms of avoiding repetitive code, this way you write once and use the methods whenever needed without having to write it again.
For example: assert text, is a simple method, but writing it several times is not a good coding practice, so for that, you could write it on commands.js and call the method when it’s needed.
Remember that you can read the official documentation to study what’s the best approach to code your methods.

LEARN MORE: You can find the documentation here.

Building your tests

In the Cypress Test Runner, you can create new test files or edit existing ones using your preferred code editor. Cypress uses JavaScript to write tests and provides a set of powerful commands for interacting with the application under test.

The spec.js file in Cypress is a test file that contains the actual test cases written using Cypress' testing framework.

Create your spec.js file with an intuitive name for the task:

In the screenshot below, we show Visual Studio Code (VS Code) interface, specifically focusing on the Cypress Test Suite. It depicts the following:

Typical layout of VS Code with the Explorer panel on the left, where we can see a directory structure that includes Cypress tests.
The file highlighted is "demoForFirstTest.spec.js," which suggests it is a JavaScript file containing test specifications for Cypress.
On the right side, there are quick shortcut commands for VS Code, such as "Show All Commands" with the shortcut key combination Ctrl + Shift + P, "Go to File" with Ctrl + P, "Find in Files" with Ctrl + Shift + F, "Start Debugging" with F5, and "Toggle Terminal" with Ctrl + `. These commands are essential for navigating and operating within the VS Code environment efficiently.
Indicates that the user is likely setting up or reviewing Cypress tests within their development environment.

NOTE: Testing is a crucial part of the software development process, and tools like Cypress integrated within VS Code provide a streamlined workflow for developers to write, execute, and debug their tests.

The screenshot above displays a code editor with JavaScript code, specifically for creating custom commands in Cypress, which is an end-to-end testing framework for web applications. The code is defining three custom commands to be used in Cypress tests:

assertTextFromElement: This command takes two parameters, element and text. It uses the cy.get function to retrieve the element and then asserts that the text content of that element matches the provided text.
clickOnElementByCyGet: This command takes one parameter, element, and performs a click action on it using cy.get and click, with the {force: true} option to force the click action even if Cypress would normally prevent it due to the element being hidden or covered by another element.
visitDemofx: This command does not take any parameters and simply navigates to the URL "https://demofx.pricefx.com" using the cy.visit function.

These custom commands are being added to the Cypress.Commands object, which allows them to be reused across different test files in a Cypress test suite. This helps in making the test code more readable and maintainable by abstracting common actions into reusable functions.

Running your tests

To run tests in Cypress, you can follow these steps:

Open Cypress Test Runner: Navigate to your project directory in the terminal and run the following command to open the Cypress Test Runner: