Node.js Puppeteer How can I get TR ID value?

Viewed 475

I'm new in Puppeteer and I try to find a solution ton extract the "tr id" value in this code:

<table class="test" id="test">
    <tbody><tr id="TR_99999997" style="background-color: rgb(255, 255, 255);">
        <td class="supp" id="TD_IMAGE_XXXXX"></td>
        <td class="name" id="TD_TEXT_XXXXX" style="cursor: pointer;" onclick="selectEnvironnement('99999997',1)">test</td>
        <td class="date">08/04/2021</td>
        <td class="type">test</td>
            </tr>
    <tbody><tr id="TR_99999998" style="background-color: rgb(255, 255, 255);">
        <td class="supp" id="TD_IMAGE_XXXXX"></td>
        <td class="name" id="TD_TEXT_XXXXX" style="cursor: pointer;" onclick="selectEnvironnement('99999998',1)">test</td>
        <td class="date">09/04/2021</td>
        <td class="type">test</td>
            </tr>
    <tbody><tr id="TR_99999999" style="background-color: rgb(255, 255, 255);">
        <td class="supp" id="TD_IMAGE_XXXXX"></td>
        <td class="name" id="TD_TEXT_XXXXX" style="cursor: pointer;" onclick="selectEnvironnement('99999999',1)">test</td>
        <td class="date">10/04/2021</td>
        <td class="type">test</td>
            </tr>

Is there a way to get all the TR_9999999X ? I need to find the last one and click on it.

Any help would be appreciated

1 Answers

There is a way to find and click the button, see this script. I have removed ALL the TDS as it muddies the water a bit.

The bit of magic is this bit, basically table td[id^="TD_TEXT_"] asking the page to return all TD elements that starts with id=TD_TEXT (the ^ does this)

So take a look and run this script. This will open chrome, hit F12 and navigate to the console tab, after 3 secs you will see some console.log messages so we know the button has been clicked.

const puppeteer = require('puppeteer');

const html = `
<html>
    <body>
    <table>
      <tr id="TR_99999997" style="background-color: rgb(255, 255, 255);">
        <td id="TD_TEXT_XXXXX" style="cursor: pointer;" onclick="selectEnvironnement('99999997',1)">test1</td>
      </tr>    
      <tr id="TR_99999998" style="background-color: rgb(255, 255, 255);">
        <td id="TD_TEXT_XXXXX" style="cursor: pointer;" onclick="selectEnvironnement('99999998',2)">test2</td>
      </tr>    
      <tr id="TR_99999999" style="background-color: rgb(255, 255, 255);">
        <td id="TD_TEXT_XXXXX" style="cursor: pointer;" onclick="selectEnvironnement('99999999',3)">test3</td>
      </tr>    
    </table>
    <script>
      function selectEnvironnement(p1, p2) {
        console.log(p1, p2);
      };
    </script>
  </body>
</html>`;

(async () => {
  const browser = await puppeteer.launch({ headless : false});
  const page = await browser.newPage();
  await page.goto(`data:text/html,${html}`);

  await page.waitForTimeout(3000);
  var tdList = await page.$$('table td[id^="TD_TEXT_"]', e => e.map((btn) => btn));
  //console.log(tdList);
  await tdList[0].click();
  await tdList[1].click();
  await tdList[2].click();
  await page.waitForTimeout(20000);

  await browser.close();
})();

Which produces the following result. In your case simply click the last element in your array list.

enter image description here

Related