Блог

Я работаю с Cypress уже несколько недель, и мне начинает требоваться более сложный выбор. Прямо сейчас я не понимаю, как связать селекторы в цепочку, чтобы получить то, что мне нужно.

Вот упрощенная версия HTML, на которую я смотрю:

 <my-application-list-item test-hook="applicationListItem">
  <div>
    <!---->
    <div>
      <header>
        <a test-hook="name" href="/build/applications/iVANKl9Z">E2E Test Item</a>
        <my-build-application-menu>
          <!---->
          <my-dropdown testhook="actionsMenu">
            <my-icon-button-settings testhook="openActionsMenu">
              <button testhook="openActionsMenu">
 

Тестовые крючки были размещены, когда мы использовали транспортир, и в переносе есть несоответствие. Но в любом случае, я хочу найти и щелкнуть openActionsMenu то, что находится внутри applicationListItem , которое содержит видимый текст «Тестовый элемент E2E».

Я думал, что это сработает, основываясь на документах для get , contains , и find :

 cy.get('[test-hook="applicationListItem"]')
  .contains("E2E Test Item")
  .find('[testhook="openActionsMenu"]')
 

но это привело к

 Timed out retrying after 4000ms: Expected to find element: [testhook="openActionsMenu"], but never found it. Queried from element: <a.ellipsis.my-info-box__title-link.my-link>
 

даже несмотря на то, что бежал

 cy.get('[testhook="openActionsMenu"]')

 

преуспевает. Что я делаю не так?

Используйте .contains(selector, content) форму содержит().

Переданный предмет-это тот, который соответствует selector .

 cy.contains('[test-hook="applicationListItem"]'), "E2E Test Item")
  .find('[testhook="openActionsMenu"]')
 

Поэкспериментируйте немного, используйте .then(console.log) , чтобы проверить предмет в этот момент

 cy.contains('[test-hook="applicationListItem"]'), "E2E Test Item")
  .then(subject => console.log(subject)    // <my-application-list-item>
  .find('[testhook="openActionsMenu"]')
  .then(subject => console.log(subject)    // <my-icon-button-settings>
 

«содержит» возвращает элемент, содержащий текст, в данном случае тег <a><a>. Если вы используете братьев и сестер(), вы можете заставить бегуна искать в следующем элементе:

 cy.get('[test-hook="applicationListItem"]')
        .contains("E2E Test Item")
        .siblings()
        .find('[testhook="openActionsMenu"]')