Puppeteer Select Table row/option

Question

Working on some code that will select a table option that gets built out after an option is selected from a drop-down menu. Don't have access to github atm to check puppeteer documentation so I'm looking for how to adapt a line similar to
let optionValue = await page.$$eval('option', options => options.find(o => o.innerText === "Quality")?.value)

await page.select('#selDept', optionValue); in order to select the proper table row using either the id tag or the innerText of either "Stephen_Test" or the hidden cell measure id "1640". I believe selecting the measure id 1640 would be preferable so that I can also save that id as a variable that could be used elsewhere later on in the project if needed. I just don't have prior experience with nodeJS/puppeteer to know how to adjust this line to what I'm looking for so any help is appreciated.

Current puppeteer code

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({headless: false});
    
    const page = await browser.newPage();
    
    await page.authenticate({'username': username, 'password': password});
    
    await page.goto('http://10.10.4.80/index-test-sh.html') //this is an intranet site for the company I work at
    
    await page.waitForTimeout(4000);
    await page.waitForSelector('#selDept');
    
    await page.waitForTimeout(4000);
    let optionValue = await page.$$eval('option', options => options.find(o => o.innerText === "Quality")?.value)
    await page.select('#selDept', optionValue);
    
    await page.waitForTimeout(4000);
    let measureValue = await page.$$eval('td', td => td.find(t => t.innerText === "Stephen_Test")?.value)
    await page.select('#Output', measureValue);
    
    await page.waitForTimeout(4000);
    //await browser.close();
    
})();

Table is built with this loop:

for (var i = 0; i < arr.length; i++) {  
        txtTable = txtTable + "<tr id='row" + i + "'>"; //altered this to have unique row ID's
        txtTable = txtTable + "<td style='width:30%;'>" + arr[i].departmentName + "</td>";      
        txtTable = txtTable + "<td id='measureId" + arr[i].measureId + "' style='display:none; width:10%;'>" + arr[i].measureId + "</td>"; //altered this to include an id using measureId  
        txtTable = txtTable + "<td style='width:40%;'>" + arr[i].qmsMeasure + "</td>";      
        txtTable = txtTable + "<td style='width:20%;'>" + arr[i].measureSltOwner + "</td>";
        txtTable = txtTable + "</tr>";
        
    };//End Loop

HTML generated after option is selected (contains about 10 rows, just showing the one I want to select)

<div class="OptionTable DisplayScrollBar">
<table id="Output">
  <thead>
    <tr>
      <th style="width: 30%;">Department Name</th>
      <th style="width: 10%;display:none;">Report ID</th>
      <th style="width: 40%;">Measure Name</th>
      <th style="width: 20%;">SLT Measure Owner</th>
    </tr>
  </thead>
  <tbody>
    <tr id="row0">
      <td style="width:30%;">Quality</td>
      <td id="measureId1640" style="display:none; width:10%;">1640</td>
      <td style="width:40%;">Stephen_Test</td>
      <td style="width:20%;">null</td>
    </tr>
  </tbody>
</div>

Answer 1

After coming back to this issue the following day with a fresh start, here's how I accomplished the task:

try {
        await page.$("#measureId1640");
        console.log("It exists!");
    } catch {
        console.log("no dice");
    }
let measureId = await page.$$eval('td', td => td.find(t => t.innerText === "1640")?.id); // same as optionValue line, this time we look for 1640, and then return the id attribute of that element
console.log(measureId);
await page.click('#row0')

First, I set up a try statement that will let me know whether or not a desired measure/report exists in the table.

Next, I set up a $$eval that looks at the td tag type (I understand that that's what this part of the $$eval statement means now), and for each tag it will use the .find function to look for the tag with an innerText of 1640 , when it finds this, ?.id has it return the id of that tag. This allows me to use the measureId in the future if needed.

Once this is done, I then use page.click('#row0') to select the corresponding row (I use #row0 for the whole row, as opposed to trying to use the inner id's of individual cells), and this brings up the proper information for that report