{"id":27402261,"url":"https://github.com/diegocaceres97/angular-ionic-bdd-test","last_synced_at":"2026-04-05T23:30:55.563Z","repository":{"id":287756172,"uuid":"964939946","full_name":"Diegocaceres97/angular-ionic-BDD-test","owner":"Diegocaceres97","description":"Template for BDD testing in angular/ionic, was made with cucumber and playwright","archived":false,"fork":false,"pushed_at":"2025-04-13T18:05:09.000Z","size":175,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T04:36:35.163Z","etag":null,"topics":["angular","bdd-tests","cucumber","ionic","playwright"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Diegocaceres97.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-12T04:22:53.000Z","updated_at":"2025-04-13T18:05:13.000Z","dependencies_parsed_at":"2025-04-13T19:27:46.382Z","dependency_job_id":"c2bc9cfa-526b-4266-9ff1-b36c7f17ffb2","html_url":"https://github.com/Diegocaceres97/angular-ionic-BDD-test","commit_stats":null,"previous_names":["diegocaceres97/angular-ionic-bdd-test"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Diegocaceres97/angular-ionic-BDD-test","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Diegocaceres97%2Fangular-ionic-BDD-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Diegocaceres97%2Fangular-ionic-BDD-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Diegocaceres97%2Fangular-ionic-BDD-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Diegocaceres97%2Fangular-ionic-BDD-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Diegocaceres97","download_url":"https://codeload.github.com/Diegocaceres97/angular-ionic-BDD-test/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Diegocaceres97%2Fangular-ionic-BDD-test/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260134157,"owners_count":22963856,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","bdd-tests","cucumber","ionic","playwright"],"created_at":"2025-04-14T04:24:52.694Z","updated_at":"2025-12-30T22:32:50.659Z","avatar_url":"https://github.com/Diegocaceres97.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧪 Angular + Ionic + BDD E2E Testing Template\n\nThis 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.\n\n---\n\n## 🚀 Technologies Used\n\n- **Cucumber** as the BDD engine for writing scenarios in natural language.\n- **Playwright** for browser automation, allowing testing on multiple devices and modern browsers.\n- **TypeScript + ts-node** to align with the Angular project's structure.\n- **Custom World and Hooks configuration** to manage the test lifecycle.\n- **Organized folder structure** (`features`, `steps`, `support`) for scalability and maintainability.\n- **Functional scenarios** like successful or failed login, defined in `.feature` files.\n\n---\n\n## 📁 Project Structure\n```text\ne2e/\n├── features/\n│   ├── login.feature           # Gherkin-based scenarios\n│   ├── steps/                  # Step definitions\n│   │   └── login.steps.ts\n│   └── support/\n│       ├── hooks.ts           # Global test hooks (before, after)\n│       └── custom-world.ts    # CustomWorld context for step sharing\n```\n---\n\n## 🛠️ Installation\n\nInstall dependencies with:\nnpm install\n\n---\n\n## 🧪 Test Commands\n```text\nnpm run test:e2e          # Run the E2E tests with Cucumber\n```\n\n---\n## 📝 How to Write and Run Tests\n1. Write a feature file in Gherkin syntax:\n```text\nFeature: Login\n\n  Scenario: Successful login\n    Given I am on the login screen\n    When I enter the username \"diego\" and password \"1234\"\n    Then I should be redirected to the home screen\n```\n\n2.\tCreate step definitions in .ts files that match the steps:\n```text\nimport { Given, When, Then } from '@cucumber/cucumber';\nimport { expect } from '@playwright/test';\nimport { CustomWorld } from '../support/custom-world';\n\nGiven('estoy en la pantalla de login', async function (this: CustomWorld) {\n  await this.page.goto('http://localhost:4200/login'); // ajusta la URL según tu app\n});\n\nWhen('ingreso el usuario {string} y contraseña {string}', async function (username: string, password: string) {\n  const userInput = this['page'].locator('ion-input[formControlName=\"username\"] input');\n  const passInput = this['page'].locator('ion-input[formControlName=\"password\"] input');\n  const loginButton = this['page'].locator('ion-button[type=\"submit\"]');\n  await this['page'].waitForURL('**/home');\n});\n\nThen('debo ser redirigido a la pantalla de inicio', async function (this: CustomWorld) {\n  await this.page.waitForURL('**/home');\n  expect(this.page.url()).toContain('/home');\n});\n```\n\n3.\tEnsure your Angular/Ionic app is running on the port expected in the test (default 8100).\n   \n---\n## ✅ Tips and Recommendations\n\t- Use await page.waitForURL(...) to ensure navigation completes before the next step.\n\t- Use stable selectors like formControlName, data-testid, or custom IDs.\n\t- Structure your .feature, .steps.ts, and support files clearly by domain (e.g., login, dashboard).\n\t- Run tests in headless mode for CI/CD pipelines (npm run test:e2e:headless).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegocaceres97%2Fangular-ionic-bdd-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiegocaceres97%2Fangular-ionic-bdd-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegocaceres97%2Fangular-ionic-bdd-test/lists"}