A Beginner’s Guide : My Personal Journey with Cypress

Eman Mahmoud

·

Follow

8 min read

·

Sep 11, 2023

--

Listen

Share

In the ever-evolving realm of web development, testing is the unsung hero that ensures our digital creations work seamlessly. As developers and testers, we often find ourselves on a quest for the perfect tool to streamline the testing process, and it was on this journey that I discovered Cypress.

In this blog, I’m excited to share my personal journey with Cypress, a JavaScript-based end-to-end testing framework that has revolutionized the way I approach web testing. Together, we’ll explore the insights, challenges, and triumphs I’ve encountered along the way. Join me as we delve into the world of Cypress and uncover the invaluable lessons it has to offer. Whether you’re a seasoned tester or just starting your testing adventure, this blog promises to shed light on the incredible potential of Cypress and how it can elevate your web testing practices. Let’s embark on this journey together!

The Project at a Glance

Ui-Api-Testing-by-Cypress is a simple project initiated by me during my study of Cypress. It uses the capabilities of Cypress, a JavaScript-based end-to-end testing framework, to expedite the testing process. Cypress has various benefits for testing web apps, making it a perfect choice for my project.

The Heart of the Project: End-to-End (e2e) Test Files:

The core of this project lies in its end-to-end (e2e) test files. These files, found within the cypress/e2e directory, contain the test scripts that thoroughly assess the functionality of web applications. Let's take a closer look at these e2e test files:

1. login.js

Here we will learn about the Page Object Model (POM) pattern to create a design object model for our website. The POM pattern helps organize your test code by separating the page-specific logic and selectors from your test scripts, making your tests more maintainable and readable. So as it is usually a good idea to construct a class that contains all of the methods that you will need, the objective of this file is as follows:

• Objective: This file focuses on creating class that contain all required methods to perform the login functionality of the web application.
• Steps: It simulates user interaction by entering credentials, clicking the login button, and verifying a successful login.
• Assertions: Here the test asserts on the login API by using the cy.intercept() method to check that the correct API gets sent and asserting on the status code and the response.

2. myinfo.js

• Objective: Create a class containing methods for updating user information in the web application.
• Steps: Simulate user interaction, such as navigating to the user profile page. Query and update user data. Handle relevant UI elements for data updating.
• Assertions: Include assertions to validate the accuracy of the user information. Ensure that the data retrieved from the API matches the expected values based on user inputs or settings.

3. searchpage.cy.js

• Objective: Here’s a test containing methods for simulating and testing the search functionality of the web application.
• Steps: Simulate user interaction with the search feature. Execute searches and manage the search results.
• Assertions: Include assertions to validate the correctness of search results. Ensure that the displayed search results align with user input and expectations. In a positive case, it will intercept the search API to check the status code and response. And in the negative case, check that the error message was displayed correctly.

You’ll notice that I neglected to construct a class for this section instead of doing all the necessary procedures in the test suite.

4. LoginPage.cy.js

• Objective: Construct a test suite for login-related scenarios within the web application.
• Steps: To execute various login test cases using the methods provided by the dedicated login.js class
• Actions: Import thelogin.js class to access login-related methods. Execute login test cases, covering different scenarios (e.g., valid login, invalid credentials, etc.). Verify login outcomes and responses based on the actions performed.

5. MyinfoPage.cy.js

• Objective: Develop a test suite for user information management within the web application.
• Steps: To execute a range of test cases related to updating and managing user information using methods provided by the myinfo.js class.
• Actions: Import the myinfo.js class to access user information management methods. Execute test cases to update user data by navigating to the user profile page and interacting with relevant UI elements. Verify the accuracy of user information updates and API responses in line with the test actions.

These files are the backbone of our testing framework, rigorously assessing the functionality of web applications. We’ve explored the intricacies of key E2E test files like login.js and myinfo.js, each serving a vital purpose in our testing suite. While we've emphasized the construction of classes for method organization, it's important to note that our journey doesn't end here. We continued to navigate through the remaining chapters of this testing adventure, including the construction of test suites for login scenarios (LoginPage.cy.js) and user information management (MyinfoPage.cy.js).

By organizing and structuring the test files and their descriptions in this manner, the testing process becomes more modular, readable, and maintainable. It also emphasizes the importance of encapsulating related functionality within dedicated classes for better code organization and reusability.

Fixtures:

As we continue our journey through the realm of software testing, we’ve automated our test processes, making them more efficient and reliable. However, there’s a crucial question we need to address: Is it still practical to manually enter our test data every time we run our tests?

Imagine this scenario: You’re testing a complex web application with various user roles, product catalogs, and transaction histories. Manually setting up this data before each test run can quickly become a time-consuming and error-prone task. This is where the concept of “fixtures” comes into play, offering a smarter way to handle your test data.

Fixtures also are the backbone of our testing framework. They provide consistent and reproducible data for our tests, ensuring their reliability. Fixtures also maintain test independence, improve efficiency, and scale with our application’s evolving data needs. They offer version control and serve as documentation, enhancing the overall quality of our testing efforts. In essence, fixtures are a crucial tool for streamlining web testing.

To configure the test data, update the values in the Fixtures files, typically found in the /cypress/fixtures directory. You can add more data according to your test requirements.

// Example of configuring login credentials in data.json
{
    "url":"https://opensource-demo.orangehrmlive.com/web/index.php/auth/login",
    "login":{
            "username": "Admin",  //add your new username
            "password": "admin123"  // add your new password
    },
    "diffdata":{
        "nickname":"Bebo",
        "keyword":"Sara.Tencrady"
    }
}

How to Utilize These Tests:

To employ these tests effectively, follow these steps:

1. Clone the Repository: Begin by cloning the Ui-Api-Testing-by-Cypress repository to your local machine.
2. Install Dependencies: Navigate to the project folder and install the necessary dependencies. Execute this by using the command npm install.
3. Install Cypress if you haven’t already using npm install cypress.
4. Explore and Customize: Delve into the E2E test files, conveniently located in the cypress/e2e directory. AT cypress/e2e/pages here we put our classes that you will need for each page and other pages ,cypress/e2e/tests here we put our test suite for each page and then import any needed classes. Customize and extend these tests to align with your application's specific requirements.
5. Run Tests with Cypress Test Runner: Launch the tests by executing npx cypress open. This command opens the Cypress Test Runner, allowing you to effortlessly select your desired test files and observe the tests in action.
6. (Optional Step) Run in Headless Mode: Alternatively, you can run the tests in headless mode using npx cypress run. This is an optional step for automated testing without a graphical interface.
7. Analyze Results with Precision: Dive into the results within the Cypress Test Runner. This tool provides comprehensive insights into test pass/fail statuses, simplifying the process of identifying and addressing any issues that may arise.

By following these steps, you’ll harness the full potential of these tests, ensuring a robust and effective testing process for your web applications.

Reporting:

Now that we’ve run our test, do you think we’ve finished there? No, it’s time to report our results.

Cypress supports multiple reporters, such as spec, dot, list, min, etc. These reporters output the test results to the console or the terminal in a text format. However, if you want to see the test results in a more visual and interactive way, you may want to use an HTML reporter. An HTML reporter generates a web page that displays the test results in a graphical and user-friendly way.

One of the most popular and widely used HTML reporters for Cypress is cypress-mochawesome-reporter. This reporter is based on mochawesome-reporter, which is a reporter for Mocha, the testing framework that Cypress uses internally. cypress-mochawesome-reporter generates an HTML report for each spec file (a file that contains one or more tests) in your Cypress project. It also merges all the individual HTML reports into a single HTML report that shows the results of all your tests in one place.

To install cypress-mochawesome-reporter in your Cypress project, you need to follow these steps:

1. Install cypress-mochawesome-reporter as a dev dependency in your project using npm or yarn:

npm install --save-dev cypress-mochawesome-reporter
# or
yarn add --dev cypress-mochawesome-reporter

2. Add cypress-mochawesome-reporter as a reporter in your Cypress configuration file cypress.config.jsor via command line options:

{
  "reporter": "cypress-mochawesome-reporter",
  "reporterOptions": {
    // optional reporter options
  }
}

or

cypress run --reporter cypress-mochawesome-reporter --reporter-options <options>

3. Run your Cypress tests using cypress run command. This will generate an HTML report for each spec file in cypress/results folder and a merged HTML report in cypress/reports folder.

By installing and using cypress-mochawesome-reporter, you can generate and view HTML reports for your Cypress tests. You can also customize your HTML reports using various reporter options. For more details on how to use and customize cypress-mochawesome-reporter, you can navigate to its documentation.

In Conclusion

I hope you enjoyed reading this blog post about my test automation project using Cypress. Cypress is a powerful and easy-to-use tool for end-to-end testing of web applications. It allows you to write and run tests that simulate the user’s interaction with your web app. It also supports multiple reporters, such as cypress-mochawesome-reporter, that help you to generate and view HTML reports for your test results.

In this blog post, I shared with you how I used Cypress to test the functionality and user experience of my web app. I also showed you how I installed and customized cypress-mochawesome-reporter to generate and view HTML reports for my tests. I hope you learned something new and useful from this blog post.

If you have any questions or feedback, please feel free to leave a comment below. I would love to hear from you and learn from your experience. Thank you for reading and happy testing!