HTML, CSS y JavaScript para Testers

Por qué los testers necesitan conocimiento de frontend #

No necesitas convertirte en un developer frontend. Pero necesitas hablar lo suficiente del lenguaje para tener conversaciones productivas con los developers, escribir reportes de bugs precisos y entender lo que estás probando.

Cuando un tester dice “el botón está en el lugar equivocado,” un developer tiene que adivinar qué está pasando. Cuando un tester dice “el botón de submit tiene margin-top: 0 en vez de margin-top: 16px, causando que se superponga con el campo del formulario en pantallas más angostas que 768px,” el developer puede corregirlo en segundos.

Esta lección te enseña el conocimiento mínimo de frontend que entrega el máximo valor para testing.

HTML: La estructura #

HTML (HyperText Markup Language) define la estructura y el contenido de una página web. Piensa en él como el esqueleto de la página.

Elementos HTML esenciales para testing #

<!-- Los headings definen la estructura del documento -->
<h1>Título principal</h1>
<h2>Título de sección</h2>

<!-- Párrafos y texto -->
<p>Este es un párrafo de texto.</p>
<span>Elemento de texto inline</span>

<!-- Links -->
<a href="https://example.com" target="_blank">Haz clic aquí</a>

<!-- Imágenes -->
<img src="foto.jpg" alt="Descripción de la imagen">

<!-- Formularios -->
<form action="/submit" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Enviar</button>
</form>

<!-- Listas -->
<ul>
  <li>Elemento no ordenado</li>
</ul>
<ol>
  <li>Elemento ordenado</li>
</ol>

<!-- Contenedores -->
<div class="wrapper">Contenedor de bloque</div>
<section>Sección semántica</section>
<nav>Área de navegación</nav>
<footer>Área de pie de página</footer>

Qué deben verificar los testers en HTML #

Corrección semántica: ¿Los headings se usan en orden correcto (h1, luego h2, sin saltar a h4)? Esto afecta la accesibilidad y el SEO.

Atributos de formularios: ¿Cada input tiene un label? ¿Los atributos required están configurados en campos obligatorios? ¿Se usa el type correcto (email, number, tel)?

Integridad de links: ¿Los atributos href apuntan a URLs válidas? ¿Los links externos tienen target="_blank" con rel="noopener noreferrer" por seguridad?

Accesibilidad de imágenes: ¿Cada <img> tiene un atributo alt significativo? Esto no es solo buena práctica — es un requisito legal en muchas jurisdicciones.

Atributos de datos: Los frameworks modernos usan data-testid o atributos similares para automatización de tests. Verifica que existan donde se necesiten.

El DOM: HTML en memoria #

Cuando el navegador carga HTML, crea el DOM (Document Object Model) — una estructura de árbol viva en memoria. JavaScript puede modificar el DOM, razón por la cual las páginas cambian sin recargarse.

Entender el DOM importa porque:

• El código fuente HTML y el DOM vivo pueden ser diferentes (JavaScript lo modifica)
• Las herramientas de testing automatizado interactúan con el DOM, no con el HTML fuente
• “Ver código fuente” muestra el HTML original; la pestaña Elements de DevTools muestra el DOM vivo

CSS: La presentación #

CSS (Cascading Style Sheets) controla cómo lucen los elementos HTML — colores, tamaños, posiciones, animaciones y comportamiento responsivo.

Conceptos de CSS que los testers deben conocer #

El Box Model: Cada elemento es una caja con content, padding, border y margin. La mayoría de los bugs de layout se remontan a valores incorrectos del box model.

+---------------------------+
|         margin            |
|  +---------------------+ |
|  |      border          | |
|  |  +-----------------+ | |
|  |  |    padding       | | |
|  |  |  +-----------+  | | |
|  |  |  |  content  |  | | |
|  |  |  +-----------+  | | |
|  |  +-----------------+ | |
|  +---------------------+ |
+---------------------------+

Tipos de display: Los elementos block toman todo el ancho, los elementos inline fluyen con el texto, flex y grid crean layouts modernos.

Posicionamiento: static (predeterminado), relative, absolute, fixed, sticky — cada uno cambia cómo un elemento se ubica en la página.

Media queries: Reglas que aplican estilos basados en el tamaño de pantalla. Así funciona el diseño responsivo.

/* Estilos para pantallas más angostas que 768px */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-content { width: 100%; }
}

Bugs comunes de CSS para observar #

JavaScript: El comportamiento #

JavaScript hace las páginas web interactivas — maneja clics, valida formularios, obtiene datos, actualiza la página sin recargar.

Conceptos de JavaScript para testers #

Manejo de eventos: Cuando un usuario hace clic en un botón, JavaScript captura el evento y ejecuta código. Los bugs ocurren cuando los event handlers faltan, están adjuntos al elemento equivocado o se disparan múltiples veces.

Operaciones asíncronas: Las llamadas API, timers y animaciones son asíncronas — no se ejecutan instantáneamente. Muchos bugs ocurren porque el código se ejecuta antes de que lleguen los datos.

// Este es un patrón de bug común:
const data = fetchUserData(); // Retorna una Promise, no datos
console.log(data.name); // Error: data es un objeto Promise

// Enfoque correcto:
const data = await fetchUserData(); // Espera los datos
console.log(data.name); // Funciona correctamente

Gestión de estado: Los frameworks modernos (React, Vue, Angular) gestionan el estado de la aplicación. Cuando el estado se actualiza incorrectamente, la UI muestra información incorrecta — datos obsoletos, elementos fantasma o actualizaciones faltantes.

Usando la consola del navegador #

La consola es tu superpoder de testing. Ábrela con F12 o Cmd+Option+J (Mac) / Ctrl+Shift+J (Windows).

Verificar errores: Los mensajes rojos en la consola indican errores de JavaScript. Estos son bugs, incluso si la página se ve bien.

Consultar elementos: Usa document.querySelector('.button-class') para encontrar elementos programáticamente.

Monitorear red: Los console.log de la aplicación revelan el flujo de datos.

Probar interacciones: Puedes ejecutar JavaScript directamente para disparar acciones, cambiar valores o inspeccionar el estado de la aplicación.

// Encontrar todas las imágenes rotas en una página
document.querySelectorAll('img').forEach(img => {
  if (!img.complete || img.naturalWidth === 0) {
    console.log('Imagen rota:', img.src);
  }
});

Práctica: Inspeccionando una página web real #

Practiquemos las habilidades de esta lección en una página web real.

Ejercicio 1: Inspección HTML #

Abre cualquier sitio web y usa DevTools (F12 > pestaña Elements):

1. Haz clic derecho en el heading principal y selecciona “Inspeccionar.” Nota el tag HTML (h1, h2, etc.)
2. Encuentra un formulario en la página. Verifica cada input:
   • ¿Tiene un elemento label?
   • ¿El atributo type es correcto (email, password, number)?
   • ¿Están configurados los atributos required, minlength o maxlength?
3. Encuentra una imagen. Verifica si tiene un atributo alt significativo
4. Haz clic derecho en un link. Verifica si href apunta a un destino válido

Documenta cada hallazgo como lo harías en un reporte de bugs.

Ejercicio 2: Investigación CSS #

Usando la misma página:

1. En DevTools, selecciona un elemento y mira el panel Styles a la derecha
2. Activa/desactiva propiedades CSS haciendo clic en el checkbox junto a cada regla
3. Cambia un valor de margin o padding y observa el efecto
4. Redimensiona la ventana del navegador a diferentes anchos (1200px, 768px, 375px) y nota cualquier cambio de layout
5. Busca elementos que se desborden de sus contenedores o se superpongan con otros elementos

Ejercicio 3: Exploración de la consola JavaScript #

Abre la pestaña Console en DevTools:

1. Escribe document.title y presiona Enter — esto muestra el título de la página
2. Escribe document.querySelectorAll('a').length — esto cuenta todos los links en la página
3. Escribe document.querySelectorAll('img[alt=""]').length — esto cuenta imágenes con atributos alt vacíos
4. Verifica errores en la consola (mensajes rojos). Cada error es un bug potencial
5. Prueba esta verificación de accesibilidad:

// Encontrar elementos interactivos sin nombres accesibles
document.querySelectorAll('button, a, input').forEach(el => {
  const name = el.textContent.trim() || el.getAttribute('aria-label') || el.getAttribute('alt') || '';
  if (!name) console.warn('Sin nombre accesible:', el.tagName, el.className);
});

Ejercicio 4: Identificando un bug de frontend #

Aquí hay un escenario común. Un usuario reporta: “El precio muestra $NaN en la página del producto.”

Para investigar:

1. Abre la consola — busca errores JavaScript
2. Encuentra el elemento del precio en el DOM — ¿cuál es su contenido de texto?
3. Busca en la pestaña Network el response del API — ¿contiene datos de precio válidos?
4. Verifica si JavaScript está parseando el precio correctamente (string vs. number)

El bug podría ser:

• Backend: El API retorna el precio como string “19.99” pero el frontend espera un number
• Frontend: JavaScript usa parseInt en vez de parseFloat, perdiendo decimales
• Datos: El producto no tiene precio configurado en la base de datos, retornando null

Tu investigación determina quién debe corregirlo.

Tips profesionales para testing frontend #

Tip 1: Siempre revisa la consola. Incluso si la página se ve bien, los errores en consola indican problemas. Advertencias de performance, avisos de deprecación y requests de red fallidos aparecen aquí.

Tip 2: Usa emulación de dispositivos. DevTools tiene una barra de dispositivos (Ctrl+Shift+M) que simula diferentes tamaños de pantalla y dispositivos. Prueba en breakpoints estándar: 320px, 375px, 768px, 1024px, 1440px.

Tip 3: Deshabilita JavaScript. En la configuración de DevTools, puedes deshabilitar JavaScript para probar el comportamiento de la página sin él. ¿La página muestra contenido? ¿Los formularios degradan correctamente? Esto prueba accesibilidad y SEO.

Tip 4: Verifica la carga de fuentes. Las conexiones lentas pueden mostrar un destello de texto sin estilos (FOUT) o texto invisible (FOIT) mientras cargan las fuentes personalizadas. Prueba con throttling de red habilitado.

Tip 5: Inspecciona estados hover y focus. En el panel Elements de DevTools, usa el botón :hov para forzar estados hover, focus, active y visited. Verifica que todos los elementos interactivos tengan indicadores de focus visibles para la navegación por teclado.

Puntos clave #

• HTML define la estructura — los testers deben verificar corrección semántica, atributos de formularios y accesibilidad
• CSS controla la presentación — los bugs comunes involucran overflow, z-index, alineación y breakpoints responsivos
• JavaScript agrega interactividad — observa errores async, bugs de manejo de eventos y problemas de gestión de estado
• El DOM es la representación viva de la página con la que interactúan las herramientas de testing
• La consola del navegador revela errores invisibles para los usuarios y es esencial para debugging efectivo
• No necesitas escribir código de producción, pero leer y entender código frontend te hace un tester significativamente más efectivo