Методы $, $$, $eval, $$eval

Методы $, <span class="math display">$$, $eval, $$</span>eval в Puppeteer</p> <p>Puppeteer предоставляет различные методы для взаимодействия с DOM-элементами на страницах. Среди них методы <code>$</code>, <code>$$, eval < /code > и < code>eval < /code > играютключевуюрольпривыполнениитестовиавтоматизациидействий.Этиметодыпозволяютизвлекатьэлементыстраницы, манипулироватьихсодержимымивыполнятьразличныеоперациинаклиентскойстороне. < /p >  < p > Метод < code> позволяет выбрать первый элемент, который соответствует CSS-селектору, и возвращает его в виде объекта ElementHandle. Если элемент не найден, возвращается null. 

const element = await page.$(&
<p>В приведённом примере Puppeteer находит кнопку с ID
<code>submit</code> на странице и возвращает её как объект
<code>ElementHandle</code>. Этот объект позволяет выполнять
различные
действия с элементом, такие как клик, извлечение текста и изменение
атрибутов.</p>
<h3 id="применение">Применение</h3>
<p>Метод <code>$ используется в тех случаях,
когда необходимо работать с единственным элементом, подходящим под
определённый CSS-селектор. Он хорошо подходит для поиска уникальных
элементов, таких как кнопки, поля ввода или заголовки.




Пример использования:



const button = await page.$('button.submit');
await button.click();



В этом примере Puppeteer находит кнопку с классом submit и
кликает по ней.




Метод  < /code >  < /h2 >  < p > Метод < code>
возвращает все элементы, которые соответствуют CSS-селектору, в виде
массива объектов ElementHandle. Если элементы не найдены,
возвращается пустой массив.



const elements = await page.$$('div.product');



Здесь метод $$</code> выбирает
все элементы <code>div</code>, у
которых класс <code>product</code>. Результатом будет
массив, состоящий
из всех найденных элементов на странице.</p>
<h3 id="применение-1">Применение</h3>
<p>Метод <code>$$ полезен, когда нужно
обработать несколько элементов одновременно. Это может быть список
товаров, все строки таблицы или другие коллекции элементов, которые
могут встречаться несколько раз на странице.




Пример использования:



const items = await page.$$('.item');
for (let item of items) {
  const text = await item.evaluate(el => el.textContent);
  console.log(text);
}



В этом примере Puppeteer извлекает все элементы с классом
.item, и для каждого элемента выводит его текстовое
содержимое.




Метод eval < /code >  < /h2 >  < p > Метод < code>eval
используется для выполнения функции в контексте найденного элемента. Он
находит первый элемент, соответствующий CSS-селектору, и передаёт его в
функцию для выполнения нужных операций. Этот метод возвращает результат
выполнения функции.



const text = await page.$eval('h1', el => el.textContent);



Здесь Puppeteer находит первый элемент h1 и извлекает его
текстовое содержимое. Функция, переданная в $eval</code>,
получает DOM-элемент и возвращает его текстовое содержимое.</p>
<h3 id="применение-2">Применение</h3>
<p>Метод <code>$eval удобен, когда необходимо
не просто выбрать элемент, а выполнить с ним операцию и вернуть
результат в виде простого значения. Например, можно извлечь текст из
элемента или получить значение атрибута.




Пример использования:



const href = await page.$eval('a#link', el => el.getAttribute('href'));
console.log(href);



В этом примере Puppeteer извлекает значение атрибута href
из первого элемента с ID link.




Метод eval < /code >  < /h2 >  < p > Метод < code>eval
похож на $eval</code>, но работает
с
множеством элементов. Он находит все элементы, соответствующие
CSS-селектору, передаёт их в функцию и возвращает результат работы этой
функции для всех найденных элементов.</p>
<pre class="javascript"><code>const texts = await
page.$$eval(&#39;.product&#39;,
elements =&gt; {
  return elements.map(el =&gt; el.textContent);
});</code></pre>
<p>В этом примере Puppeteer находит все элементы с классом
<code>product</code>, извлекает текстовое содержимое каждого
элемента и
возвращает его в виде массива строк.</p>
<h3 id="применение-3">Применение</h3>
<p>Метод <code>$$eval</code> полезен, когда необходимо
работать с
несколькими элементами и вернуть результат в виде коллекции значений.
Это может быть полезно для извлечения списков данных, таких как имена
товаров, цены или ссылки.</p>
<p>Пример использования:</p>
<pre class="javascript"><code>const links = await
page.$$eval(&#39;a&#39;,
anchors =&gt; anchors.map(anchor =&gt; anchor.href));
console.log(links);</code></pre>
<p>В данном случае Puppeteer извлекает все ссылки
(<code>a</code>) на
странице и возвращает массив их атрибутов
<code>href</code>.</p>
<h2 id="различия-между-методами">Различия между
методами</h2>
<p>Хотя методы <code>$ и $$</code>, а также
<code>$eval</code> и <code>$$eval
похожи, между ними есть несколько отличий:



    

  • 
 < /code > и < code> < /code > возвращаютобъекты < code > ElementHandle < /code>,которыепредставляютэлементынастраницеимогутиспользоватьсядлявыполнениядальнейшихопераций, такихкаккликилиизменениеатрибутов. < /li >  < li >  < code>eval
и $$eval</code> сразу выполняют
функции на
найденных элементах и возвращают результат в виде простого значения,
например, текста или массива значений.</li>
<li>Метод <code>$</code> возвращает только первый
элемент, подходящий
под селектор, а <code>$$ — все элементы, которые
соответствуют селектору.

    • 




Пример комбинированного использования




Часто методы  < /code > и < code>$</code> используются в
сочетании с другими методами для более сложных операций на странице.
Например, можно найти все элементы списка и получить текст каждого
элемента.</p>
<pre class="javascript"><code>const listItems = await
page.$$eval(&#39;ul li&#39;,
items =&gt; items.map(item =&gt; item.textContent));
console.log(listItems);</code></pre>
<p>Здесь <code>$$eval</code> используется для извлечения
текста из всех
элементов списка <code>li</code>, которые находятся внутри
тега
<code>ul</code>.</p>
<h2 id="заключение">Заключение</h2>
<p>Методы <code>$, $$</code>, <code>$eval</code> и
<code>$$eval являются основными инструментами для
работы с элементами страницы в Puppeteer. Их правильное использование
позволяет эффективно извлекать и манипулировать DOM-элементами, что
делает тестирование и автоматизацию более гибкими и удобными. Понимание
этих методов и их различий помогает разрабатывать более сложные сценарии
тестирования и взаимодействия с веб-страницами.
Оглавление