BDD con Cucumber y Gherkin

# features/login.feature
Feature: Login de Usuario
  Como usuario registrado
  Quiero hacer login en mi cuenta
  Para poder acceder a mi dashboard

  Scenario: Login exitoso con credenciales validas
    Given estoy en la pagina de login
    When ingreso "admin@test.com" como email
    And ingreso "secret123" como password
    And hago click en el boton de login
    Then deberia ser redirigido al dashboard
    And deberia ver "Bienvenido, Admin" como saludo

  Scenario: Login fallido con password incorrecto
    Given estoy en la pagina de login
    When ingreso "admin@test.com" como email
    And ingreso "wrongpassword" como password
    And hago click en el boton de login
    Then deberia ver un mensaje de error "Credenciales invalidas"
    And deberia permanecer en la pagina de login

  Scenario Outline: Login con varias credenciales
    Given estoy en la pagina de login
    When ingreso "<email>" como email
    And ingreso "<password>" como password
    And hago click en el boton de login
    Then deberia ver "<resultado>"

    Examples:
      | email           | password  | resultado             |
      | admin@test.com  | secret123 | Bienvenido, Admin     |
      | editor@test.com | pass456   | Bienvenido, Editor    |
      | wrong@test.com  | wrong     | Credenciales invalidas|
      |                 | secret123 | Email es requerido    |

const { Given, When, Then } = require('@cucumber/cucumber');
const { expect } = require('@playwright/test');

Given('estoy en la pagina de login', async function () {
  await this.page.goto('/login');
});

When('ingreso {string} como email', async function (email) {
  await this.page.fill('[data-testid="email"]', email);
});

When('ingreso {string} como password', async function (password) {
  await this.page.fill('[data-testid="password"]', password);
});

When('hago click en el boton de login', async function () {
  await this.page.click('[data-testid="login-submit"]');
});

Then('deberia ser redirigido al dashboard', async function () {
  await expect(this.page).toHaveURL('/dashboard');
});

Then('deberia ver {string} como saludo', async function (greeting) {
  await expect(this.page.locator('.welcome-msg')).toHaveText(greeting);
});

Then('deberia ver un mensaje de error {string}', async function (message) {
  await expect(this.page.locator('.error-message')).toHaveText(message);
});

# Mal — demasiado tecnico
Scenario: Test de login
  Given navego a "https://app.example.com/login"
  When lleno "#email" con "admin@test.com"
  And hago click en "#login-btn"
  Then la URL deberia ser "/dashboard"

# Bien — comportamiento de negocio
Scenario: Login exitoso
  Given soy un usuario admin registrado
  When hago login con credenciales validas
  Then deberia ver mi dashboard de admin

# Imperativo (muchos pasos, dificil de leer)
Scenario: Comprar un producto
  Given abro el navegador
  And navego a la pagina principal
  And hago click en "Productos"
  And busco "Mouse Inalambrico"
  And hago click en el primer resultado
  And hago click en "Agregar al Carrito"

# Declarativo (comportamiento claro)
Scenario: Comprar un producto
  Given estoy logueado como cliente
  When agrego "Mouse Inalambrico" a mi carrito
  And completo el checkout con mi metodo de pago guardado
  Then deberia recibir una confirmacion de orden

@smoke @login
Feature: Login de Usuario

  @positive @critical
  Scenario: Login exitoso
    Given estoy en la pagina de login
    When hago login con credenciales validas
    Then deberia ver mi dashboard

  @negative
  Scenario: Login con cuenta bloqueada
    Given tengo una cuenta bloqueada
    When intento hacer login
    Then deberia ver un mensaje de cuenta bloqueada

npx cucumber-js --tags "@smoke"
npx cucumber-js --tags "@smoke and not @negative"

import { createBdd } from 'playwright-bdd';

const { Given, When, Then } = createBdd();

Given('estoy en la pagina de login', async ({ page }) => {
  await page.goto('/login');
});

When('hago login con {string} y {string}', async ({ page }, email, password) => {
  await page.fill('#email', email);
  await page.fill('#password', password);
  await page.click('#submit');
});

Then('deberia ver el dashboard', async ({ page }) => {
  await page.waitForURL('/dashboard');
});

const { Before, After } = require('@cucumber/cucumber');

Before(async function (scenario) {
  console.log(`Iniciando: ${scenario.pickle.name}`);
  this.page = await this.browser.newPage();
});

After(async function (scenario) {
  if (scenario.result.status === 'FAILED') {
    await this.page.screenshot({
      path: `screenshots/${scenario.pickle.name}.png`
    });
  }
  await this.page.close();
});