如何 select table 中具有特殊 class 的第 n 个 html 元素？

Question

我正在使用 Nightwatch.js 来测试网站。在这个网站上有一个 table 看起来像这样：

<tr>
    <td class="sorting_1">...</td>
    <td class="sorting_2">...</td>
    <td class="sorting_3">...</td>
    <td class="sorting_3">...</td>
</tr>

现在我想检查 table 是否包含正确的单词。我发现可以这样 select 一个元素：

'td[class="sorting_2"]'

我可以用这个命令获取文本：

.getText('td[class="sorting_2"]', function(result){
    this.assert.equal(result.value, 'Testbenutzer');
})

但是，如果我想 select 上面列表中两个同样定义的元素之一，我该怎么办。最后两个元素都有 class sorting_3。如何使用特殊的 class 获取 table 的第 n 个元素。我已经试过了：

'td:nth-of-type(1)[class="sorting_3"]'
'td:nth-child(1)[class="sorting_3"]'
'td[class="sorting_3"]:nth-child(1)'
'td:nth-child(3)'

这一切都不起作用。我该怎么做？

Answer 1

您可以使用 [<n>] 表示法 select 第一个或第二个等

//td[@class="sorting_3"][1]
//td[@class="sorting_3"][2]

1和2的值分别对应第一个和第二个

function find_nodes(selector, callback)
{
  var result = document.evaluate(selector, document);

  var node = result.iterateNext();
  while (node) {
    callback(node);
    node = result.iterateNext();
  }
}

find_nodes('//td[@class="sorting_3"][1]', function(node) {
  node.style.backgroundColor = 'lightgreen';
});

find_nodes('//td[@class="sorting_3"][2]', function(node) {
  node.style.backgroundColor = 'lightblue';
});

<table>
<tr>
    <td class="sorting_1">foo</td>
    <td class="sorting_2">bar</td>
    <td class="sorting_3">baz</td>
    <td class="sorting_3">qux</td>
</tr>
</table>

Answer 2

在不了解 Nightwatch.js 实际工作原理的情况下，我能想到的访问多个 .sorting_3 元素的唯一方法是将其传递给 siblings ~ 组合子 select 或.

即：当你想 select .sorting_3 个元素中的第一个元素时，你可以这样做：

.getText('td[class="sorting_3"]', function(result){
    this.assert.equal(result.value, 'Testbenutzer');
})

对于第二个元素：

.getText('td[class="sorting_3"] ~ td[class="sorting_3"]', function(result){
    this.assert.equal(result.value, 'Testbenutzer');
})

等等...

问题是，这种方法不可扩展。您需要提前知道在 .sorting_3 select 或.

中您期望有多少个元素

希望对您有所帮助。

Answer 3

您可以使用 Jack 提出的解决方案 (//td[@class="sorting_3"][1])，但您必须将 Nightwatch 设置为使用 xPath 作为 locateStrategy。从您得到的错误来看，您的默认 locateStrategy 似乎是 CSS。参见 this command in the API reference

如何 select table 中具有特殊 class 的第 n 个 html 元素？

How to select the nth html element in a table that has special class?

javascript

html

css

testing

nightwatch.js