https://github.com/diegocaceres97/angular-ionic-bdd-test
Template for BDD testing in angular/ionic, was made with cucumber and playwright
https://github.com/diegocaceres97/angular-ionic-bdd-test
angular bdd-tests cucumber ionic playwright
Last synced: about 1 month ago
JSON representation
Template for BDD testing in angular/ionic, was made with cucumber and playwright
- Host: GitHub
- URL: https://github.com/diegocaceres97/angular-ionic-bdd-test
- Owner: Diegocaceres97
- Created: 2025-04-12T04:22:53.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-13T18:05:09.000Z (about 1 year ago)
- Last Synced: 2025-04-14T04:36:35.163Z (about 1 year ago)
- Topics: angular, bdd-tests, cucumber, ionic, playwright
- Language: TypeScript
- Homepage:
- Size: 171 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🧪 Angular + Ionic + BDD E2E Testing Template
This project is a **template** for building end-to-end (E2E) tests using **BDD (Behavior-Driven Development)** with **Cucumber**, **Playwright**, and **TypeScript**. It's designed for applications built with Angular and Ionic.
---
## 🚀 Technologies Used
- **Cucumber** as the BDD engine for writing scenarios in natural language.
- **Playwright** for browser automation, allowing testing on multiple devices and modern browsers.
- **TypeScript + ts-node** to align with the Angular project's structure.
- **Custom World and Hooks configuration** to manage the test lifecycle.
- **Organized folder structure** (`features`, `steps`, `support`) for scalability and maintainability.
- **Functional scenarios** like successful or failed login, defined in `.feature` files.
---
## 📁 Project Structure
```text
e2e/
├── features/
│ ├── login.feature # Gherkin-based scenarios
│ ├── steps/ # Step definitions
│ │ └── login.steps.ts
│ └── support/
│ ├── hooks.ts # Global test hooks (before, after)
│ └── custom-world.ts # CustomWorld context for step sharing
```
---
## 🛠️ Installation
Install dependencies with:
npm install
---
## 🧪 Test Commands
```text
npm run test:e2e # Run the E2E tests with Cucumber
```
---
## 📝 How to Write and Run Tests
1. Write a feature file in Gherkin syntax:
```text
Feature: Login
Scenario: Successful login
Given I am on the login screen
When I enter the username "diego" and password "1234"
Then I should be redirected to the home screen
```
2. Create step definitions in .ts files that match the steps:
```text
import { Given, When, Then } from '@cucumber/cucumber';
import { expect } from '@playwright/test';
import { CustomWorld } from '../support/custom-world';
Given('estoy en la pantalla de login', async function (this: CustomWorld) {
await this.page.goto('http://localhost:4200/login'); // ajusta la URL según tu app
});
When('ingreso el usuario {string} y contraseña {string}', async function (username: string, password: string) {
const userInput = this['page'].locator('ion-input[formControlName="username"] input');
const passInput = this['page'].locator('ion-input[formControlName="password"] input');
const loginButton = this['page'].locator('ion-button[type="submit"]');
await this['page'].waitForURL('**/home');
});
Then('debo ser redirigido a la pantalla de inicio', async function (this: CustomWorld) {
await this.page.waitForURL('**/home');
expect(this.page.url()).toContain('/home');
});
```
3. Ensure your Angular/Ionic app is running on the port expected in the test (default 8100).
---
## ✅ Tips and Recommendations
- Use await page.waitForURL(...) to ensure navigation completes before the next step.
- Use stable selectors like formControlName, data-testid, or custom IDs.
- Structure your .feature, .steps.ts, and support files clearly by domain (e.g., login, dashboard).
- Run tests in headless mode for CI/CD pipelines (npm run test:e2e:headless).