Работа с JSHandle и ElementHandle

Puppeteer — это мощный инструмент для автоматизации браузерных действий с использованием JavaScript. Одним из важных аспектов работы с Puppeteer является манипулирование элементами страницы. Для этого Puppeteer предоставляет два типа объектов — JSHandle и ElementHandle, которые позволяют взаимодействовать с элементами DOM и их свойствами. Рассмотрим их использование и различия более подробно.

JSHandle

JSHandle — это объект, который предоставляет доступ к значению или элементу, расположенным в контексте страницы. Используется для взаимодействия с любыми JavaScript объектами на странице, включая примитивные типы данных (строки, числа, массивы), функции и объекты.

Когда Puppeteer выполняет поиск или получение какого-либо значения на странице, результатом может быть JSHandle, который предоставляет возможность работы с этим значением без непосредственного извлечения его из браузера. Для этого используется метод page.evaluate() или page.evaluateHandle().

Основные особенности JSHandle:

  • Не является DOM-узлом: Это просто указатель на объект JavaScript в контексте страницы.
  • Используется для любых объектов: Может быть использован для работы как с DOM-элементами, так и с примитивами или сложными структурами данных.
  • Требует дополнительной работы для извлечения значений: Для получения значений из JSHandle необходимо использовать методы jsonValue() или getProperties().

Пример работы с JSHandle: 

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');

  // Получаем объект JSHandle
  const jsHandle = await page.evaluateHandle(() => window.location);

  // Извлекаем данные из объекта JSHandle
  const location = await jsHandle.jsonValue();
  console.log(location); // { href: 'https://example.com', ... }

  await browser.close();
})();

В этом примере мы получаем JSHandle для объекта window.location и извлекаем его значения через метод jsonValue(). Это позволяет работать с объектами, не вынимая их напрямую из браузера.

ElementHandle

ElementHandle — это специализированный тип JSHandle, который предоставляет доступ к элементам DOM. Он используется для манипуляций с реальными HTML-элементами на странице. ElementHandle позволяет работать с DOM-узлами и взаимодействовать с ними, например, кликать по ним, вводить текст или получать их свойства.

Важно помнить, что ElementHandle является оберткой над реальным элементом DOM, и он не содержит данных, таких как текст или атрибуты. Для получения этих данных нужно использовать методы, такие как getProperty() или evaluate().

Основные особенности ElementHandle:

  • Прямое взаимодействие с DOM-элементами: Может быть использован для работы с HTML-элементами на странице, включая их атрибуты и содержимое.
  • Поддержка пользовательских действий: Через ElementHandle можно выполнять действия, такие как клик, ввод текста или изменение свойств элементов.
  • Методы для извлечения данных: Для работы с содержимым элемента, например, текстом или значениями атрибутов, используются методы типа getProperty().

Пример работы с ElementHandle: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');

  // Получаем ElementHandle для элемента
  const elementHandle = await page.$('h1');

  // Получаем текстовое содержимое элемента
  const text = await elementHandle.evaluate(el => el.textContent);
  console.log(text); // Примерный вывод: 'Example Domain'

  // Выполняем клик по элементу
  await elementHandle.click();

  await browser.close();
})();

В этом примере мы получаем ElementHandle для заголовка <h1> и извлекаем его текст с помощью метода evaluate(). Мы также можем выполнить действия, такие как клик, с использованием этого объекта.

Различия между JSHandle и ElementHandle

Хотя оба типа объектов (JSHandle и ElementHandle) связаны с взаимодействием с элементами на странице, они имеют несколько ключевых различий:

  1. Тип данных: JSHandle может быть использован для работы с любыми объектами в контексте страницы, включая примитивы и сложные объекты JavaScript. ElementHandle, в свою очередь, является специализированным объектом, который работает исключительно с DOM-элементами.

  2. Методы взаимодействия: ElementHandle предоставляет доступ к методам, специфичным для DOM-элементов, таким как click(), type(), hover(), а JSHandle используется для работы с общими JavaScript объектами и не имеет таких методов.

  3. Доступ к данным: JSHandle предоставляет методы, такие как jsonValue() для извлечения значений, а ElementHandle использует методы, такие как getProperty() и evaluate(), для работы с содержимым элементов.

  4. Применение: JSHandle используется в случаях, когда необходимо работать с любыми объектами, которые не являются элементами DOM. Например, это может быть полезно для работы с данными, которые генерируются через JavaScript. ElementHandle используется, когда необходимо взаимодействовать с реальными элементами страницы, например, для кликания, ввода текста или получения атрибутов.

Использование в реальных задачах

Обе сущности часто используются в автоматизированном тестировании и веб-скрапинге, где необходимо манипулировать контентом веб-страницы. Например, ElementHandle часто используется для тестирования функциональности интерфейса пользователя, включая проверку кликов, навигации, ввода данных в формы. JSHandle может быть полезен для работы с состоянием JavaScript, которое может быть недоступно через обычные средства веб-автоматизации.

Пример работы с JSHandle для извлечения информации о сессии пользователя: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');

  // Получаем JSHandle для объекта sessionStorage
  const sessionHandle = await page.evaluateHandle(() => sessionStorage);

  // Извлекаем данные из sessionStorage
  const sessionData = await sessionHandle.evaluate(storage => storage.getItem('userSession'));
  console.log(sessionData); // Примерный вывод: 'user123'

  await browser.close();
})();

В данном примере с помощью JSHandle мы получаем доступ к объекту sessionStorage и извлекаем сохранённые данные.

Заключение

Понимание и использование JSHandle и ElementHandle позволяет эффективно работать с динамическим контентом страниц и делать автоматизированные тесты более гибкими и мощными. Важно выбирать подходящий тип объекта в зависимости от того, что именно нужно тестировать или скрапить: DOM-элементы или JavaScript-объекты.

Оглавление