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>

从DOM中选择元素

2 个答案: