Метод evaluateHandle

Метод evaluateHandle в Puppeteer предоставляет способ взаимодействия с элементами страницы через ссылки на DOM-объекты, обрабатываемые в контексте браузера. Он позволяет не только выполнить функцию в контексте страницы, но и возвращать дескрипторы объектов, которые затем можно использовать для работы с данными или DOM-элементами.

evaluateHandle выполняет функцию, переданную в качестве аргумента, в контексте страницы, а затем возвращает объект типа JSHandle. В отличие от метода evaluate, который возвращает результат выполнения функции, evaluateHandle возвращает дескриптор (handle) объекта на странице. Это позволяет работать с объектами или элементами страницы, не загружая их в контекст Node.js.

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

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const handle = await page.evaluateHandle(() => document.body);
  console.log(handle);  // Выводит дескриптор элемента body

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

В этом примере происходит следующее:

  1. Страница загружается с URL https://example.com.
  2. Функция evaluateHandle выполняет код, возвращающий элемент body.
  3. Возвращается дескриптор handle, который можно использовать для дальнейших операций с этим элементом.

Когда использовать evaluateHandle

evaluateHandle полезен в тех случаях, когда нужно работать с объектами на странице, которые нельзя просто получить через обычные возвращаемые значения. Например, если нужно сохранить ссылку на DOM-элемент, чтобы потом выполнить дополнительные действия с этим элементом, или когда возвращаемое значение является сложным объектом, с которым необходимо взаимодействовать в дальнейшем.

Это также удобно, когда нужно работать с элементами, являющимися объектами или коллекциями объектов, а не просто значениями, такими как числа или строки.

Работа с объектами через JSHandle

Когда вы получаете дескриптор с помощью evaluateHandle, важно помнить, что это не сам объект или элемент, а его дескриптор, через который можно выполнять различные действия. Дескриптор объекта предоставляет доступ к методам и свойствам этого объекта, которые позволяют взаимодействовать с ним.

Пример работы с элементом с использованием дескриптора: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const handle = await page.evaluateHandle(() => document.body);

  // Работаем с дескриптором элемента
  const innerHTML = await handle.getProperty('innerHTML');
  const text = await innerHTML.jsonValue();
  console.log(text);

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

Здесь:

  • Мы получаем дескриптор элемента body с помощью evaluateHandle.
  • Через дескриптор получаем свойство innerHTML.
  • Вызываем jsonValue(), чтобы извлечь значение этого свойства.

Это пример того, как можно извлекать сложные данные с использованием дескрипторов.

Важные особенности метода

  • Асинхронность: evaluateHandle — асинхронная функция, которая возвращает промис, разрешающийся в дескриптор объекта на странице.
  • Работа с DOM: Метод позволяет взаимодействовать с элементами страницы на уровне браузера, что дает возможность работать с элементами и объектами, которые невозможно получить через обычные методы, например, элементы, подвергшиеся динамическим изменениям.
  • Отличие от evaluate: В отличие от evaluate, который возвращает значения, такие как строки или числа, evaluateHandle возвращает дескрипторы объектов, что позволяет работать с ними непосредственно в контексте браузера.

Сравнение с другими методами

Метод evaluateHandle отличается от других методов Puppeteer тем, что позволяет работать с объектами и элементами на странице через их дескрипторы, а не просто извлекать данные. Если задача сводится к извлечению простых значений (строк, чисел и т.д.), то гораздо проще и быстрее использовать evaluate. В случае, когда нужно работать с более сложными структурами данных или DOM-элементами, evaluateHandle является оптимальным выбором.

Применение в тестировании

Метод evaluateHandle полезен для взаимодействия с объектами страницы, когда тестируемые компоненты изменяются динамически или имеют сложные структуры. Например, при тестировании интерфейсов, которые включают в себя сложные визуальные элементы или сложные формы, использование дескрипторов позволяет выполнять операции с ними напрямую.

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

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Получаем дескриптор элемента с id 'content'
  const contentHandle = await page.evaluateHandle(() => document.getElementById('content'));

  // Проверяем его наличие
  const isElementVisible = await contentHandle.asElement().isIntersectingViewport();
  console.log(isElementVisible ? 'Элемент видим' : 'Элемент скрыт');

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

Здесь:

  • Мы получаем дескриптор элемента с ID content.
  • С помощью метода asElement() превращаем дескриптор в элемент, с которым можно работать как с обычным DOM-элементом.
  • Метод isIntersectingViewport() проверяет, видим ли элемент в области просмотра.

Советы по работе с evaluateHandle

  1. Использование с селекторами: Для динамически изменяющихся элементов или компонентов, которые создаются во время работы страницы, использование evaluateHandle позволяет получить стабильные ссылки на эти объекты, в отличие от статичных значений.
  2. Управление памятью: Работая с дескрипторами, важно помнить, что они не освобождают память автоматически. После завершения работы с дескриптором стоит вызывать метод dispose(), чтобы избежать утечек памяти. 
const handle = await page.evaluateHandle(() => document.body);
// После работы с дескриптором, если он больше не нужен
await handle.dispose();
  1. Сложность объектов: Если вы работаете с сложными объектами или коллекциями, evaluateHandle предоставляет способ не только извлечь данные, но и взаимодействовать с этими объектами, что невозможно сделать через обычные методы evaluate.

Таким образом, evaluateHandle является мощным инструментом для работы с объектами на странице, предоставляя доступ к элементам и структурам данных через их дескрипторы. Этот метод помогает гибко решать задачи, связанные с манипуляциями на динамически изменяющихся веб-страницах, что делает его важной частью любого набора инструментов для автоматизированного тестирования с использованием Puppeteer.

Оглавление