Matriz de Pruebas Cross-Browser: Guía Completa para Estrategia de Testing Multi-Navegador

# MATRIZ DE PRUEBAS CROSS-BROWSER

## Proyecto: Plataforma E-Commerce
## Ciclo de Pruebas: Release 3.2.0
## Fecha: 8 de Octubre, 2025
## Líder de Pruebas: Sarah Johnson

### Navegadores de Escritorio

| Funcionalidad | Chrome 119 Win | Chrome 119 Mac | Safari 17 Mac | Firefox 120 Win | Edge 119 Win | Estado | Problemas |
|---------------|----------------|----------------|---------------|-----------------|--------------|--------|-----------|
| Carga Homepage | ✓ PASA | ✓ PASA | ✓ PASA | ✓ PASA | ✓ PASA | 100% | - |
| Login Usuario | ✓ PASA | ✓ PASA | ⚠ AVISO | ✓ PASA | ✓ PASA | 80% | BUG-3421 |
| Búsqueda Producto | ✓ PASA | ✓ PASA | ✓ PASA | ✗ FALLA | ✓ PASA | 80% | BUG-3422 |
| Agregar Carrito | ✓ PASA | ✓ PASA | ✓ PASA | ✓ PASA | ✓ PASA | 100% | - |
| Flujo Checkout | ✓ PASA | ⚠ AVISO | ✓ PASA | ✓ PASA | ✓ PASA | 80% | BUG-3423 |
| Procesamiento Pago | ✓ PASA | ✓ PASA | ✓ PASA | ✓ PASA | ✓ PASA | 100% | - |
| Confirmación Pedido | ✓ PASA | ✓ PASA | ✓ PASA | ✓ PASA | ✓ PASA | 100% | - |
| Dashboard Usuario | ✓ PASA | ✓ PASA | ⚠ AVISO | ✓ PASA | ✓ PASA | 80% | BUG-3424 |
| Animaciones CSS | ✓ PASA | ✓ PASA | ✓ PASA | ⚠ AVISO | ✓ PASA | 80% | BUG-3425 |
| Diseño Responsivo | ✓ PASA | ✓ PASA | ✓ PASA | ✓ PASA | ✓ PASA | 100% | - |

### Navegadores Móviles

| Funcionalidad | Chrome Android 13 | Safari iOS 17 | Samsung Internet | Firefox Android | Estado | Problemas |
|---------------|-------------------|---------------|------------------|-----------------|--------|-----------|
| Carga Homepage | ✓ PASA | ✓ PASA | ✓ PASA | ✓ PASA | 100% | - |
| Navegación Táctil | ✓ PASA | ⚠ AVISO | ✓ PASA | ✓ PASA | 75% | BUG-3426 |
| Checkout Móvil | ✓ PASA | ✓ PASA | ✗ FALLA | ✓ PASA | 75% | BUG-3427 |
| Gestos Swipe | ✓ PASA | ✓ PASA | ✓ PASA | ⚠ AVISO | 75% | BUG-3428 |
| Integración Cámara | ✓ PASA | ✓ PASA | ✓ PASA | ✓ PASA | 100% | - |
| Servicios Ubicación | ✓ PASA | ⚠ AVISO | ✓ PASA | ✓ PASA | 75% | BUG-3429 |

### Leyenda
- ✓ PASA: Funcionalidad funciona según esperado
- ⚠ AVISO: Problemas menores, no bloquea uso
- ✗ FALLA: Fallo crítico, bloquea funcionalidad
- N/P: No Probado
- N/A: No Aplicable

### Resultados Generales
- **Total Casos de Prueba**: 16
- **Pasados**: 42 (75%)
- **Avisos**: 10 (18%)
- **Fallados**: 4 (7%)
- **No Probados**: 0
- **Estado General**: ⚠ NECESITA ATENCIÓN

## BUG-3422: Autocompletado de Búsqueda de Producto Falla en Firefox

### Entorno
- **Navegador**: Firefox 120.0
- **SO**: Windows 11
- **Resolución**: 1920x1080
- **Zoom**: 100%

### Descripción
El dropdown de autocompletado de búsqueda de productos no aparece al escribir en Firefox. La búsqueda aún funciona al presionar Enter, pero las sugerencias dinámicas no se muestran.

### Comportamiento Esperado
A medida que el usuario escribe el nombre del producto, las sugerencias de autocompletado deberían aparecer en un dropdown debajo del campo de búsqueda, mostrando productos coincidentes con imágenes y precios.

### Comportamiento Actual
No aparece dropdown. La consola muestra error:
```javascript
TypeError: Cannot read properties of undefined (reading 'matches')
    at autocomplete.js:45:22

// Código actual (falla en Firefox)
if (CSS.supports('selector(:has(input))')) {
  // Lógica de autocompletado
}

// Firefox no soporta :has() en verificación CSS.supports

// Código actualizado (compatible cross-browser)
function soportaHas() {
  try {
    document.querySelector(':has(input)');
    return true;
  } catch {
    return false;
  }
}

if (soportaHas()) {
  // Lógica de autocompletado
}

# docker-compose.yml para Selenium Grid
version: '3'
services:
  selenium-hub:
    image: selenium/hub:latest
    ports:
      - "4444:4444"

  chrome:
    image: selenium/node-chrome:latest
    depends_on:
      - selenium-hub
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443

  firefox:
    image: selenium/node-firefox:latest
    depends_on:
      - selenium-hub
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443

  edge:
    image: selenium/node-edge:latest
    depends_on:
      - selenium-hub
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443

// prueba-cross-browser.js
const { Builder, By, until } = require('selenium-webdriver');

const navegadores = ['chrome', 'firefox', 'MicrosoftEdge', 'safari'];

async function ejecutarPruebasCrossBrowser(nombreNavegador) {
  let driver = await new Builder()
    .forBrowser(nombreNavegador)
    .usingServer('http://localhost:4444/wd/hub')
    .build();

  const resultados = {
    navegador: nombreNavegador,
    pruebas: []
  };

  try {
    // Prueba 1: Carga de Homepage
    await driver.get('https://example.com');
    await driver.wait(until.titleIs('Example Store'), 5000);
    resultados.pruebas.push({ nombre: 'Carga Homepage', estado: 'PASA' });

    // Prueba 2: Búsqueda de Producto
    const cajaBusqueda = await driver.findElement(By.id('search'));
    await cajaBusqueda.sendKeys('camisa azul');
    await driver.sleep(1000);

    const sugerencias = await driver.findElements(By.className('autocomplete-item'));
    if (sugerencias.length > 0) {
      resultados.pruebas.push({ nombre: 'Autocompletado', estado: 'PASA' });
    } else {
      resultados.pruebas.push({ nombre: 'Autocompletado', estado: 'FALLA' });
    }

    // Prueba 3: Agregar al Carrito
    await driver.get('https://example.com/product/123');
    const botonAgregar = await driver.findElement(By.id('add-to-cart'));
    await botonAgregar.click();

    await driver.wait(until.elementLocated(By.className('cart-notification')), 5000);
    resultados.pruebas.push({ nombre: 'Agregar al Carrito', estado: 'PASA' });

    // Prueba 4: Diseño Responsivo
    await driver.manage().window().setRect({ width: 375, height: 812 });
    await driver.sleep(500);

    const menuMovil = await driver.findElement(By.className('mobile-menu'));
    if (await menuMovil.isDisplayed()) {
      resultados.pruebas.push({ nombre: 'Móvil Responsivo', estado: 'PASA' });
    } else {
      resultados.pruebas.push({ nombre: 'Móvil Responsivo', estado: 'FALLA' });
    }

  } catch (error) {
    resultados.pruebas.push({
      nombre: 'Error',
      estado: 'FALLA',
      error: error.message
    });
  } finally {
    await driver.quit();
  }

  return resultados;
}

// Ejecutar pruebas en todos los navegadores
async function ejecutarTodasPruebas() {
  const todosResultados = [];

  for (const navegador of navegadores) {
    console.log(`Probando en ${navegador}...`);
    const resultado = await ejecutarPruebasCrossBrowser(navegador);
    todosResultados.push(resultado);
    console.log(`${navegador}: ${resultado.pruebas.filter(p => p.estado === 'PASA').length}/${resultado.pruebas.length} pasados`);
  }

  // Generar reporte
  generarReporte(todosResultados);
}

function generarReporte(resultados) {
  console.log('\n=== REPORTE DE PRUEBAS CROSS-BROWSER ===\n');

  resultados.forEach(resultadoNavegador => {
    console.log(`${resultadoNavegador.navegador}:`);
    resultadoNavegador.pruebas.forEach(prueba => {
      console.log(`  ${prueba.estado} - ${prueba.nombre}`);
    });
    console.log('');
  });

  const totalPruebas = resultados.reduce((sum, r) => sum + r.pruebas.length, 0);
  const pruebasPasadas = resultados.reduce(
    (sum, r) => sum + r.pruebas.filter(p => p.estado === 'PASA').length,
    0
  );

  console.log(`General: ${pruebasPasadas}/${totalPruebas} pasados (${Math.round(pruebasPasadas/totalPruebas*100)}%)`);
}

ejecutarTodasPruebas();

/* CSS Moderno con fallbacks */

/* Grid con fallback flexbox */
.product-grid {
  display: flex; /* Fallback */
  flex-wrap: wrap;
  gap: 20px; /* Navegadores modernos */
}

@supports (display: grid) {
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }
}

/* CSS Variables con fallback */
.button {
  background-color: #007bff; /* Fallback */
  background-color: var(--primary-color, #007bff);
  color: white;
}

/* WebP con fallback JPEG */
.hero-image {
  background-image: url('hero.jpg'); /* Fallback */
}

.supports-webp .hero-image {
  background-image: url('hero.webp');
}

/* Correcciones específicas Safari */
@supports (-webkit-appearance: none) {
  input[type="search"] {
    -webkit-appearance: textfield;
  }
}

/* Correcciones específicas Firefox */
@-moz-document url-prefix() {
  .form-field {
    padding: 10px;
  }
}

# .github/workflows/cross-browser-tests.yml
name: Pruebas Cross-Browser

on:
  pull_request:
    branches: [main]
  schedule:
    - cron: '0 0 * * *' # Diario

jobs:
  cross-browser-tests:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        browser: [chrome, firefox, edge]
        resolution: ['1920x1080', '1366x768', '375x812']

    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Instalar dependencias
        run: npm install

      - name: Iniciar Selenium Grid
        run: docker-compose up -d

      - name: Esperar Grid
        run: sleep 10

      - name: Ejecutar pruebas
        run: npm run test:cross-browser -- --browser=${{ matrix.browser }} --resolution=${{ matrix.resolution }}

      - name: Subir screenshots
        if: failure()
        uses: actions/upload-artifact@v2
        with:
          name: screenshots-${{ matrix.browser }}-${{ matrix.resolution }}
          path: screenshots/

      - name: Detener Selenium Grid
        if: always()
        run: docker-compose down