Trabajar con tablas en Cypress es una de esas tareas que parecen complicadas hasta que entiendes cómo navegar entre filas, encabezados y celdas. Aquí aprenderás cómo extraer información de una tabla HTML, contar filas, validar texto y aplicar aserciones usando comandos como find, each, eq e invoke, ideales para automatizar pruebas en interfaces web reales.

¿Cómo seleccionar una tabla HTML en Cypress?

Lo primero es identificar la tabla con un selector confiable. En el ejemplo trabajamos con la página de W3Schools que contiene una tabla con el id customers, lo que facilita encontrarla con cy.get('#customers').

A partir de ahí, todo el flujo de validación se construye encadenando comandos. La tabla tiene tres encabezados visibles: Company, Contact y Country, y varias filas con datos de clientes.

¿Qué hace cy.get en Cypress? Selecciona uno o más elementos del DOM usando un selector CSS. Es el punto de entrada para casi cualquier interacción o aserción.

¿Cómo recorrer los encabezados de una tabla con each?

Para iterar sobre los th de la tabla, encadena find('th') seguido de each. El comando each recibe una función que entrega el elemento, el índice y la lista, aunque normalmente solo necesitas el elemento.

javascript cy.get('#customers').find('th').each((element) => { cy.log(element.text()); });

Este bloque imprime en consola Company, Contact y Country, uno por uno. Es útil cuando necesitas inspeccionar contenido dinámico o validar que existan ciertos encabezados.

¿Cómo validar un encabezado específico de la tabla?

Cuando solo te interesa un elemento concreto, Cypress ofrece dos atajos muy prácticos: first para el primer elemento y eq(index) para una posición específica.

Para validar el primer encabezado, encadena find('th').first().invoke('text').should('equal', 'Company'). La aserción should('equal', ...) confirma que el texto coincide exactamente con el esperado.

¿Para qué sirve invoke en Cypress? Ejecuta una función sobre el elemento seleccionado, como text() para obtener su contenido. Es el puente entre el elemento del DOM y una aserción sobre su valor.

Si necesitas el segundo o tercer encabezado, cambia el índice con eq:

• eq(0) valida que el texto sea Company.
• eq(1) valida que el texto sea Contact.
• eq(2) valida que el texto sea Country.

Cada índice apunta a una posición distinta del header, y la aserción cambia según lo que quieras comprobar.

¿Cómo contar filas y validar celdas en una tabla?

Contar filas es directo: usa find('tr') para obtener todas las filas y aplica la aserción should('have.length', 7) si esperas exactamente siete filas. En la tabla del ejemplo, esa es la cantidad real, así que la prueba pasa sin problema.

Para validar el contenido de una celda específica, encadena los selectores hasta llegar al td que te interesa. El patrón es claro: tabla, fila, celda.

javascript cy.get('#customers') .find('tr').eq(1) .find('td').eq(1) .invoke('text') .should('equal', 'Maria Anders');

Aquí entras a la fila uno, después a la celda uno dentro de esa fila, obtienes su texto e invocas la aserción. Maria Anders es el nombre que aparece en esa posición y la prueba lo confirma.

¿Cuál es la diferencia entre should y then para aserciones?

Cypress permite dos estilos de aserción que dan el mismo resultado, pero se leen distinto. El primero usa invoke('text').should('equal', ...) y es más compacto.

El segundo usa then para acceder al elemento y guardar el texto en una constante:

javascript .then((element) => { const texto = element.text(); expect(texto).to.equal('Maria Anders'); });

Ambos estilos validan lo mismo. Elige el que te resulte más legible según el contexto: should para aserciones rápidas, then cuando necesitas manipular el valor antes de validarlo.

Habilidades y conceptos clave de la clase

Estos son los comandos y técnicas que aparecen a lo largo del recorrido y que conviene tener a mano cuando automatices tablas.

• cy.get('#id'): selecciona la tabla por su identificador, base de todo el flujo [0:35].
• find('th') y find('tr'): navegan dentro de la tabla buscando encabezados o filas [0:55].
• each((element) => {...}): recorre cada elemento de una colección, ideal para inspeccionar headers [1:10].
• first() y eq(index): acceden al primer elemento o a uno por posición [1:55].
• invoke('text'): extrae el contenido textual del elemento seleccionado [2:15].
• should('equal', valor): aserción inline que compara el resultado con un texto esperado [2:25].
• should('have.length', n): valida la cantidad de elementos encontrados, útil para contar filas [3:30].
• then con expect(...).to.equal(...): estilo alternativo de aserción para mayor control [4:50].

Con estas piezas puedes recorrer cualquier tabla HTML, validar su estructura y comprobar valores específicos sin esfuerzo. ¿Has automatizado tablas más complejas con filtros o paginación? Cuéntame en los comentarios cómo resolviste la navegación entre celdas.