Trabajando con tablas

Colecciones

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

• First 📚 Documentación
• Last 📚 Documentación
• Next 📚 Documentación
• NextAll 📚 Documentación

.
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");
      });
  });
});