No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Encontrando elementos

7/23
Recursos

Aportes 5

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淏uscar un elemento .nav que contenga el texto About

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

U 鈥淥btener 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')

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')