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
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.
- JavaScript
- Node.js
- npm
- Cypress
- Cucumber
- Gherkin
- BDD (Behavior-Driven Development)
- Page Object Model (POM)
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.
Below is a curated list of valid and invalid 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 |
In this project, I have automated two test scenarios taken from the list above:
-
Tests searching by categories such as "Dress", "Tops", "T-Shirt", among others, verifying that the product list returned correctly matches the searched category.
-
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
-
-
Tests searching by various brands, including "Polo", "H&M", "Babyhug", "Biba", etc., validating the correct display of products from those brands.
-
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
-
To run the tests locally, please follow the steps below:
- Make sure you have the latest versions of the following tools installed on your computer:
Inside your code editor, open the terminal and run the following commands:
- Clone this GitHub repository:
git clone https://github.com/henriquekoaski/cypress-web-tests.git
- Navigate to the project directory:
cd cypress-web-tests
- 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
There are two options to run the tests:
- Execute the tests in the terminal:
npx cypress run
Expected Output:
- Open Cypress:
npx cypress open
- Select
E2E Testing
- Choose your preferred browser and click the
Start E2E Testing in "Chosen Browser'button
- Click on
search_bar.feature
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.
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.
Feel free to reach out or check my professional profile:
I'm always open to feedback, collaboration, and professional connections. Let's connect!