0

I checked out this very similar question, but the solution posted to that one isn't quite what I need and I'm not sure how to set it up as I've only been using nodeJS/puppeteer for a couple of weeks now. Puppeteer - get parent element

I'd like to check for an id among the child elements/nodes (td) of a table row (tr), and then select the row that corresponds to the cell containing the specified id, but specifically I'd like to set it up so that I don't have to define the id of the parent node in the puppeteer code in order to select it, as this may change depending on the position of the row in the displayed table.

Right now my puppeteer code is able to select a row with a provided row id such as '#row1', but this code will eventually be set up to do alot of the same things to several table rows/options, so it'd be cleaner overall to check for the innerText of the reportID 2929 or the report name Stephen_Test, and then select whatever table row that cell resides in.

My table is built with this loop:

for (var i = 0; i < arr.length; i++) {  
        txtTable = txtTable + "<tr id='row" + i + "'>"; 
        txtTable = txtTable + "<td style='width:30%;'>" + arr[i].teamName + "</td>";        
        txtTable = txtTable + "<td style='display:none; width:10%;'>" + arr[i].reportId + "</td>"; 
        txtTable = txtTable + "<td id='m" + arr[i].reportId + "' style='width:40%;'>" + arr[i].reportName + "</td>";        
        txtTable = txtTable + "<td style='width:20%;'>" + arr[i].reportAuthor + "</td>";
        txtTable = txtTable + "</tr>";
        
    };

How it shows in html:

<table id="myTable">
<tbody>
  <tr id="row1">
    <td style="width:30%;">Team Name</td>
    <td style="display:none; width:10%;">2929</td>
    <td id="2929" style="width:40%;">Stephen_Test</td>
    <td style="width:20%;">null</td>
  </tr>
  <tr id="row2">
    <td style="width:30%;">Team Name</td>
    <td style="display:none; width:10%;">2929</td>
    <td id="3131" style="width:40%;">Stephen_Test2</td>
    <td style="width:20%;">null</td>
  </tr>
  <tr id="row3">
    <td style="width:30%;">Team Name</td>
    <td style="display:none; width:10%;">2929</td>
    <td id="3232" style="width:40%;">Stephen_Test3</td>
    <td style="width:20%;">null</td>
  </tr>
  <tr id="row4">
    <td style="width:30%;">Team Name</td>
    <td style="display:none; width:10%;">2929</td>
    <td id="3030" style="width:40%;">Stephen_Test4</td>
    <td style="width:20%;">null</td>
  </tr>
</tbody>
</table>

My current puppeteer code:

let reportId = await page.$$eval('td', td => td.find(t => t.innerText === "Stephen_Test")?.id);
console.log(reportId);
var number = '1';
await page.click('#row' + number);
Stephen.Harrison
  • 80
  • 10
  • 1
    I'm not sure I fully understand, but do you want something like `page.evaluate(() => [...document.querySelectorAll("td")].find(t => t.innerText === "Stephen_Test")?.closest("tr").click())`...? – ggorlen Dec 18 '21 at 18:29
  • workaround that I found was that I could simply add an id to the `tr` tag with the `reportId` instead of just in the hidden row. I think somewhere along the process there is a slightly out of date version of html being used as I can only use id selectors that have a character first such as` r1640` instead of just `1640`. That aside, what you posted does look like it might do the same thing as my original intent, I'd just have to do some tinkering to make sure how to format it to be what puppeteer would want it to look like exactly – Stephen.Harrison Dec 21 '21 at 18:57

0 Answers0