I’m trying to learn and scrape CSS selectors in Puppetter. There is a simple table and I want to fetch all of prices with DOM. When I try document.querySelectorAll("span")on the console,
it selects all of span tag.I need only prices, and I want to select first two h3 tags which includes 1 and 2 in Number column.
Here is a simple table for my question.
<html
<body>
<div class="example">
<table class="table" border="1" cellpadding="10">
<thead>
<td>Number</td>
<td>Content</td>
<td>Price</td>
<td>Piece</td>
</thead>
<tbody>
<tr data-type="data">
<td class="price"><h3>1</h3></td>
<td>4 Point</td>
<td><span style="font-size: 16px;font-weight: 600;"> 14$</span></td>
<td>1</td>
</tr>
<tr data-type="data">
<td><h3>2</h3></td>
<td>5 Point</td>
<td><span style="font-size: 16px;font-weight: 600;">15$</span></td>
<td>1</td>
</tr>
<tr data-type="data">
<td><h3>3</h3></td>
<td>6 Point</td>
<td><span style="font-size: 16px;font-weight: 600;">16$</td></span>
<td>1</td>
</tr>
<tfoot>
<tr>
<td style='text-align:center' colspan="4"> <span style="font-size: 16px;">Footer</span></td>
</tr>
</tfoot>
</tbody>
</table>
</div>
</body>
</html>