Puppeteer 循环表行 - 在每一行上选择下拉选项“选项“P”用于参数答案

【问题标题】：Puppeteer loop table rows - select dropdown option on each row "Option "P" for parametersPuppeteer 循环表行 - 在每一行上选择下拉选项“选项“P”用于参数
【发布时间】：2021-01-28 10:10:05
【问题描述】：

我正在尝试使用 Puppeteer 循环遍历表格元素的行。表格最后一列中的每一行都有一个下拉列表。我想为Parameters选择选项“P”并获取所有href链接并创建一个数组......然后一个一个输入截图。

这是我的表格元素...

我希望有人可以帮助我完成循环的步骤并单击下拉菜单以选择一个选项 - 构建链接数组，然后单击每个链接并拍摄快照。

感谢您的帮助

<table border="0" cellpadding="5" cellspacing="0" width="96%" style="border: 2px solid black; margin-bottom: 10px;">



<tbody><tr class="header1">
  <th colspan="8">Workshops</th>
</tr>
<tr class="header2"><th><acronym style="cursor:help;" title="Franchise Code">FC</acronym></th><th><acronym style="cursor:help;" title="Status">S</acronym></th><th>Date</th><th><acronym style="cursor:help;" title="Category">Cat.</acronym></th><th>Name</th><th>Location</th><th>Disc.</th><!--<th>Created</th>--><th></th></tr>
<tr style="background-color: white;">
        <td valign="top" style="font-size: 9px;">EC</td>
    <td valign="top" style="font-size: 9px;">
    <acronym style="cursor: help;" title="  Expired">E
    
    </acronym></td>
        
    <td valign="top" align="left" style="font-size: 9px;">04.04.20</td>
    <td valign="top" align="left" style="font-size: 8px;">CS</td>
    <td valign="top" style="font-size: 9px;">Intermediate Workshop Derby</td>
    <td valign="top" align="left" style="font-size: 9px;">Spondon Village Hall, Sitwell Street, Spondon, Derby, DE21 7FG</td>
    <td valign="top" align="left" style="font-size: 9px;">None</td>
<!--    <td valign="top" align="center" style="font-size: 9px;">26.09.19 12.11</td> -->

    <td valign="top" align="right" style="font-size: 9px;" nowrap="nowrap">
        <form action="" method="get">
        <select name="x" size="1" onchange="location=this.options[this.selectedIndex].value;" style="border: 1px solid black; width: 40px;">
        
        <option value="#" title="Select an action"> -- </option>
        
        
                <option value="/Applications/COS/Administration/Workshops/Parameters/14460?CLEAR" title="Parameters">P</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Parameters/14460?CLEAR" title="Parameters">P</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Teachers/14460?CLEAR" title="Teachers">T</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Teachers/14460?CLEAR" title="Teachers">T</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Franchise/14460?CLEAR" title="Franchise">F</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Franchise/14460?CLEAR" title="Franchise">F</a> -->
                
                
        <option value="/Applications/COS/Administration/Workshop_Profiles?workshopRef=IntDerby04Apr20" title="User Profiles">U</option>
        <option value="/Applications/COS/Administration/Workshop_Waitlist?workshopRef=IntDerby04Apr20" title="Wait List">W</option>
    <!--    <a href="/Applications/COS/Administration/Workshop_Profiles?workshopRef=IntDerby04Apr20" title="User Profiles">U</a>
        <a href="/Applications/COS/Administration/Workshop_Waitlist?workshopRef=IntDerby04Apr20" title="Wait List">W</a>-->
        
                
                <option value="/Applications/COS/Administration/Workshops/Edit/14460?CLEAR" title="Edit">E</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Edit/14460?CLEAR" title="Edit">E</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Copy/14460?CLEAR" title="Copy">C</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Copy/14460?CLEAR" title="Copy">C</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Abort/14460?CLEAR" title="Abort">A</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Abort/14460?CLEAR" title="Abort">A</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Delete/14460?CLEAR" title="Delete">D</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Delete/14460?CLEAR" title="Delete">D</a> -->
                
                        
        
        </select>
        </form>
    </td></tr>
<tr style="background-color: #eeeeee;">
        <td valign="top" style="font-size: 9px;">JK</td>
    <td valign="top" style="font-size: 9px;">
    <acronym style="cursor: help;" title="  Aborted">A
    
    </acronym></td>
        
    <td valign="top" align="left" style="font-size: 9px;">04.04.20</td>
    <td valign="top" align="left" style="font-size: 8px;">Workshop</td>
    <td valign="top" style="font-size: 9px;">Intermediate Building Blocks 2 (10:30am-1:30pm)</td>
    <td valign="top" align="left" style="font-size: 9px;">Colwick Community Centre, Vale Road, Colwick, Nottingham, NG4 2GP</td>
    <td valign="top" align="left" style="font-size: 9px;">None</td>
<!--    <td valign="top" align="center" style="font-size: 9px;">05.03.20 13.18</td> -->

    <td valign="top" align="right" style="font-size: 9px;" nowrap="nowrap">
        <form action="" method="get">
        <select name="x" size="1" onchange="location=this.options[this.selectedIndex].value;" style="border: 1px solid black; width: 40px;">
        
        <option value="#" title="Select an action"> -- </option>
        
        
                <option value="/Applications/COS/Administration/Workshops/Parameters/14560?CLEAR" title="Parameters">P</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Parameters/14560?CLEAR" title="Parameters">P</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Teachers/14560?CLEAR" title="Teachers">T</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Teachers/14560?CLEAR" title="Teachers">T</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Franchise/14560?CLEAR" title="Franchise">F</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Franchise/14560?CLEAR" title="Franchise">F</a> -->
                
                
        <option value="/Applications/COS/Administration/Workshop_Profiles?workshopRef=IBB2Apr20" title="User Profiles">U</option>
        <option value="/Applications/COS/Administration/Workshop_Waitlist?workshopRef=IBB2Apr20" title="Wait List">W</option>
    <!--    <a href="/Applications/COS/Administration/Workshop_Profiles?workshopRef=IBB2Apr20" title="User Profiles">U</a>
        <a href="/Applications/COS/Administration/Workshop_Waitlist?workshopRef=IBB2Apr20" title="Wait List">W</a>-->
        
                
                <option value="/Applications/COS/Administration/Workshops/Edit/14560?CLEAR" title="Edit">E</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Edit/14560?CLEAR" title="Edit">E</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Copy/14560?CLEAR" title="Copy">C</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Copy/14560?CLEAR" title="Copy">C</a> -->
                
                
                        
                
                <option value="/Applications/COS/Administration/Workshops/Delete/14560?CLEAR" title="Delete">D</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Delete/14560?CLEAR" title="Delete">D</a> -->
                
                        
        
        </select>
        </form>
    </td></tr>
<tr style="background-color: white;">
        <td valign="top" style="font-size: 9px;">JK</td>
    <td valign="top" style="font-size: 9px;">
    <acronym style="cursor: help;" title="  Aborted">A
    
    </acronym></td>
        
    <td valign="top" align="left" style="font-size: 9px;">04.04.20</td>
    <td valign="top" align="left" style="font-size: 8px;">Workshop</td>
    <td valign="top" style="font-size: 9px;">Beginner Improver (2:30pm-5:30pm)</td>
    <td valign="top" align="left" style="font-size: 9px;">Colwick Community Centre, Vale Road, Colwick, Nottingham, NG4 2GP</td>
    <td valign="top" align="left" style="font-size: 9px;">None</td>
<!--    <td valign="top" align="center" style="font-size: 9px;">05.03.20 13.19</td> -->

    <td valign="top" align="right" style="font-size: 9px;" nowrap="nowrap">
        <form action="" method="get">
        <select name="x" size="1" onchange="location=this.options[this.selectedIndex].value;" style="border: 1px solid black; width: 40px;">
        
        <option value="#" title="Select an action"> -- </option>
        
        
                <option value="/Applications/COS/Administration/Workshops/Parameters/14561?CLEAR" title="Parameters">P</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Parameters/14561?CLEAR" title="Parameters">P</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Teachers/14561?CLEAR" title="Teachers">T</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Teachers/14561?CLEAR" title="Teachers">T</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Franchise/14561?CLEAR" title="Franchise">F</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Franchise/14561?CLEAR" title="Franchise">F</a> -->
                
                
        <option value="/Applications/COS/Administration/Workshop_Profiles?workshopRef=BegImpApr20" title="User Profiles">U</option>
        <option value="/Applications/COS/Administration/Workshop_Waitlist?workshopRef=BegImpApr20" title="Wait List">W</option>
    <!--    <a href="/Applications/COS/Administration/Workshop_Profiles?workshopRef=BegImpApr20" title="User Profiles">U</a>
        <a href="/Applications/COS/Administration/Workshop_Waitlist?workshopRef=BegImpApr20" title="Wait List">W</a>-->
        
                
                <option value="/Applications/COS/Administration/Workshops/Edit/14561?CLEAR" title="Edit">E</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Edit/14561?CLEAR" title="Edit">E</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Copy/14561?CLEAR" title="Copy">C</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Copy/14561?CLEAR" title="Copy">C</a> -->
                
                
                        
                
                <option value="/Applications/COS/Administration/Workshops/Delete/14561?CLEAR" title="Delete">D</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Delete/14561?CLEAR" title="Delete">D</a> -->
                
                        
        
        </select>
        </form>
    </td></tr>
<tr style="background-color: #eeeeee;">
        <td valign="top" style="font-size: 9px;">MJ</td>
    <td valign="top" style="font-size: 9px;">
    <acronym style="cursor: help;" title="  Expired">E
    
    </acronym></td>
        
    <td valign="top" align="left" style="font-size: 9px;">04.04.20</td>
    <td valign="top" align="left" style="font-size: 8px;">Intermediate</td>
    <td valign="top" style="font-size: 9px;">Jango Workshop - add beautiful tango moves &amp; techniques to your dancing. 1700-1930</td>
    <td valign="top" align="left" style="font-size: 9px;">SHIFNAL VILLAGE HALL, ASTON STREET, SHIFNAL, TF11 8DW</td>
    <td valign="top" align="left" style="font-size: 9px;">None</td>
<!--    <td valign="top" align="center" style="font-size: 9px;">04.02.20 00.25</td> -->

    <td valign="top" align="right" style="font-size: 9px;" nowrap="nowrap">
        <form action="" method="get">
        <select name="x" size="1" onchange="location=this.options[this.selectedIndex].value;" style="border: 1px solid black; width: 40px;">
        
        <option value="#" title="Select an action"> -- </option>
        
        
                <option value="/Applications/COS/Administration/Workshops/Parameters/14554?CLEAR" title="Parameters">P</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Parameters/14554?CLEAR" title="Parameters">P</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Teachers/14554?CLEAR" title="Teachers">T</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Teachers/14554?CLEAR" title="Teachers">T</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Franchise/14554?CLEAR" title="Franchise">F</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Franchise/14554?CLEAR" title="Franchise">F</a> -->
                
                
        <option value="/Applications/COS/Administration/Workshop_Profiles?workshopRef=Shif-APR20" title="User Profiles">U</option>
        <option value="/Applications/COS/Administration/Workshop_Waitlist?workshopRef=Shif-APR20" title="Wait List">W</option>
    <!--    <a href="/Applications/COS/Administration/Workshop_Profiles?workshopRef=Shif-APR20" title="User Profiles">U</a>
        <a href="/Applications/COS/Administration/Workshop_Waitlist?workshopRef=Shif-APR20" title="Wait List">W</a>-->
        
                
                <option value="/Applications/COS/Administration/Workshops/Edit/14554?CLEAR" title="Edit">E</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Edit/14554?CLEAR" title="Edit">E</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Copy/14554?CLEAR" title="Copy">C</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Copy/14554?CLEAR" title="Copy">C</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Abort/14554?CLEAR" title="Abort">A</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Abort/14554?CLEAR" title="Abort">A</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Delete/14554?CLEAR" title="Delete">D</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Delete/14554?CLEAR" title="Delete">D</a> -->
                
                        
        
        </select>
        </form>
    </td></tr>
<tr style="background-color: white;">
        <td valign="top" style="font-size: 9px;">LT</td>
    <td valign="top" style="font-size: 9px;">
    <acronym style="cursor: help;" title="  Current">C
    
    </acronym></td>
        
    <td valign="top" align="left" style="font-size: 9px;">24.02.22</td>
    <td valign="top" align="left" style="font-size: 8px;">Workshop</td>
    <td valign="top" style="font-size: 9px;">SILC Academy</td>
    <td valign="top" align="left" style="font-size: 9px;">Copford Village Hall, 80 School Road, Copford, Colchester, Essex, CO6 1BX</td>
    <td valign="top" align="left" style="font-size: 9px;">None</td>
<!--    <td valign="top" align="center" style="font-size: 9px;">08.01.19 18.49</td> -->

    <td valign="top" align="right" style="font-size: 9px;" nowrap="nowrap">
        <form action="" method="get">
        <select name="x" size="1" onchange="location=this.options[this.selectedIndex].value;" style="border: 1px solid black; width: 40px;">
        
        <option value="#" title="Select an action"> -- </option>
        
        
                <option value="/Applications/COS/Administration/Workshops/Parameters/14280?CLEAR" title="Parameters">P</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Parameters/14280?CLEAR" title="Parameters">P</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Teachers/14280?CLEAR" title="Teachers">T</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Teachers/14280?CLEAR" title="Teachers">T</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Franchise/14280?CLEAR" title="Franchise">F</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Franchise/14280?CLEAR" title="Franchise">F</a> -->
                
                
        <option value="/Applications/COS/Administration/Workshop_Profiles?workshopRef=SA 24/2/19" title="User Profiles">U</option>
        <option value="/Applications/COS/Administration/Workshop_Waitlist?workshopRef=SA 24/2/19" title="Wait List">W</option>
    <!--    <a href="/Applications/COS/Administration/Workshop_Profiles?workshopRef=SA 24/2/19" title="User Profiles">U</a>
        <a href="/Applications/COS/Administration/Workshop_Waitlist?workshopRef=SA 24/2/19" title="Wait List">W</a>-->
        
                
                <option value="/Applications/COS/Administration/Workshops/Edit/14280?CLEAR" title="Edit">E</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Edit/14280?CLEAR" title="Edit">E</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Copy/14280?CLEAR" title="Copy">C</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Copy/14280?CLEAR" title="Copy">C</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Abort/14280?CLEAR" title="Abort">A</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Abort/14280?CLEAR" title="Abort">A</a> -->
                
                
                <option value="/Applications/COS/Administration/Workshops/Delete/14280?CLEAR" title="Delete">D</option>
<!--        <a href="/Applications/COS/Administration/Workshops/Delete/14280?CLEAR" title="Delete">D</a> -->
                
                        
        
        </select>
        </form>
    </td></tr>
</tbody></table>

【问题讨论】：

标签： javascript arrays web-scraping puppeteer

【解决方案1】：

我为其他来到这里的人找到了自己的解决方案。

下面的代码正在查找名称以“x”开头的所有选择标签。

然后它获取对象的长度 - 遍历所有元素以从每个元素中提取选项 1 值！这正是我所需要的。

       var sel;
       const relevantValues = [];
       for(var z=0; z<selects.length; z++){
       sel = selects[z];
       if(sel.name.indexOf('x') === 0){
       relevantValues.push(sel.options[1].value);
     };
     };

【讨论】：