Puppeteer — это инструмент для автоматизации браузера на основе Chromium, который предоставляет удобный API для взаимодействия с веб-страницами. Одной из важнейших задач при использовании Puppeteer является извлечение данных с веб-страниц. Этот процесс может включать в себя получение текста, атрибутов элементов, извлечение данных из таблиц, списков и других элементов страницы.
page. < /code > и < code > page. < /code > < /h4 > < p > ДляработысэлементамистраницыPuppeteerпредоставляетдваметода : < code > page.
и page.$$</code>. Первый из них
используется
для получения одного элемента по CSS-селектору, второй — для извлечения
всех элементов, соответствующих указанному селектору.</p>
<p>Пример получения одного элемента:</p>
<pre class="javascript"><code>const element = await
page.$(&
<p>Если необходимо извлечь несколько элементов, можно использовать
<code>page.$$:
const elements = await page.$$('.my-element');
Метод page.$$</code> возвращает
массив элементов,
соответствующих селектору. Оба метода возвращают объект типа
<code>ElementHandle</code>, который представляет собой
ссылку на элемент
в DOM-дереве страницы.</p>
<h4
id="извлечение-текста-с-помощью-elementhandle.evaluate">Извлечение
текста с помощью
<code>elementHandle.evaluate</code></h4>
<p>Для получения текста из элемента используется метод
<code>evaluate</code>. Он позволяет выполнить JavaScript в
контексте
страницы, получить доступ к элементу и вернуть результат.</p>
<p>Пример получения текста из элемента:</p>
<pre class="javascript"><code>const text = await
element.evaluate(el => el.textContent);</code></pre>
<p>В этом примере <code>element</code> — это объект
типа
<code>ElementHandle</code>, который был получен с помощью
метода
<code>page.$</code>. Метод <code>evaluate</code>
позволяет
взаимодействовать с элементом на странице и возвращать результат
выполнения JavaScript, который будет передан обратно в
Node.js.</p>
<h4
id="извлечение-атрибутов-с-помощью-elementhandle.getproperty">Извлечение
атрибутов с помощью
<code>elementHandle.getProperty</code></h4>
<p>Для получения атрибутов элемента можно использовать метод
<code>getProperty</code>. Это полезно, например, когда нужно
извлечь
значение атрибута <code>href</code> у ссылки или
<code>src</code> у
изображения.</p>
<p>Пример получения значения атрибута:</p>
<pre class="javascript"><code>const href = await
element.getProperty('href');
const hrefValue = await href.jsonValue();</code></pre>
<p>Метод <code>getProperty</code> возвращает объект,
представляющий
свойство элемента. Чтобы получить значение этого свойства в формате,
пригодном для дальнейшей обработки в Node.js, необходимо использовать
метод <code>jsonValue()</code>.</p>
<h4 id="извлечение-данных-из-форм-и-инпутов">Извлечение данных из
форм и
инпутов</h4>
<p>Получение значений из форм и полей ввода также является
распространенной задачей. Puppeteer позволяет легко работать с
элементами формы, такими как текстовые поля, радиокнопки и
чекбоксы.</p>
<p>Пример получения значения текстового поля:</p>
<pre class="javascript"><code>const input = await
page.$('input[name="username"]');
const value = await input.evaluate(el =>
el.value);</code></pre>
<p>Этот код извлекает значение из текстового поля с именем
<code>username</code>.</p>
<p>Для чекбоксов и радиокнопок можно извлечь состояние (отметка
или нет)
следующим образом:</p>
<pre class="javascript"><code>const checkbox = await
page.$('input[type="checkbox"]');
const checked = await checkbox.evaluate(el =>
el.checked);</code></pre>
<h4 id="работа-с-таблицами-и-списками">Работа с таблицами и
списками</h4>
<p>Одной из частых задач является извлечение данных из таблиц или
списков. Puppeteer позволяет легко работать с подобными элементами с
помощью методов <code>evaluate</code>,
<code>$$ и map.
Пример получения данных из таблицы:
const rows = await page.$$eval('table tr', rows => {
return rows.map(row => {
const cells = row.querySelectorAll('td');
return Array.from(cells).map(cell => cell.textContent.trim());
});
});В этом примере извлекаются все строки таблицы, а затем из каждой строки — данные всех ячеек. Результатом выполнения этого кода будет массив, содержащий массивы значений ячеек.
Для работы с динамическими списками можно использовать аналогичный подход:
const items = await page.$$eval('.item-list li', items => {
return items.map(item => item.textContent.trim());
});page.evaluate для сложных операций
Если необходимо выполнить более сложные операции по извлечению данных с
страницы, можно использовать метод page.evaluate. Он
позволяет запускать произвольный JavaScript в контексте браузера и
возвращать результат в Node.js.
Пример извлечения данных с использованием более сложной логики:
const data = await page.evaluate(() => {
const title = document.querySelector('h1').textContent;
const items = Array.from(document.querySelectorAll('.item')).map(item => {
const name = item.querySelector('.name').textContent;
const price = item.querySelector('.price').textContent;
return { name, price };
});
return { title, items };
});
Этот код извлекает название страницы и список товаров с их названиями и
ценами. Метод evaluate позволяет выполнять любые
JavaScript-операции, как если бы они выполнялись непосредственно в
браузере.
В реальной жизни часто возникает необходимость работать с данными,
которые загружаются асинхронно, например, через AJAX-запросы или
динамическую загрузку контента. Puppeteer позволяет синхронизировать
выполнение скриптов с загрузкой данных, используя методы, такие как
waitForSelector и waitForFunction.
Пример ожидания загрузки элемента:
await page.waitForSelector('.loaded-content');Этот метод заставляет Puppeteer ждать, пока элемент с заданным селектором не появится на странице, что позволяет синхронизировать действия с динамически загружаемым контентом.
В процессе извлечения данных с веб-страниц могут возникать различные ошибки, например, если элемент не найден или страница не успела загрузиться. Для таких случаев полезно использовать обработку ошибок, чтобы гарантировать корректную работу скрипта.
Пример обработки ошибок:
try {
const element = await page.$('.non-existent-element');
if (element) {
const text = await element.evaluate(el => el.textContent);
console.log(text);
} else {
console.log('Элемент не найден');
}
} catch (error) {
console.error('Ошибка при извлечении данных:', error);
}В этом примере, если элемент не найден, выводится сообщение об ошибке. В случае других проблем (например, ошибки сети или неудачного выполнения JavaScript на странице) будет выведена информация о причине сбоя.
Получение данных с веб-страниц с помощью Puppeteer — это мощный инструмент для автоматизации тестирования, парсинга и других задач. Благодаря гибкости API, Puppeteer позволяет не только извлекать статический контент, но и работать с динамическими элементами, асинхронными запросами и сложными структурами данных.