Не могу очистить данные из таблицы с помощью Puppeteer. Он возвращает пустой массив - PullRequest
Новая
       70

Не могу очистить данные из таблицы с помощью Puppeteer. Он возвращает пустой массив

1 голос
/ 27 мая 2020

Я пытался очистить данные из таблицы, используя puppeteer, но всегда получаю пустой массив. Пожалуйста, помогите, так как я новичок с puppeteer и уже потратил на это много дней. Процесс следующий.

  1. вход на веб-сайт
  2. После входа открывается раздражающий баннер (иногда код застревает там)
  3. Перейдите на другую страницу, чтобы получить доступ к данным финансового отчета.

  4. Нажмите кнопку (Оплаченные счета) и измените фильтр диапазона дат для загрузки данных, нажав кнопку Фильтр.

  5. Очистите таблицу данных и воспроизведите ее в виде таблицы. (Позже это будет перемещено в базу данных)

Я пробовал много разных способов, и он возвращает пустой массив, или иногда консоль ничего не показывает.

Пожалуйста см. структуру данных на сайте. 

<div class="scroll-wrapper" data-ng-init="reportController.adjustScroll()">
   <div class="scroll-top">
      <div class="dummy-div" style="width: 743px;">
         <table class="table-report">
            <thead>
               <tr>
                  <th class="td-4 text-left" ng-class="{'active': reportController.propertyName === 'ContableAccount'}" ng-click="reportController.sortBy('ContableAccount')">
                     CONTA
                     <span class="sortorder sprite-report arrow-order-grey" ng-class="{reverse: reverse}"></span>
                  </th>
                  <th class="td-7 text-left" ng-class="{'active': reportController.propertyName === 'Description'}" ng-click="reportController.sortBy('Description')">
                     DESCRIÇÃO
                     <span class="sortorder sprite-report arrow-order-grey" ng-class="{reverse: reverse}"></span>
                  </th>
                  <th class="td-5 text-left" ng-class="{'active': reportController.propertyName === 'Supplier'}" ng-click="reportController.sortBy('Supplier')">
                     FORNECEDOR
                     <span class="sortorder sprite-report arrow-order-grey" ng-class="{reverse: reverse}"></span>
                  </th>
                  <th class="td-3 text-left active" ng-class="{'active': reportController.propertyName === 'DueDate'}" ng-click="reportController.sortBy('DueDate')">
                     VENCIMENTO
                     <span class="sortorder sprite-report arrow-order-grey" ng-class="{reverse: reverse}"></span>
                  </th>
                  <!-- ngIf: reportController.listParameters.Paid -->
                  <th class="td-3 text-left" ng-class="{'active': reportController.propertyName === 'Total'}" ng-click="reportController.sortBy('Total')">
                     TOTAL
                     <span class="sortorder sprite-report arrow-order-grey" ng-class="{reverse: reverse}"></span>
                  </th>
                  <th class="td-3 text-left" ng-class="{'active': reportController.propertyName === 'Paid'}" ng-click="reportController.sortBy('Paid')">
                     PAGO
                     <span class="sortorder sprite-report arrow-order-grey" ng-class="{reverse: reverse}"></span>
                  </th>
                  <th class="td-3 text-left" ng-class="{'active': reportController.propertyName === 'Balance'}" ng-click="reportController.sortBy('Balance')">
                     SALDO
                     <span class="sortorder sprite-report arrow-order-grey" ng-class="{reverse: reverse}"></span>
                  </th>
               </tr>
            </thead>
         </table>
      </div>
   </div>
   <div class="scroll-bottom">
      <div class="content-div ng-isolate-scope" infinite-scroll="reportController.getMoreRecords()" infinite-scroll-distance="1">
         <table class="table-report">
            <tbody>
               <!-- ngRepeat: item in reportController.listDataLocal | orderBy:reportController.propertyName:reportController.reverse -->
               <tr ng-repeat="item in reportController.listDataLocal | orderBy:reportController.propertyName:reportController.reverse" class="ng-scope">
                  <td class="td-4 text-ellipsis ng-binding" title="Mercadoria para Revenda">Mercadoria para Revenda</td>
                  <td class="td-7 text-ellipsis ng-binding" title="Pedido de Compra Nº 1966">Pedido de Compra Nº 1966</td>
                  <td class="td-5 text-ellipsis ng-binding" title="Oderco Distribuidora Eletronicos Ltda">Oderco Distribuidora Eletronicos Ltda</td>
                  <td class="td-3 text-ellipsis ng-binding" title="27/05/2020">27/05/2020</td>
                  <!-- ngIf: reportController.listParameters.Paid -->
                  <td class="td-3 text-right text-ellipsis ng-binding" title="R$ 436,02">R$ 436,02</td>
                  <td class="td-3 text-right text-ellipsis ng-binding" title="R$ 0,00">R$ 0,00</td>
                  <td class="td-3 text-right text-ellipsis ng-binding" title="R$ 436,02">R$ 436,02</td>
               </tr>
               <!-- end ngRepeat: item in reportController.listDataLocal | orderBy:reportController.propertyName:reportController.reverse -->
               <tr ng-repeat="item in reportController.listDataLocal | orderBy:reportController.propertyName:reportController.reverse" class="ng-scope">
                  <td class="td-4 text-ellipsis ng-binding" title="Mercadoria para Revenda">Mercadoria para Revenda</td>
                  <td class="td-7 text-ellipsis ng-binding" title="Pedido de Compra Nº 1965">Pedido de Compra Nº 1965</td>
                  <td class="td-5 text-ellipsis ng-binding" title="GIBSON SOLUÇÕES EM TECNOLOGIA LTDA">GIBSON SOLUÇÕES EM TECNOLOGIA LTDA</td>
                  <td class="td-3 text-ellipsis ng-binding" title="27/05/2020">27/05/2020</td>
                  <!-- ngIf: reportController.listParameters.Paid -->
                  <td class="td-3 text-right text-ellipsis ng-binding" title="R$ 480,52">R$ 480,52</td>
                  <td class="td-3 text-right text-ellipsis ng-binding" title="R$ 0,00">R$ 0,00</td>
                  <td class="td-3 text-right text-ellipsis ng-binding" title="R$ 480,52">R$ 480,52</td>
               </tr>
               <!-- end ngRepeat: item in reportController.listDataLocal | orderBy:reportController.propertyName:reportController.reverse -->
               <tr ng-repeat="item in reportController.listDataLocal | orderBy:reportController.propertyName:reportController.reverse" class="ng-scope">
                  <td class="td-4 text-ellipsis ng-binding" title="Água">Água</td>
                  <td class="td-7 text-ellipsis ng-binding" title="SAAE">SAAE</td>
                  <td class="td-5 text-ellipsis ng-binding" title=""></td>
                  <td class="td-3 text-ellipsis ng-binding" title="27/05/2020">27/05/2020</td>
                  <!-- ngIf: reportController.listParameters.Paid -->
                  <td class="td-3 text-right text-ellipsis ng-binding" title="R$ 35,77">R$ 35,77</td>
                  <td class="td-3 text-right text-ellipsis ng-binding" title="R$ 0,00">R$ 0,00</td>
                  <td class="td-3 text-right text-ellipsis ng-binding" title="R$ 35,77">R$ 35,77</td>
               </tr>
               <!-- end ngRepeat: item in reportController.listDataLocal | orderBy:reportController.propertyName:reportController.reverse -->
               <tr ng-repeat="item in reportController.listDataLocal | orderBy:reportController.propertyName:reportController.reverse" class="ng-scope">
                  <td class="td-4 text-ellipsis ng-binding" title="Mensalidade Escritório">Mensalidade Escritório</td>
                  <td class="td-7 text-ellipsis ng-binding" title="ESCRITORIO ITAPIRENSE">ESCRITORIO ITAPIRENSE</td>
                  <td class="td-5 text-ellipsis ng-binding" title=""></td>
                  <td class="td-3 text-ellipsis ng-binding" title="21/05/2020">21/05/2020</td>
                  <!-- ngIf: reportController.listParameters.Paid -->
                  <td class="td-3 text-right text-ellipsis ng-binding" title="R$ 240,00">R$ 240,00</td>
                  <td class="td-3 text-right text-ellipsis ng-binding" title="R$ 0,00">R$ 0,00</td>
                  <td class="td-3 text-right text-ellipsis ng-binding" title="R$ 240,00">R$ 240,00</td>
               </tr>
               <!-- end ngRepeat: item in reportController.listDataLocal | orderBy:reportController.propertyName:reportController.reverse -->
            </tbody>
         </table>
         <!-- ngIf: reportController.lastPage -->
         <table class="table-report footer ng-scope" ng-if="reportController.lastPage">
            <tbody>
               <tr>
                  <td class="td-12 text-left" colspan="3">Exibindo <span class="number ng-binding">4</span> registros</td>
                  <td class="td-7">&nbsp;</td>
                  <!-- ngIf: reportController.listParameters.Paid -->
                  <td class="td-3 ng-binding">R$ 1.192,31</td>
                  <td class="td-3 ng-binding">R$ 0,00</td>
                  <td class="td-3 ng-binding">R$ 1.192,31</td>
               </tr>
            </tbody>
         </table>
         <!-- end ngIf: reportController.lastPage -->
      </div>
   </div>
</div>

Это мой код кукловода с комментариями. 

const puppeteer = require("puppeteer");

(async () => {
  try {
    const websiteUrl = "mySite.com";

const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();

// prevent detection as robot
page.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.0 Safari/537.36");

await page.goto(websiteUrl);

//set the browser to be in desktop size and do not hide the login menu
await page.setViewport({ width: 2400, height: 1171 });

await page.waitForSelector("#login§ds_login");

//Type login details using fields IDS
await page.type("#login§ds_login", "myUsername");
await page.type("#login§ds_password", "myPassword");

await Promise.all([page.waitForNavigation(), page.click("#login§bt_login")]);

await page.waitForSelector('button[title="Fechar"]');
await page.click('button[title="Fechar"]');

await page.goto("page-where-tableIs.com", { waitUntil: "domcontentloaded" });

// Click on Button that says Paid Bills
await page.waitForSelector(".filter > .filters-container > .alternate-buttons > .buttons-center > .btn:nth-child(2)");
await page.click(".filter > .filters-container > .alternate-buttons > .buttons-center > .btn:nth-child(2)");

// select Date Range and click on filter button
await page.waitForSelector(".action-bar-container > .filters-container > .filter-date > .from > .ng-pristine");

await page.type(".action-bar-container > .filters-container > .filter-date > .from > .ng-pristine", "01012020");
await page.type(".action-bar-container > .filters-container > .filter-date > .to > .ng-pristine", "01052020");
await page.click(".filters-container > .filter-date > .confirm-filter > button > .sprite-new-erp");

// IF SWTICH ON CONSOLE DOESNT LOG ANYTHING
// await page.waitForNavigation({
//   waitUntil: "networkidle0"
// });

// I TRIED THIS AN ALTERNATIVE FOR THE ONE ABOVE AND IF TURNED ON NOTHING IS LOGGED TO CONSOLE
// await page.waitForSelector("tbody tr");

// Test Area (I've tried many codes as below and everything return an EMPTY ARRAY)

const test01 = await page.evaluate(() => Array.from(document.querySelectorAll("tbody tr")).map(partner => partner.textContent));
console.log(test01);

const test02 = await page.evaluate(() =>
  Array.from(document.querySelectorAll("tbody tr")).map(rows => {
    const getData = child => rows.querySelector(`.td-${child}`).getAttribute("title");
    return [getData(2), getData(7), getData(5), getData(3), getData(7)];
  })
);

console.log(test02);

const test03 = await page.evaluate(() =>
  Array.from(document.querySelectorAll("tbody tr")).map(rows => {
    const getData = child => rows.querySelector(`.td-5:nth-child(${child})`).getAttribute("title");
    return [getData(2), getData(7), getData(5), getData(3), getData(7)];
  })
);

console.log(test03);

const test04 = await page.evaluate(() =>
  Array.from(document.querySelectorAll("tbody > tr")).map(rows => {
    const getData = rows => team.querySelector(`td.td-${child}.text-ellipsis.ng-binding`).getAttribute("title");
    return [getData(2), getData(7), getData(5), getData(3), getData(7)];
  })
);
console.log(test04);

const test05 = page.evaluate(() => {
  const rows = document.querySelectorAll(".table-report tr td");
  return Array.from(rows, row => {
    const columns = row.querySelectorAll(".table-report tr th");
    return Array.from(columns, column => column.innerText);
  });
});

console.log(test05);

const simpleTest = await page.evaluate(() => Array.from(document.querySelectorAll("tbody tr")));

console.log(simpleTest);

const simpletest2 = simpleTest.writeToJson();
console.log(simpletest2);
  } catch (e) {
    console.log("error", e);
  }

  await browser.close();
})();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...