No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Trabajando con tablas

19/23
Recursos

¿Cómo trabajar con tablas en HTML y Cypress?

Las tablas HTML son una parte esencial del desarrollo web y entender cómo interactuar con ellas utilizando Cypress puede mejorar significativamente tu capacidad para validar y extraer información de manera eficiente. A continuación, te explicaré paso a paso cómo lograrlo.

¿Cómo interactuar con tablas usando Cypress?

Para comenzar a trabajar con tablas en Cypress, es fundamental tener un acceso efectivo a los elementos de la tabla que quieres manipular. Veamos cómo hacerlo:

  1. Identificación de la tabla:

    • Usa el método c.get() de Cypress para seleccionar la tabla que quieres. Por ejemplo, si la tabla tiene un ID de customers, puedes seleccionarla así:
      c.get('#customers')
      
  2. Extracción de encabezados:

    • Para obtener los encabezados (th) de la tabla, utiliza el método find() junto con each() para iterar sobre ellos y extraer el texto. Esto es útil para validar que se despliegan correctamente.
      c.get('#customers').find('th').each((element) => {
        c.log(element.text());
      });
      

¿Cómo validar el contenido de las celdas?

Después de identificar y extraer los encabezados de la tabla, la validación del contenido de las celdas es el siguiente paso crucial.

  1. Validar un elemento específico:

    • Utiliza el método first() para obtener el primer elemento si deseas validar el encabezado inicial. Con invoke('text') puedes invocar el texto y verificar su contenido con should().
      c.get('#customers').find('th').first().invoke('text').should('equal', 'Company');
      
  2. Validar un elemento en una posición específica:

    • Si quieres validar un elemento en la segunda posición, utiliza eq(). Asegúrate de ajustar el texto que estás validando:
      c.get('#customers').find('th').eq(1).invoke('text').should('equal', 'Contact');
      

¿Cómo contar las filas y validar su contenido?

Contar el número de filas te puede ayudar en pruebas donde necesitas asegurar un número específico de datos.

  1. Contar filas en la tabla:

    • Usando find('tr'), puedes obtener todas las filas. Luego, validas su cantidad con should().
      c.get('#customers').find('tr').should('have.length', 7);
      
  2. Validar contenido específico en una fila:

    • Al igual que con los encabezados, puedes navegar por las filas y celdas utilizando find() y validar el texto.
      c.get('#customers').find('tr').eq(1).find('td').eq(1).invoke('text').should('equal', 'Maria Anders');
      

¿Qué otras metodologías existen para manejar celdas?

Además de invoke('text'), puedes emplear diferente sintaxis o métodos según tus necesidades individuales y preferencias.

  1. Usar Promesas con then():
    • Puedes usar then() para manejar el texto de forma diferente:
      c.get('#customers').find('tr').eq(1).find('td').eq(1).then((element) => {
        const text = element.text();
        expect(text).to.equal('Maria Anders');
      });
      

Interactuar con tablas en Cypress puede potenciar tus habilidades de prueba automatizada. Estos métodos te ofrecen la flexibilidad necesaria para asegurarte de que los datos insertados y representados en una página se gestionan correctamente. Recuerda que la práctica constante y la exploración de nuevas técnicas son claves para convertirte en un experto en la materia. ¡Sigue adelante y nunca dejes de aprender!

Aportes 3

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Colecciones

Complementando la sesión, anexo unos comandos que son comunes con el uso colecciones donde visualmente pudieran ser menús, tablas, o navegaciones.
.

.
Por ejemplo, tomando este snipped:

cy.get('#customers')
    .find('th')
    .eq(2)
    .invoke('text')
    .should('equal','Country')

Pudiéramos utilizar, contains y next para realizar una búsqueda similar:

cy.get('#customers')
   .contains('Contact')
   .next()
   .should('equal','Country')

Y además, tomando el find como una lista podríamos tener:

 cy.get('#customers')
    .find('th')
    .should('have.length', 3)

Diferencia entre Get y Find

📚 Documentación
.
El comando get inicia una búsqueda sobre los nodos principales para que con find empiece una búsqueda sobre la actual referencia.
.
Por ejemplo, dado el siguiente esquema:

<div class="test-title">cy.get vs .find</div>
<section id="comparison">
  <div class="feature">Both are querying commands</div>
</section>

Obtener el elemento div con clase feature

cy.get('#comparison')
  .find('div')
  .should('have.length', 1)
  .and('have.class', 'feature')

Delimitamos la búsqueda a partir del nodo #comparasion

.
Si del anterior, en vez de ocupar find se ocupa get, tendríamos un resultado donde poseeríamos tanto el div.test-title como div.feature.

Ejemplo Limpio:

describe("Tables", () => {
  it("tables", function () {
    cy.visit("https://www.w3schools.com/html/html_tables.asp");

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

    cy.get("#customers")
      .find("th")
      .first()
      .invoke("text")
      .should("eq", "Company");

    cy.get("#customers")
      .find("th")
      .eq(1)
      .invoke("text")
      .should("eq", "Contact");

    cy.get("#customers")
      .find("th")
      .eq(2)
      .invoke("text")
      .should("eq", "Country");

    cy.get("#customers").find("tr").should("have.length", 7);
    cy.get("#customers")
      .find("tr")
      .eq(1)
      .find("td")
      .eq(1)
      .invoke("text")
      .should("eq", "Maria Anders");

    cy.get("#customers").find("tr").should("have.length", 7);
    cy.get("#customers")
      .find("tr")
      .eq(1)
      .find("td")
      .eq(1)
      .then((element) => {
        const text = element.text();
        expect(text).to.eq("Maria Anders");
      });
  });
});