Engineering Core
ISB Vietnam's skilled software engineers deliver high-quality applications, leveraging their extensive experience in developing financial tools, business management systems, medical technology, and mobile/web platforms.
In the web development field, delivering bug-free user experience is critical.
So, Testing has become an integral part of the development lifecycle, ensuring the stability and reliability of applications before releases.
One tool that developers and testers usually trust is Cypress.
In this blog, we’ll explore what Cypress is, why it stands out in the testing landscape, and how to get started with this tool.
What is E2E Testing?
Before learning about the Cypress tool, let's revisit what E2E (End-to-End) testing is and its purpose.
End-to-end testing (E2E Testing) is a software testing method in which the entire workflow of an application is tested from start to finish.
The goal of E2E Testing is to ensure that the different components of the system (user interface, database, API, third-party services, etc.) work together as expected in a real-world environment, similar to how end users would interact with the system.
What is Cypress?
You can easily find millions of results about cypress definition on the internet. But here, I will give you the simplest and easiest keywords to understand.
Cypress is an open-source automation testing tool. It has been built on the javascript.
Cypress operates directly in your browser, so it is very fast, developer-friendly testing, and accessible.
It supports end-to-end testing, integration testing, and unit testing, making it the best choice for development teams.
Today, we're focusing on end-to-end testing.
Why Choose Cypress?
1. Easy Setup
Cypress supports command line installation. So, A simple npm install cypress is all you need to get started. No complex configurations or additional plugins are required.
2. All-in-One Testing Solution
Whether you need to write end-to-end, component, or API tests, Cypress has covered you.
3. Real-Time Reloading
Cypress allows you to execute test cases directly in the browser. It allows reload when you update the test case, debug, and log if you want.
4. UI and Report
Cypress has an intuitive running program. You can export the capture screen or video after running the test.
Getting Started with Cypress
I will guide you to install Cypress on the Windows environment. First, prepare the window environment (Win 10 x64) and install node js.
1. Install Cypress
Run the following command in your project directory:
npm install cypress --save-dev
2. Open Cypress
Once installed, you can open Cypress with:
npx cypress open
3. Write First Test
Create a test file cypress\e2e\demo.spec.cy.js
In this file, I will implement the test case, condition, and expected
Now, I have 3 test cases to test this `https://next-tool-ashy.vercel.app/` website as below:
Test Case 1: Verify Home Page Loads Correctly.
Objective: Ensure the home page loads successfully and all essential elements are visible.
Expected:
- The page loads successfully.
- The website logo, navigation menu, and homepage content (e.g., hero image or featured text) are displayed correctly.
- No broken images or missing text are observed.
Test Case 2: Verify Navigation Menu Functionality.
Objective: Ensure the navigation menu links redirect users to the correct pages.
Expected:
- Each menu item redirects to its respective page.
- Pages load correctly without errors.
- The URL is correct.
Test Case 3: Verify Responsiveness on Mobile Devices.
Objective: Ensure the website is fully responsive and displays correctly on Mobile devices.
Expected: The website layout adapts correctly to the screen size.
Test Case 4: Verify Performance.
Objective: Ensure the website loads quickly.
Expected: The website load time is under 5 seconds.
4. Run the Test
Open Cypress and Choose the browser that you want to use for testing (npx cypress open).
Choose the test case file and wait for the result. All of them are automatic.
Conclusion
I have introduced you to Cypress above, including its installation, usage, and a few simple test cases.
Cypress is a quality assurance tool designed for developers. Make sure to leverage its power in your project!
Reference
https://www.cypress.io/