Encontrando elementos

Query por contenido

📚 Documentación
.
Para buscar elementos por su contenido, ocupamos la funcionalidad contains.
.
Con contains podemos en alto nivel hacer:

• .contains(content) Búsqueda por contenido
• .contains(selector, content) Búsqueda por selectores

.
Con ello por ejemplo “Buscar un elemento .nav que contenga el texto About”

cy.get('.nav').contains('About')

U “Obtener el primer elemento que contenga el texto Hello”

cy.contains('Hello')

Práctica

Teniendo la siguiente estructura:
.

.
Para obtener los elementos:

• Banana

cy.get('.query-list')
  .contains('bananas').should('have.class', 'third')

• Button

cy.get('.query-button')
  .contains('Save Form')
  .should('have.class', 'btn')

El find() necesita ir concatenado a un elemento del DOM. Y cy.get() nos provee esto

Query por bloque

📚 Documentación
.
Para obtener un elemento por su estructura, podemos selecciona un elemento padre que encapsula a un elemento hijo.
.
Para ello, utilizamos la función parent, el cual permite especificar:

• .parent() el padre en sí
• `.parent(selector) el padre según el criterio de un selector

.
De aquí, por ejemplo teniendo la siguiente estructura:

<ul class="main-nav">
  <li>Overview</li>
  <li>
    Getting started
    <ul class="sub-nav">
      <li>Install</li>
      <li class="active">Build</li>
      <li>Test</li>
    </ul>
  </li>
</ul>

Para obtener el elemento sub-nav, podemos definir a través del elemento li:

cy.get('li').parent('.sub-nav')

Fuente:https://docs.cypress.io/guides/references/best-practices

Query por Bloque invertido

📚 Documentación
.
De manera inversa al parent, para obtener un elemento hijo(s), ocupamos la función find.
.
Con ella, podemos realizar búsquedas mediante selector .find(selector).
.
Donde, por ejemplo, para buscar un footer contenido en un elemento con clase .article tendremos la siguiente definición:

cy.get('.article').find('footer')

Supongamos que tuviéramos la siguiente estructura:

<ul id="parent">
  <li class="first"></li>
  <li class="second"></li>
</ul>

Y quisiéramos obtener todos lo elementos li, definimos lo siguiente:

cy.get('#parent').find('li')