Я новичок в кукловодстве и не знаю его полного потенциала. У меня есть следующий код, который возвращает результаты скраба. Но формат - одна длинная строка с разделителями табуляции. Я пытаюсь получить правильный JSON.
(async () => {
const browser = await puppeteer.launch( {headless: true} );
const page = await browser.newPage();
await page.goto(url, {waitUntil: 'networkidle0'});
let data = await page.evaluate(() => {
const table = Array.from(document.querySelectorAll('table[id="gvM"] > tbody > tr '));
return table.map(td => td.innerText);
})
console.log(data);
})();
Вот таблица HTML:
<table cellspacing="0" cellpadding="4" rules="all" border="1" id="gvM" >
<tr >
<th scope="col">#</th><th scope="col">Resource</th><th scope="col">EM #</th><th scope="col">CVO</th><th scope="col">Start</th><th scope="col">End</th><th scope="col">Status</th><th scope="col">Assignment</th><th scope="col"> </th>
</tr>
<tr >
<td>31</td><td>Smith</td><td>618</td><td align="center"><span class="aspNetDisabled"><input id="gvM_ctl00_0" type="checkbox" name="gvM$ctl02$ctl00" disabled="disabled" /></span></td><td> </td><td> </td><td>AVAILABLE EXEC</td><td style="width:800px;">6F</td><td align="center"></td>
</tr>
<tr style="background-color:LightGreen;">
<td>1</td><td>John</td><td>604</td><td align="center"><span class="aspNetDisabled"></span></td><td>1400</td><td>2200</td><td>AVAILABLE</td><td style="width:800px;"> </td><td align="center"></td>
</tr>
</table>
Вот что я получаю:
[ '#\tResource\tEM #\tCVO\tStart\tEnd\tStatus\tAssignment\t ', '31\tSmith\t618\t\t \t \tAVAILABLE EXEC\t6F\t', '1\tJohn\t604\t\t1400\t2200\tAVAILABLE\t \t']
и вот что я хочу получить:
[{'#','Resource','EM', '#','CVO','Start','tEnd','Status', 'Assignment'}, {'31','Smith', '618',' ',' ',' ',' ','AVAILABLE EXEC','6F'}, {'1','John', '604',' ',' ','1400 ','2200','AVAILABLE', ' '}]
Я применил ответ ниже, но я не смог воспроизвести результаты. Возможно, я делаю что-то не так. Не могли бы вы объяснить, почему я все испортил?
const context = document.querySelectorAll('table[id="gvM"] > tbody > tr ');
const query = (selector, context) => Array.from(context.querySelectorAll(selector));
console.log(
query('tr', context).map(row =>
query('td, th', row).map(cell =>
cell.textContent))
);
Что означает эта ошибка? (node:6204) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with..catch(). (rejection id: 1) (node:6204) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Если вам нужен массив массивов из таблицы, вы можете попробовать этот подход с отображением всех строк в массив строк и всех ячеек в массив ячеек внутри элемента строки (этот вариант использует Array.from()
с функцией отображения в качестве второго аргумента):
const data = await page.evaluate(
() => Array.from(
document.querySelectorAll('table[id="gvM"] > tbody > tr'),
row => Array.from(row.querySelectorAll('th, td'), cell => cell.innerText)
)
);
Я не думаю, что это связано с Puppeteer, но с тем, как вы "перебираете" свой <table>
:
В своей попытке вы просто сбрасываете текстовое содержимое всей строки, что дает результат, который вы наблюдаете. На самом деле для каждого <tr>
вам нужно получить все его элементы <td>
(или <th>
):
const query = (selector, context) =>
Array.from(context.querySelectorAll(selector));
console.log(
query('tr', document).map(row =>
query('td, th', row).map(cell =>
cell.textContent))
)
<table>
<tr>
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
</table>