В библиотеке Puppeteer поиск элементов на странице является одной из
ключевых операций, используемых для автоматизации браузерных действий.
Puppeteer предоставляет два основных способа для работы с элементами:
через объект page и через elementHandle. Эти
методы позволяют находить элементы и взаимодействовать с ними, а также
осуществлять тестирование веб-страниц с высокой степенью гибкости. Важно
понимать, как правильно использовать оба подхода, чтобы эффективно
решать задачи тестирования.
Методы объекта page позволяют находить элементы на странице
с помощью различных селекторов и взаимодействовать с ними. Это самый
прямой способ работы с элементами в Puppeteer. Для поиска можно
использовать как стандартные CSS-селекторы, так и более специфичные
XPath-выражения.
page
page.(selector) < /code > < /strong > < /li > < /ol > < p > Метод < code>(selector)
возвращает первый элемент, который соответствует переданному
CSS-селектору. Если элемент не найден, возвращается null.
Пример:
const element = await page.$(& <ol start="2" type="1"> <li><strong><code>page.$(selector) < /code > < /strong > < /li > < /ol > < p > Метод < code> < /code > работаетаналогичнометоду < code>(selector), но в отличие от него возвращает все элементы, подходящие под селектор, в виде массива. Если элементы не найдены, возвращается пустой массив.Пример:
const elements = await page.$$('div.item');
page.eval(selector, pageFunction) < /code > < /strong > < /li > < /ol > < p > Метод < code > page.evalвыполняет переданную функцию на первом найденном элементе, соответствующем селектору. Этот метод полезен, когда нужно получить данные с элемента или выполнить какие-то действия.Пример:
const text = await page.$eval('h1.title', element => element.textContent);
page.eval(selector, pageFunction) < /code > < /strong > < /li > < /ol > < p > Метод < code>evalработает аналогично методуpage.$eval</code>, но применяет переданную функцию ко всем найденным элементам, соответствующим селектору. Возвращаемое значение — это результат выполнения функции для каждого элемента.</p> <p>Пример:</p> <pre class="javascript"><code>const texts = await page.$$eval('div.item', elements => elements.map(e => e.textContent));</code></pre> <ol start="5" type="1"> <li><strong><code>page.waitForSelector(selector)</code></strong></li> </ol> <p>Метод <code>waitForSelector</code> используется для ожидания появления элемента на странице. Это полезно, когда необходимо дождаться загрузки контента перед выполнением дальнейших действий.</p> <p>Пример:</p> <pre class="javascript"><code>await page.waitForSelector('div.loading', { visible: true });</code></pre> <h4 id="важные-моменты-при-использовании-методов-page">Важные моменты при использовании методов <code>page</code></h4> <ul> <li>Селекторы в Puppeteer аналогичны тем, что используются в CSS и могут включать псевдоклассы, атрибуты, и комбинированные селекторы.</li> <li>Метод <code>waitForSelector</code> полезен для работы с динамическим контентом, когда элемент появляется или исчезает спустя некоторое время.</li> <li>Методы <code>page.$evalиpage.$$eval</code> выполняют операции на элементах прямо в контексте браузера, что позволяет взаимодействовать с DOM, избегая дополнительных операций в Node.js.</li> </ul> <h3 id="работа-с-элементами-через-elementhandle">Работа с элементами через <code>elementHandle</code></h3> <p><code>elementHandle</code> представляет собой объект, который предоставляет более глубокий и прямой контроль над отдельными элементами на странице. Это позволяет более точно и эффективно манипулировать элементами.</p> <h4 id="что-такое-elementhandle">Что такое <code>elementHandle</code></h4> <p>Когда метод поиска элемента через объект <code>page</code> возвращает элемент, он может быть преобразован в <code>elementHandle</code>, который предоставляет дополнительные возможности для взаимодействия с элементом. <code>elementHandle</code> является ссылкой на реальный DOM-элемент, и с помощью него можно выполнять более сложные операции.</p> <h4 id="примеры-использования-elementhandle">Примеры использования <code>elementHandle</code></h4> <ol type="1"> <li><strong>Получение <code>elementHandle</code> с помощью <code>page.$</code></strong></li> </ol> <p>Метод <code>page.$</code> возвращает объект <code>elementHandle</code>, с помощью которого можно взаимодействовать с элементом.</p> <p>Пример:</p> <pre class="javascript"><code>const button = await page.$('button.submit');</code></pre> <ol start="2" type="1"> <li><strong>Взаимодействие с элементом через <code>elementHandle</code></strong></li> </ol> <p>После получения <code>elementHandle</code> можно работать с элементом, например, кликать на него, вводить текст, или извлекать его свойства.</p> <p>Пример:</p> <pre class="javascript"><code>await button.click();</code></pre> <ol start="3" type="1"> <li><strong>Извлечение данных из элемента через <code>elementHandle</code></strong></li> </ol> <p>Можно получить различные свойства элемента, такие как текстовое содержимое, атрибуты, стили и другие.</p> <p>Пример:</p> <pre class="javascript"><code>const text = await button.evaluate(el => el.textContent);</code></pre> <ol start="4" type="1"> <li><strong>Использование <code>elementHandle</code> для выполнения сложных операций</strong></li> </ol> <p><code>elementHandle</code> позволяет работать с элементом в контексте браузера, что важно для выполнения сложных операций, таких как динамическое изменение DOM или использование JavaScript на элементе.</p> <p>Пример:</p> <pre class="javascript"><code>const input = await page.$('input[name="username"]'); await input.type('testuser');</code></pre> <ol start="5" type="1"> <li><strong>Удаление элемента через <code>elementHandle</code></strong></li> </ol> <p>Для удаления элемента из DOM можно использовать метод <code>evaluate</code> вместе с удалением через JavaScript.</p> <p>Пример:</p> <pre class="javascript"><code>await elementHandle.evaluate(el => el.remove());</code></pre> <h4 id="отличия-elementhandle-и-методов-поиска-через-page">Отличия <code>elementHandle</code> и методов поиска через <code>page</code></h4> <ul> <li><code>elementHandle</code> является более мощным инструментом для манипуляций с элементом, в отличие от методов <code>page</code>, которые чаще всего используются для извлечения информации.</li> <li>Через <code>elementHandle</code> можно работать с состоянием элементов непосредственно в браузере, что дает больше возможностей для тестирования и автоматизации.</li> <li>Методы поиска через <code>page</code> (такие как <code>page.$eval</code> и <code>page.$$eval) сразу выполняют действия с элементами, тогда как использованиеelementHandleтребует дополнительных шагов для выполнения операций.Комбинированное использование методов
pageиelementHandleЧасто для выполнения автоматизации или тестирования полезно комбинировать методы поиска через
pageи работу сelementHandle. Например, сначала можно найти элемент черезpage.$</code>, а затем использовать его в дальнейшем через <code>elementHandle</code> для более сложных операций.</p> <p>Пример:</p> <pre class="javascript"><code>const elementHandle = await page.$('div.container'); await elementHandle.evaluate(el => { el.style.backgroundColor = 'red'; });
Такой подход позволяет эффективно управлять элементами и их состоянием на странице, предоставляя больше гибкости в тестировании.
page.(selector) < /code > < /strong > : находитпервыйэлементпоCSS − селектору. < /li > < li > < strong > < code > page.(selector) < /code > < /strong > : находитвсеэлементыпоCSS − селектору. < /li > < li > < strong > < code > page.eval(selector,
pageFunction): выполняет функцию на найденном элементе.
page.$$eval(selector, pageFunction):
выполняет функцию на всех найденных элементах.
elementHandle: объект для работы с
реальными DOM-элементами, полученными через page.
elementHandle.evaluate(): позволяет
взаимодействовать с элементом в контексте браузера.
Понимание различий между этими методами и их совместное использование позволяет создавать более стабильные и гибкие автоматизированные тесты и скрипты с использованием Puppeteer.