'Clicking on Multiple buttons with same name,class,text in puppeteer
This is the html from where i want to click multiple buttons name restart
<tbody>
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="el-table_2_column_9 el-table__cell">
<div class="cell">
<div class="oui-network-badge">
<div class="head" style="background-color: rgb(144, 240, 144);">4g1</div>
<div>ppp10</div>
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_10 el-table__cell">
<div class="cell">
<div class="el-row" style="width: 100%;"><span>311480724822816</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_11 el-table__cell">
<div class="cell">
<div class="el-row" style="width: 100%;"><span>100.107.30.18</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_12 el-table__cell">
<div class="cell">
<div class="el-row" style="width: 100%;"><span>174.206.239.56</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_13 el-table__cell">
<div class="cell">
<div class="el-row" style="width: 100%;"><span>198.224.184.135</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_14 el-table__cell">
<div class="cell">
<div class="el-row" style="width: 100%;"><span>198.224.185.135</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_15 el-table__cell">
<div class="cell">
<div class="el-row" style="width: 100%;"><span>807742644 bytes</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_16 el-table__cell">
<div class="cell">
<div class="el-row" style="width: 100%;"><span>44624791 bytes</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_17 is-hidden el-table__cell">
<div class="cell">
<button type="button" class="el-button el-button--default el-button--mini">
<!----><!---->
<span>Refresh</span>
</button>
<button type="button" class="el-button el-button--warning el-button--mini">
<!----><!---->
<span>Redial</span>
</button>
<button type="button" class="el-button el-button--danger el-button--mini">
<!----><!---->
<span>Restart</span>
</button>
<button type="button" class="el-button el-button--primary el-button--mini">
<!----><!---->
<span>Edit</span>
</button>
</div>
</td>
</tr>
<tr class="el-table__row el-table__row--striped">
<td rowspan="1" colspan="1" class="el-table_2_column_9 el-table__cell">
<div class="cell">
<div class="oui-network-badge">
<div class="head" style="background-color: rgb(144, 240, 144);">4g2</div>
<div>ppp11</div>
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_10 el-table__cell">
<div class="cell">
<div class="el-row" style="width: 100%;"><span>311480724839466</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_11 el-table__cell">
<div class="cell">
<div class="el-row" style="width: 100%;"><span>100.98.149.115</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_12 el-table__cell">
<div class="cell">
<div class="el-row" style="width: 100%;"><span>174.206.225.91</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_13 el-table__cell">
<div class="cell">
<div class="el-row" style="width: 100%;"><span>198.224.184.135</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_14 el-table__cell">
<div class="cell">
<div class="el-row" style="width: 100%;"><span>198.224.185.135</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_15 el-table__cell">
<div class="cell">
<div class="el-row" style="width: 100%;"><span>440025553 bytes</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_16 el-table__cell">
<div class="cell">
<div class="el-row" style="width: 100%;"><span>25038298 bytes</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_2_column_17 is-hidden el-table__cell">
<div class="cell">
<button type="button" class="el-button el-button--default el-button--mini">
<!----><!---->
<span>Refresh</span>
</button>
<button type="button" class="el-button el-button--warning el-button--mini">
<!----><!---->
<span>Redial</span>
</button>
<button type="button" class="el-button el-button--danger el-button--mini">
<!----><!---->
<span>Restart</span>
</button>
<button type="button" class="el-button el-button--primary el-button--mini">
<!----><!---->
<span>Edit</span>
</button>
</div>
</td>
</tr>
<!---->
I want to click all restart button one by one or at once ,This is the code i have tried
const newel= await page.$x("//button[contains(text(),'Restart')]");
if(el){
await Promise.all([page.waitForNavigation(), newel[0].evaluate(e=>e.click())]);
}
when I have console the newel it is showing empty,i know the problem cause there are multiple buttons with same text,class and name so how can i specify each so i can click these buttons.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|