Как я могу нажать на ссылку, которая связана с другим DIV с Cypress.io?

Question

У меня проблема с поиском элемента, который нужно щелкнуть, который связан с определенной «строкой» в div, используя функцию .click () в Cypress.io. Ниже мой пример таблицы div:

<div class="table"> 
  <div class="col-sm-10">Item 1</div>
  <div class="col-sm-2 action">
    <a href="#"><i class="fa-times-circle-o"></i></a>
  </div>

  <div class="col-sm-10">Item 2</div>
  <div class="col-sm-2 action">
    <a href="#"><i class="fa-times-circle-o"></i></a>
  </div>
</div>

Что я хочу сделать, это нажать на ссылку A для указанной строки. Например, я хочу щелкнуть ссылку «A» для «строки», содержащей текст элемента 2. Мне нужно сделать это динамически, поскольку порядок элементов, а также названия элементов могут меняться в зависимости от данные.

Я пытаюсь что-то вроде этого:

cy.get('div:contains("Item 2")').click()

Но div не кликабельный, это следующий код в коде. Есть идеи?

Answer 1

cy.contains('div', 'Item 2').next().find('a').click()

Answer 2

Согласно Best Practices | Cypress - Для выбора элементов лучший способ сделать это - использовать выделенный атрибут data-cy для ваших кипарисовых тестов, а затем, в рамках тестов, использовать селекторы атрибутов CSS.

Рекомендация. Используйте атрибуты data- *, чтобы предоставить контекст своим селекторам и изолировать их от изменений CSS или JS.

В вашем случае я бы сделал это так:

<div class="table"> 
   <div class="col-sm-10">Item 1</div>
   <div class="col-sm-2 action">
    <a href="#"><i class="fa-times-circle-o"></i></a>
   </div>
   <div class="col-sm-10">Item 2</div>
   <div class="col-sm-2 action">
    <a href="#" data-cy="item-2-anchor"><i class="fa-times-circle-o"></i></a>
   </div>
</div>

cy.get('[data-cy="item-2-anchor"]').click();

Я настоятельно рекомендую делать это в рамках всего проекта, поскольку это гарантирует рабочие тесты, несмотря на любые изменения, внесенные в другие атрибуты (id, class, href ..) в процессе разработки.