Question

我正在使用Nightwatch.js来测试一个网站。在这个网站上有一个表格如下：

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

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

'td[class="sorting_2"]'

我可以使用此命令获取文本：

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

但如果我想选择两个同样定义的元素中的一个，如上面的列表，我该怎么做呢。最后两个元素都有类sorting_3。如何使用特殊类获取表的第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>]表示法选择第一个或第二个等。

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

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

＆＃13;

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';
});

＆＃13;

<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>

＆＃13;

Answer 2

在不知道.sorting_3实际工作原理的情况下，我能想到访问多个Nightwatch.js元素的唯一方法是传递兄弟 ~组合子选择器

即：当你想从.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选择器中您期望的元素数量。

希望这有帮助。

Answer 3

您可以使用Jack建议的解决方案（//td[@class="sorting_3"][1]），但您必须将Nightwatch设置为使用xPath作为locateStrategy。根据您获得的错误，您的默认locateStrategy似乎是CSS。见this command in the API reference

如何在具有特殊类的表中选择第n个html元素？

3 个答案: