https://github.com/henriquekoaski/cypress-web-tests
End-to-end (E2E) web testing project using Cypress, BDD with Cucumber and Page Object Model (POM). Functional UI tests for the Automation Exercise website.
https://github.com/henriquekoaski/cypress-web-tests
bdd cucumber cypress e2e-testing functional-tests gherkin-language javascript page-object-model
Last synced: 2 months ago
JSON representation
End-to-end (E2E) web testing project using Cypress, BDD with Cucumber and Page Object Model (POM). Functional UI tests for the Automation Exercise website.
- Host: GitHub
- URL: https://github.com/henriquekoaski/cypress-web-tests
- Owner: henriquekoaski
- Created: 2025-06-14T01:28:50.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-04-14T20:36:06.000Z (2 months ago)
- Last Synced: 2026-04-14T22:24:33.577Z (2 months ago)
- Topics: bdd, cucumber, cypress, e2e-testing, functional-tests, gherkin-language, javascript, page-object-model
- Language: JavaScript
- Homepage: https://automationexercise.com
- Size: 594 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cypress-Web-Tests
This repository contains automated functional end-to-end (E2E) tests for the Automation Exercise website – a full-fledged practice platform designed for Automation Engineers.
🌐 Access the website through this link 👉 [automationexercise.com](https://automationexercise.com)
## 🧭 Overview
In this project, I implement automated functional end-to-end (E2E) tests using Cypress with JavaScript, following BDD practices with the Gherkin language using Cucumber tool, and applying the Page Object Model (POM) design pattern. The goal is to ensure the quality and reliability of the Automation Exercise website.
## 🛠️ Technologies and Tools Used
- JavaScript
- Node.js
- npm
- Cypress
- Cucumber
- Gherkin
- BDD (Behavior-Driven Development)
- Page Object Model (POM)
## ⚙️ Structure of the Project
This project was designed with a focus on **scalability** and **ease of maintenance** for both existing and future test scenarios.
The tests are written in **Gherkin language** using the **Cucumber** tool, which enables the creation of test scenarios following the **BDD (Behavior Driven Development)** approach. These files can be found in the `features` folder.
The step definitions are written in JavaScript using Cypress, and are responsible for executing the steps described in each test scenario defined in the `features` folder. All step definition files are organized in the `step_definitions` folder.
This project follows the **Page Object Model (POM)** pattern, a best practice that improves code organization and maintainability. Inside the `pages` folder, you will find classes that represent pages, containing selectors to identify HTML elements and methods implemented in **Cypress + JavaScript** to perform the actions needed for the functional tests.
## 🔍 Test Scenarios for the Search Bar Functionality
Below is a curated list of positive and negative test scenarios I designed for the search bar feature.
The automated scripts in this project cover a selected set of these scenarios.
| ✅:❌ | **Scenario** | **Example** | **Expected Result** |
|-------|-----------------------------------------|------------------------------------------|-------------------------------------------------------------|
| ✅ | Search by full product name | "Blue Top" | Returns the exact matching product |
| ✅ | Search by partial product name | "Dress" | Returns all products containing "Dress" |
| ✅ | Search by brand name | "Polo" | Returns products from the Polo brand |
| ✅ | Search by category name | "T-Shirt" | Returns products under the T-Shirt category |
| ✅ | Search by color keyword | "Black" | Returns all black-colored products |
| ✅ | Search by product attributes | "Cotton T-Shirt" | Returns cotton T-Shirts |
| ✅ | Search using synonyms | "Sneakers", "Tennis Shoes" | Returns similar products |
| ✅ | Search using related category terms | "Pants" | Returns jeans, joggers, etc. |
| ✅ | Search using uppercase letters | "JEANS" | Same result as lowercase |
| ✅ | Search using lowercase letters | "jeans" | Same result as uppercase |
| ✅ | Search by multi-word name | "Stylish Dress" | Returns the exact match |
| ✅ | Search with extra spaces | " Saree " | Trims and returns results normally |
| ✅ | Search with small typo (fuzzy match) | "Blu Top" | Returns "Blue Top" if fuzzy match is supported |
| ✅ | Search by singular/plural | "Top", "Tops" | Returns related products |
| ✅ | Suggestions while typing | Typing "dre" | Displays options like "Dress", "Dress Shirt" |
| ✅ | Search history on focus | Click on input | Displays previous searches like “Dress”, “Jeans”, etc. |
| ❌ | Search with empty field | "" | No action taken; the system ignores empty searches without error or results |
| ❌ | Search with only spaces | " " | No action taken; the system ignores only spaces searches without error or results |
| ❌ | Search with special characters | "@#%&*" | No results; display a clear and informative message. |
| ❌ | Search for non-existent product | "Chocolate" | No results; display a clear and informative message. |
| ❌ | Random numeric string | "837492" | No results; display a clear and informative message. |
| ❌ | Search with emoji | "🧸🎯🚀" | No results; display a clear and informative message. |
| ❌ | Offline search or unstable connection | Search with no internet | Displays fallback UI or clear error message |
## 🧪 Automated Test Scenarios in this project
In this project, I have automated two test scenarios taken from the list above:
- ### **1. Search for a product by category**
Tests searching by categories such as "Dress", "Tops", "T-Shirt", among others, verifying that the product list returned correctly matches the searched category.
#### Test Results:
- **Bug found** : ❌ Search for a product by category (example #4) 👉 T-Shirt
Search by category "T-Shirt" fails due to inconsistency in the system’s category naming (registered as "Tshirts" without a hyphen). As a result, the search only returns some products with "T-Shirt" in their
titles but does not correctly filter every products by category.
🐞 View the full bug report by clicking [here](./bug-reports/search-bar/bug-search-by-category-t-shirt/report.md)
- ### **2. Search for a product by brand**
Tests searching by various brands, including "Polo", "H&M", "Babyhug", "Biba", etc., validating the correct display of products from those brands.
#### Test Results:
- **Bug found:** ❌ Search for a product by brand
The search bar does not return products when searching for brands such as "Babyhug", "Kookie Kids", and "Biba". The results section remains empty, negatively affecting user experience.
🐞 View the full bug report by clicking [here](./bug-reports/search-bar/bug-search-by-brand/report.md)
## 🔬 Running Tests Locally
To run the tests locally, please follow the steps below:
### Prerequisites
1. Make sure you have the latest versions of the following tools installed on your computer:
* [Node](https://nodejs.org/en/)
* [Git](https://git-scm.com/)
* [VS Code](https://code.visualstudio.com) or any code editor of your choice
### Code Editor
Inside your code editor, open the terminal and run the following commands:
2. Clone this GitHub repository:
```
git clone https://github.com/henriquekoaski/cypress-web-tests.git
```
3. Navigate to the project directory:
```
cd cypress-web-tests
```
4. Install the dependencies:
```
npm install
```
> 💡 If this is your first time using Cypress on this computer, run the following command after installing dependencies to ensure Cypress binaries are properly installed:
```
npx cypress install
```
### Running the Tests
There are two options to run the tests:
#### 🔽 Option 1: Running the tests in headless mode (without a graphical interface)
5. Execute the tests in the terminal:
```
npx cypress run
```
Expected Output:
#### 🔽 Option 2: Running Tests in Interactive Mode (with Graphical Interface)
5. Open Cypress:
```
npx cypress open
```
6. Select `E2E Testing`
7. Choose your preferred browser and click the `Start E2E Testing in "Chosen Browser'` button
8. Click on `search_bar.feature`
### Interactive Test View:
When running tests in interactive mode, Cypress opens a browser window where you can visually follow the test execution in real-time. The interface is divided mainly into two sections:
**Left panel**: Displays the list of test steps currently being executed, highlighting each step as it runs. This helps you track the progress and identify where the test is at any moment.
**Right panel**: Shows the browser viewport where the test simulates user interactions, such as clicking buttons, filling forms, and navigating pages. You will see the actual UI being tested as the commands are executed.
### 🧾 Test Results Dashboard
This panel displays the summary of test executions, showing which tests have passed or failed. It provides a clear and immediate overview of the current test suite status, helping you quickly identify any issues that need attention.
 
---
## 📬 Connect with Me
Feel free to reach out or check my professional profile:
- [LinkedIn](https://www.linkedin.com/in/henriquekoaski/)
- [GitHub](https://github.com/henriquekoaski)
> I'm always open to feedback, collaboration, and professional connections. Let's connect!