Нужно понимать структуру таблицы, чтобы очистить веб-страницу

Question

У меня проблемы с определением селектора, который мне понадобится для перебора некоторых строк и получения из них данных ячейки. Это выглядит так:

<div class="ag-row ag-row-no-focus ag-row-no-animation ag-row-level-0 ag-row-odd" row="1" style="top: 30px; height: 30px;">
    <div class="ag-cell-no-focus ag-cell ag-cell-not-inline-editing ag-cell-value" tabindex="-1" colid="partnerNo" style="width: 60px; left: 0px; user-select: initial; cursor: text;">
    0010734964
    </div>
    <div class="ag-cell-no-focus ag-cell ag-cell-not-inline-editing ag-cell-value" tabindex="-1" colid="partnerName" style="width: 229px; left: 60px;">
    R.A.G. INDUSTRIAL SOLUTIONS, I NC
    </div>
</div>

Строки чередуются как ag-row-even и ag-row-odd и так далее. Все учебники, которые я прочитал, описывают структуру td и tr, но я не вижу здесь ничего подобного.

Я хотел бы иметь возможность проходить по каждой строке по этому номеру строки, но я не понимаю, как получить этот элемент. Селектор для каждой строки кажется уникальным. Далее, я хотел бы получить ячейки как свойства объектов класса, сгенерированных из этих строк. Я смог сделать что-то похожее с другой странной таблицей, например:

for (var i = 0; i < 30; i++) {
    var myIndex = (120 + (i + 1));
    soldToSelector = '#statictext9Mq9nPD4a42Lyx9hdaUFY0_14-listdefintiona5uG8xn1wqkvGe3jrjPaCW_11-cloneINDEX';
    soldToValue = soldToSelector.replace("INDEX", i);
    soldToElement =  await page.$(soldToValue);
    myText =   await page.evaluate(soldToElement => soldToElement.textContent, soldToElement);
    accountsArray.push(new Account((myIndex), myText));
}

Но в этом случае единственной разницей между селекторами было число в конце, так что его было достаточно легко просматривать и изменять. Есть идеи?

Answer 1

Вы можете использовать .ag-row для нацеливания на строки и .ag-cell для нацеливания на каждую ячейку.Затем вы также можете использовать .ag-row > .ag-cell:nth-child(n) для целевых столбцов, где n - номер столбца.

Вот пример:

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://www.ag-grid.com/example.php#/');

const names = await page.evaluate(() => {
  const firstColumnCells = Array.from(document.querySelectorAll('.ag-row > .ag-cell:nth-child(1)'));
  return firstColumnCells.map(cell => cell.innerText);
});

console.log(names);

await browser.close();

Этот пример можно проверить на реальных данных из демонстрация Ag-Grid с приложением Попробуйте Puppeteer , скопировав приведенный выше код в приложение и нажав «Запустить».

Answer 2

Кажется, что строка идентифицируется атрибутом "row". Вы можете попробовать что-то вроде этого, чтобы получить данные строки:

let rows = document.querySelectorAll('[row]');

rows.forEach( (s, i) =>  {

  var cells = s.childNodes;
  cells.forEach( (node , j) => {
    if( node.innerText ) {
      console.log( 'text', j, node.innerText );
      // do something with the text values
    }
  });

});