NightWatch.js - 根据相关 css 定位器获取子 WebElements 列表答案

【问题标题】：NightWatch.js - get a list of child WebElements based on relative css locatorNightWatch.js - 根据相关 css 定位器获取子 WebElements 列表
【发布时间】：2015-06-22 18:40:46
【问题描述】：

您好所有 NightWatch 采用者，

我正在尝试解析具有以下格式的表格以获取行列表和每行中的单元格

<tbody> 
  <tr> // 1 row
    <td>Item A</td> // name
    <td>John</td> // owner
    <td>Monday</td> // create date
  </tr>
  <tr> // 2 row
    <td>Item B</td>
    <td>Mary</td>
    <td>Tuesday</td>
  </tr>
</tbody>

代码现在看起来像这样调用下面的函数。

browser.elements('css selector', 'tbody tr', getResultsList);

我的解析函数现在看起来像这样。

function getResultsList(rowResults){
    // Here we get the correct set of rows 
    console.log(rowResults.length + ' rows found'); // this returns 2


    // Main loop going through the rows
    for(var i = 0; i < rowResults.value.length; i++) {
        var row = rowResults.value[i];
        console.log(row.value + ' -- row item');
        // need to get the <td> inside row
    }
}

在 Java webdriver 中，我们可以执行以下操作

List<WebElements> rows = driver.getElements("tbody tr");
    for (WebElement row : rows) {
        row.getElement(' > td:nth-child(1)') // name
        row.getElement(' > td:nth-child(2)') // creator
        row.getElement(' > td:nth-child(3)') // date
    }

我想知道是否有任何直接的方法可以在 NightWatchJS 中执行此操作，类似于我们在 Java 中通过子 WebElement 执行此操作的方式，我们只需调用 startingWebElement.getElement(childlocator); 而无需从头开始并动态构建/chain 定位器，例如

// name
browser.getText('css selector', 'tbody tr:nth-child('+i+') td:nth-child(1)')
// creator
browser.getText('css selector', 'tbody tr:nth-child('+i+') td:nth-child(2)')
// date
browser.getText('css selector', 'tbody tr:nth-child('+i+') td:nth-child(4)')

非常感谢任何 cmets、建议、疑虑、提示。

【问题讨论】：

嘿，你找到解决方案了吗？我也在寻找一种方便的 nighwatchjs 方法来找出我的行中有多少个表格单元格，然后再遍历它们
我也在寻找这个问题的解决方案……

标签： javascript css css-selectors pageobjects nightwatch.js

【解决方案1】：

看看这是否适合你：

Page.getTableRows((rows) => {  
  rows.forEach((row) => {
    client.elementIdElements(row.ELEMENT, 'tag name', 'td', (result) => {
      console.log(`row td length ${result.value.length}`);
      result.value.forEach((cell) => {
        client.elementIdText(cell.ELEMENT, (text) => {
          console.log(`cell text ${text.value}`);
        })
      });
    });
  });
});`

getTableRows 的实现

getTableRows(callback) {
  this.api.elements('css selector', \`${this.elements.table.selector} tbody tr\`, (data) => {

    if(data.state === 'success'){
      callback.call(this, data.value);
    }
  });
},

【讨论】：