Playwright Tests — Hawkers / Northweek

Tests automatizados end-to-end para los e-commerces de Hawkers y Northweek. Usa Playwright con TypeScript.

1. Estructura del proyecto

playwright-tests/
├── src/
│   ├── config/
│   │   └── env.ts                  # Lógica de entornos y base URLs
│   ├── constants/
│   │   ├── countries.ts            # Lista de países soportados
│   │   ├── devices.ts              # Definición de dispositivos
│   │   └── exclusions.ts           # Países/SKUs excluidos por test
│   ├── pages/                      # Page Object Models (POM)
│   │   ├── cart.ts
│   │   ├── checkout-page.ts
│   │   ├── collaborations-page.ts
│   │   ├── hellobar.ts
│   │   ├── home-page.ts
│   │   ├── place-order-page.ts
│   │   ├── promotions-page.ts
│   │   ├── sunglasses-page.ts
│   │   ├── thank-you-page.ts
│   │   └── hawkers213/             # POMs específicos del catálogo 2.1.3
│   │       ├── home-page.ts
│   │       ├── hoodies.ts
│   │       ├── longsleeve.ts
│   │       ├── pants.ts
│   │       ├── polos.ts
│   │       └── tees.ts
│   ├── reporters/
│   │   └── SlackReporter.ts        # Reporter personalizado para Slack
│   └── utils/
│       ├── context.ts              # Gestión de contexto de browser/página
│       ├── files.ts                # Operaciones de ficheros
│       ├── generate-date.ts        # Formateo de fechas para nombres de fichero
│       ├── screenshots.ts          # Captura y guardado de screenshots
│       ├── promo-report.ts         # Generador de informe visual de promos
│       ├── generate-pdp-report.ts  # Generador de informe de PDP
│       ├── hawkers213-report.ts    # Generador de informe de Hawkers 2.1.3
│       └── promo-sheet.ts          # Integración con Google Sheets
├── tests/
│   ├── hawkers/                    # Tests de la marca Hawkers (principal)
│   │   ├── smoke/                  # Flujos críticos de pago (4 métodos)
│   │   ├── regression/             # Regresión completa (navegación, carrito, PDP...)
│   │   ├── cart-promos.spec.ts     # Tests data-driven vía Google Sheets
│   │   ├── collabs/                # Tests de páginas de colaboraciones
│   │   ├── flash-sale/             # Tests de Flash Sale
│   │   ├── promo-2x1/              # Promoción 2x1
│   │   ├── promo-2x1-FS/           # Promoción 2x1 + Flash Sale
│   │   ├── promo-3x1/              # Promoción 3x1
│   │   ├── promo-3x1-FS/           # Promoción 3x1 + Flash Sale
│   │   ├── promo-desde-20-eur/     # Promoción "Desde 20€"
│   │   ├── promo-hasta-50/         # Promoción "Hasta 50%"
│   │   ├── promo-hasta-60/         # Promoción "Hasta 60%"
│   │   ├── promo-hasta-70/         # Promoción "Hasta 70%"
│   │   ├── promo-rebajas-2-60/     # Promoción Rebajas (2ª ud. -60%)
│   │   ├── promo1-30-2-50/         # 1ª ud. -30%, 2ª ud. -50%
│   │   ├── promo1-40-2-60/         # 1ª ud. -40%, 2ª ud. -60%
│   │   ├── promo1-50-2-60/         # 1ª ud. -50%, 2ª ud. -60%
│   │   └── promo-factory.ts        # Utilidades compartidas para tests de promos
│   ├── hawkers213/                 # Tests para el catálogo nuevo (v2.1.3)
│   │   ├── plp/                    # Tests de Product List Page por categoría
│   │   └── regression/             # Flujo de compra con Stripe
│   ├── northweek/                  # Tests de la marca Northweek
│   │   ├── promo-2x1/
│   │   ├── promo1-35-2-50/
│   │   ├── promo1-40-2-60/
│   │   └── regression/             # Flujos de compra (Stripe, multi-browser)
│   ├── images-validation/          # Validación de imágenes de producto
│   └── performance/                # Tests de rendimiento (PLP personalizada)
├── jenkins/                        # Scripts de CI/CD
├── scripts/
│   └── upload-to-gcs.sh            # Subida de informes a Google Cloud Storage
├── Dockerfile
├── Jenkinsfile
├── playwright.config.ts
├── package.json
└── tsconfig.json

2. Requisitos

Node.js >= 18.x
npm >= 9.x
Acceso a las variables de entorno del proyecto (ver sección siguiente)
(Opcional) Credenciales de Google Sheets para tests data-driven

3. Instalación

# 1. Clonar el repositorio
git clone <repo-url>
cd playwright-tests

# 2. Instalar dependencias de Node
npm install

# 3. Instalar los browsers de Playwright
npx playwright install

4. Variables de entorno

Crear un fichero .env en la raíz del proyecto. No existe .env.example en el repo; pedir las variables al equipo. Las principales son:

Variable	Valores posibles	Descripción
`ENVIRONMENT`	`staging`, `production`, `dev`, `northweekstg`, `northweekprod`	Entorno de ejecución
`AUTH_USERNAME`	string	Usuario para HTTP Basic Auth (staging/dev)
`AUTH_PASSWORD`	string	Contraseña para HTTP Basic Auth (staging/dev)

URLs por entorno (definidas en playwright.config.ts):

Entorno	URL
`staging`	`https://staging.hawkersco.com`
`production`	`https://www.hawkersco.com`
`dev`	`https://developmentsfcc.hawkersco.com`
`northweekstg`	`https://northweekstaging.hawkersco.com`
`northweekprod`	`https://www.northweek.com`

caution

Los entornos staging, dev y northweekstg requieren Basic Auth. Si AUTH_USERNAME y AUTH_PASSWORD no están configurados, los tests fallarán con 401.

5. Configuración de Playwright

El fichero playwright.config.ts es el punto central de configuración:

Parámetro	Valor
Timeout global	120 segundos por test
Timeout de expect	10 segundos
Reintentos	2 en CI, 0 en local
Workers	2 en CI, sin límite en local
Ejecución paralela	Activada por defecto

Imports con alias

El proyecto usa alias de imports definidos en package.json:

import { HomePage } from '#pages/home-page';
import { countries } from '#constants/countries';
import { getBaseUrl } from '#config/env';

6. Ejecutar tests

# Todos los tests
npx playwright test

# Un fichero específico
npx playwright test tests/hawkers/smoke/stripe-purchase-flows.spec.ts

# Un proyecto específico (ver sección de proyectos)
npx playwright test --project=hawkers-smoke

# Modo UI (debug visual)
npx playwright test --ui

# Modo headed (ver el browser)
npx playwright test --headed

# Ver el último informe HTML generado
npx playwright show-report

7. Proyectos de test

Playwright está configurado con 8 proyectos. Cada proyecto define qué tests ejecuta y en qué browser/dispositivo:

Proyecto	Browser/Dispositivo	Tests
`hawkers-smoke`	Chromium (iPhone 14 Pro Max)	`tests/hawkers/smoke/`
`hawkers213-smoke`	Chromium (iPhone 14 Pro Max)	`tests/hawkers213/smoke/`
`northweek-smoke`	Chromium (iPhone 14 Pro Max)	`tests/northweek/smoke/`
`hawkers-full`	Chromium (iPhone 14 Pro Max)	`tests/hawkers/` (excluye smoke)
`hawkers213-full`	Chromium (iPhone 14 Pro Max)	`tests/hawkers213/` (excluye smoke)
`northweek-full`	Chromium (iPhone 14 Pro Max)	`tests/northweek/` (excluye smoke)
`northweek-firefox`	Firefox Desktop	`tests/northweek/` (excluye smoke)
`northweek-webkit`	Safari Desktop	`tests/northweek/` (excluye smoke)

tip

Los proyectos *-smoke se ejecutan primero en CI para detectar bloqueadores críticos rápidamente.

8. Cobertura de tests

8.1 Smoke tests (`tests/hawkers/smoke/`)

Tests críticos de flujo de compra completo. Uno por método de pago:

Fichero	Método de pago
`stripe-purchase-flows.spec.ts`	Tarjeta (Stripe)
`paypal-purchase-flows.spec.ts`	PayPal
`bizum-purchase-flows.spec.ts`	Bizum
`revolut-purchase-flows.spec.ts`	Revolut

Flujo típico: PLP → PDP → carrito → checkout → pago → página de confirmación.

8.2 Regression tests (`tests/hawkers/regression/`)

Validación de funcionalidades core del site:

Fichero	Qué valida
`cart-flow.spec.ts`	Añadir/quitar productos, cantidades en carrito
`menu-navigation.spec.ts`	Navegación por menú principal
`navigation-flow.spec.ts`	Flujos de navegación entre páginas
`pdp-flow.spec.ts`	Página de detalle de producto
`plp-pagination.spec.ts`	Paginación en listados
`search-flow.spec.ts`	Buscador
`footer-links.spec.ts`	Links del footer

8.3 Tests de promociones (`tests/hawkers/promo-*/`)

Cada carpeta de promoción contiene 4 specs con el mismo patrón:

Fichero	Qué valida
`home-*.spec.ts`	Banners/badges de promo en home y hello bar
`plp-*.spec.ts`	Badges de descuento en Product List Page
`pdp-*.spec.ts`	Precio tachado y precio con descuento en PDP
`cart-*.spec.ts`	Recálculo correcto del precio total en carrito

Los tests iteran sobre múltiples países (ver src/constants/countries.ts). Países soportados: España, Alemania, Francia, Italia, Portugal, Reino Unido, Bélgica, Polonia, Rumanía, Países Bajos, Suecia, Dinamarca, Grecia, Luxemburgo, México, Colombia, Australia, USA.

8.4 Tests data-driven con Google Sheets (`cart-promos.spec.ts`)

Lee en tiempo real la hoja de cálculo interna "actual-promo" de Google Sheets. Para cada fila:

Obtiene el SKU y la promo activa
Busca el SKU en el site
Lo añade al carrito
Valida que el badge/etiqueta de la promoción aparece correctamente

Para actualizar qué productos valida este test, basta con modificar la hoja de cálculo sin tocar código. La integración con Sheets está en src/utils/promo-sheet.ts.

8.5 Tests Hawkers 2.1.3 (`tests/hawkers213/`)

Tests para el catálogo nuevo de Hawkers (ropa). PLP por categoría:

plp-eyewear.spec.ts
plp-hoodies.spec.ts
plp-tees.spec.ts
plp-polos.spec.ts
plp-pants.spec.ts
plp-longsleeve.spec.ts
plp-knitwear.spec.ts
plp-collection.spec.ts

Los POMs de estas páginas están en src/pages/hawkers213/.

8.6 Tests de Northweek (`tests/northweek/`)

Misma estructura que Hawkers pero para la marca Northweek. Se ejecutan además en Firefox y Safari (WebKit).

8.7 Tests de rendimiento (`tests/performance/`)

Fichero	Qué mide
`personalized-plp-order.spec.ts`	Tiempos de carga de la PLP personalizada
`performance-personalized-plp.spec.ts`	Validaciones adicionales de rendimiento

9. Page Object Models (POM)

Todos los POMs están en src/pages/. Encapsulan selectores y acciones sobre cada página.

important

Nunca poner selectores directamente en el spec. Siempre usar o extender un POM.

POM	Responsabilidad
`home-page.ts`	Home, hello bar, banners de promo
`sunglasses-page.ts`	PLP de gafas
`promotions-page.ts`	Páginas de promoción genéricas
`collaborations-page.ts`	Páginas de colaboraciones
`cart.ts`	Carrito: añadir productos, ver totales
`checkout-page.ts`	Formulario de checkout
`place-order-page.ts`	Paso de pago (Stripe, PayPal, Bizum…)
`thank-you-page.ts`	Página de confirmación de pedido
`hellobar.ts`	Barra superior de comunicación

10. Utilities

Utilidad	Ubicación	Función
Contexto de browser	`src/utils/context.ts`	Crear y reutilizar contextos entre tests
Screenshots	`src/utils/screenshots.ts`	Captura organizada por dispositivo y país
Fechas	`src/utils/generate-date.ts`	Formateo consistente para nombres de fichero
Google Sheets	`src/utils/promo-sheet.ts`	API de Sheets, hoja "actual-promo"
Informe promos	`src/utils/promo-report.ts`	HTML con screenshots de tests de promos
Informe PDP	`src/utils/generate-pdp-report.ts`	HTML específico para screenshots de PDP
Informe 2.1.3	`src/utils/hawkers213-report.ts`	`hw213-report.html` para catálogo 2.1.3
Promo factory	`tests/hawkers/promo-factory.ts`	Lógica compartida entre specs de promos

11. Informes y screenshots

Informe HTML de Playwright

npx playwright show-report

Abre el informe interactivo con detalle de cada test, trazas, screenshots y vídeos de los fallos.

Informes visuales personalizados

# Informe de promociones
npx ts-node src/utils/promo-report.ts

# Informe de PDP
npx ts-node src/utils/generate-pdp-report.ts

# Informe de Hawkers 2.1.3
npx ts-node src/utils/hawkers213-report.ts

Subir informe a GCS

npm run upload-report

Ejecuta scripts/upload-to-gcs.sh. Requiere credenciales de Google Cloud configuradas.

12. Añadir nuevos tests

Nuevo test de promoción

Crear carpeta en tests/hawkers/promo-<nombre>/
Copiar los 4 ficheros de una promo existente (ej. promo-hasta-50/) como plantilla
Renombrar y adaptar los specs al nuevo tipo de promoción
Si la lógica de validación es genérica, añadirla a tests/hawkers/promo-factory.ts
Verificar que los selectores del badge/etiqueta en los POMs son correctos

Nuevo test de regresión

Crear tests/hawkers/regression/<nombre>.spec.ts
Importar los POMs necesarios desde src/pages/
Seguir el patrón de test.describe / test.beforeAll / test.afterAll

Nuevo POM

Crear src/pages/<nombre-pagina>.ts
Exportar una clase con métodos para cada acción
Usar el alias #pages/<nombre-pagina> en los imports

Ejemplo de spec

import { test, expect } from '@playwright/test';
import { HomePage } from '#pages/home-page';
import { countries } from '#constants/countries';

for (const country of countries) {
  test.describe(`Mi test — ${country.name}`, () => {
    test.beforeAll(async ({ browser }) => {
      // setup
    });

    test('valida algo', async ({ page }) => {
      const homePage = new HomePage(page);
      await homePage.goto(country.locale);
      await expect(homePage.someElement).toBeVisible();
    });
  });
}

13. CI/CD — Jenkins

Pipeline definido en Jenkinsfile. Scripts auxiliares en jenkins/scripts/:

Script	Función
`npm.sh`	Instala dependencias
`test.sh`	Ejecuta los tests
`deployment.sh`	Despliegue del entorno
`push.sh`	Push de imágenes Docker
`clean.sh`	Limpieza de artefactos
`sonar.sh`	Análisis de calidad con SonarQube

El Dockerfile permite ejecutar los tests en contenedor. En CI: 2 workers, 2 reintentos automáticos en caso de fallo.

14. Troubleshooting

Test falla por timeout

Comprobar que el selector del POM sigue siendo válido en el site
Aumentar el timeout puntualmente con test.setTimeout(180_000)
Ejecutar en modo --headed para ver qué ocurre

Error 401 en staging

AUTH_USERNAME o AUTH_PASSWORD no están en el .env
Verificar que ENVIRONMENT apunta al entorno correcto

Screenshots no aparecen en el informe

Confirmar que los tests guardan screenshots en src/utils/reports/screenshots/
Verificar que el script generador apunta al mismo path

Tests de Google Sheets fallan

Verificar credenciales de la API de Google en .env
Comprobar que la hoja "actual-promo" tiene datos y el formato esperado (ver promo-sheet.ts)

Error de import con alias (#pages/...)

Confirmar que tsconfig.json tiene los paths configurados
En algunos contextos puede ser necesario usar rutas relativas

15. Contacto

QA: Iker Ortega — iker.ortega@hawkersgroup.com

1. Estructura del proyecto​

2. Requisitos​

3. Instalación​

4. Variables de entorno​

5. Configuración de Playwright​

Imports con alias​

6. Ejecutar tests​

7. Proyectos de test​

8. Cobertura de tests​

8.1 Smoke tests (tests/hawkers/smoke/)​

8.2 Regression tests (tests/hawkers/regression/)​

8.3 Tests de promociones (tests/hawkers/promo-*/)​

8.4 Tests data-driven con Google Sheets (cart-promos.spec.ts)​

8.5 Tests Hawkers 2.1.3 (tests/hawkers213/)​

8.6 Tests de Northweek (tests/northweek/)​

8.7 Tests de rendimiento (tests/performance/)​

9. Page Object Models (POM)​

10. Utilities​

11. Informes y screenshots​

Informe HTML de Playwright​

Informes visuales personalizados​

Subir informe a GCS​

12. Añadir nuevos tests​

Nuevo test de promoción​

Nuevo test de regresión​

Nuevo POM​

Ejemplo de spec​

13. CI/CD — Jenkins​

14. Troubleshooting​

15. Contacto​