NightWatch.js - 根据相对css定位器获取子WebElements列表 [英] NightWatch.js - get a list of child WebElements based on relative css locator

问题描述

大家好，所有NightWatch采用者，

Hello all NightWatch adopters,

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

I am trying to parse a table with the following format to get a a list of rows and the cell in each rows

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

现在代码调用以下函数。

The code now looks like this which calls the function below.

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

我的解析功能现在看起来像这样。

Where my function for parsing now looks like this.

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中我们可以执行以下操作

In Java webdriver we can just do the following

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中是否有任何直接的方法可以通过子WebElement在Java中执行此操作，我们可以在其中调用 startingWebElement.getElement（childlocator）; ，无需从顶部开始，动态构建/链接定位器，例如

I wanted to know if there is any straight forward way to do this in NightWatchJS similar how we do this in Java via child WebElement where we can just call startingWebElement.getElement(childlocator); without having to start all the way from the top and dynamically build/chain the locators e.g.

// 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)')

非常感谢任何评论，建议，顾虑，提示。

Any comments, suggestions, concerns, tips is greatly appreciated.

推荐答案

看看这是否适合你：

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的实现

Implementation of getTableRows

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

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

这篇关于NightWatch.js - 根据相对css定位器获取子WebElements列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！