Выбор элементов из DOM

Question

На содержимом моей страницы у меня есть несколько карточек, организованных в виде сетки

 __________________
|  ____    ____    |
| |    |  |    |   |
| |    |  |    |   |
| |____|  |____|   |
|                  |
|  ____    ____    |
| |    |  |    |   |
| |    |  |    |   |
| |____|  |____|   |
|__________________|

Моя проблема в том, что каждый контейнер для карточек имеет один и тот же класс, и я хочу выбрать отдельный элемент внутри контейнера.Пример:

<div class="parent-container">
  <div class="container">
    <h2> Distinct title 1 </h2>
  </div>
  <div class="container">
    <div class="another-container">
      <button>
        <span> Click Here! </span>
      </button>
    </div>
  </div>
</div>

[repeat X times]

или использование дерева DOM

. Parent div
|_ child div
|  |_ <h2> Distinct title 3 </h2>
|
|_ child div
   |_ grandchild div
      |_ button
         |_ <span> Click Here! </span>

Итак, предположительно, я хочу выбрать элемент в третьем контейнере.Каким будет запрос селектора?

На основании ответа @lostlemon мой запрос выглядит следующим образом:

await t
  .click(Selector('span')
  .parent(3)
  .child('h2')
  .withExactText('Distinct title 3'));

Answer 1

Если вы всегда хотите выбрать третий контейнер в этом сценарии, вы можете использовать nth-child или nth-of-type:

await t.click('div:nth-child(3) > span');

Если вам нужно нажать на промежутокв зависимости от заголовка попробуйте следующее:

await t
    .click(Selector('span').parent('.parent-container')
    .child('h2').withExactText('Distinct title 3');

• .withText() можно удалить, если все <span> имеют одинаковый текст
• , убедитесь, что ваш родительский селектор пытаетсянайти класс, а не элемент, если вы нацелены на контейнерный класс
• .find() ищет элемент, поэтому он не будет соответствовать отдельному тексту заголовка

Answer 2

Вы можете просто дать каждому интервалу уникальный класс.

<span class="card-1">CONTENT</span>