dom - 从 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> 都可以删除s 有相同的文字
• 如果您的目标是容器类，请确保您的父选择器正在尝试查找类而不是元素
• .find()查找一个元素，因此它不会匹配不同的标题文本