E2E Test Automation with WebdriverIO
This project automates the end-to-end flows of a demo e-commerce site using WebdriverIO with JavaScript. The features covered include navbar behavior, login, and registration — with a strong focus on validation scenarios such as boundary values, empty fields, duplicate entries, and form logic.
Project structure
The project is organized into clear, separated layers — page objects, components, helpers, and test specs each live in their own folder. If a locator breaks, go to the page objects folder. If a test scenario needs updating, go to the specs folder. If test data logic needs changing, go to the helper folder. No guessing, no hunting.
the implementation
Page Object Model
Each page in the application has its own dedicated class that holds all its locators and interaction methods. Login, registration, navbar, and success pages each have their own file. If a selector changes in the UI, it's updated in one place — and every test that uses it is automatically fixed. Methods like login() bundle multiple steps into a single reusable action. Instead of repeating the same fill-and-click sequence across tests, one method call handles it cleanly.
Reusable Navbar Component
The navbar appears across every page in the application. Rather than duplicating its locators in every page object, it lives in its own component class. Every test that needs to navigate through the navbar imports the same component — consistent, maintainable, and DRY.
Dynamic Data Generator
Hardcoded test data is fragile. A fixed name or email might already exist in the database and cause false failures, or it might get stale over time. The data generator creates fresh, unique values on every run. It generates:
01.
Unique names
using an animal-based name generator combined and trimmed to a consistent length
02.
Phone numbers
Phone numbers
random numeric values formatted for form inputs
03.
ZIP codes
randomly generated numeric codes
04.
Passwords
randomly generated from animal name dictionaries
Lifecycle Hooks
Every test suite uses beforeEach and afterEach hooks to manage state cleanly. Before each test, the browser is maximized and navigated to the correct starting point. After each test, cookies are cleared and the browser is refreshed. This ensures every test starts from a clean, predictable state — no test bleeds into the next.
the testing stack
Every tool chosen with purpose — from feature to assertion.
WebdriverIO
for browser automation and element interaction
Jenkins
runs the load tests automatically as part of the CI/CD pipeline
Allure Report
to visualize test results in a clean, shareable report