Работа с DOM через evaluate

В процессе автоматизации тестирования веб-приложений часто возникает необходимость взаимодействовать с содержимым страницы на уровне браузера. Одним из мощных инструментов для манипуляции с элементами DOM в Puppeteer является метод evaluate. Этот метод позволяет выполнять JavaScript код непосредственно в контексте страницы, предоставляя доступ к DOM и взаимодействие с ним, как если бы это делал пользователь в обычном браузере.

Основные принципы работы с evaluate

Метод evaluate предоставляет возможность выполнить код в контексте браузера, а не в Node.js. Это означает, что доступ к объектам DOM, элементам страницы, стилям и другим атрибутам осуществляется в изолированной среде браузера, что делает взаимодействие более натуральным и эффективным.

Синтаксис метода выглядит следующим образом: 

page.evaluate(pageFunction[, ...args])
  • pageFunction: функция, которая будет выполнена в контексте страницы. Она может быть обычной функцией или стрелочной функцией.
  • args: аргументы, которые передаются в функцию. Эти аргументы сериализуются и отправляются на страницу.

Взаимодействие с DOM

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

Пример 1: Получение текста элемента

Для того чтобы получить текстовое содержимое элемента на странице, можно воспользоваться следующим подходом: 

const title = await page.evaluate(() => {
  const element = document.querySelector(&
  return element ? element.textContent : null;
});

console.log(title); // Выведет текст содержимого <h1> на странице

В данном примере мы извлекаем текст из первого элемента <h1> на странице и возвращаем его в Node.js. Все взаимодействие с DOM происходит в функции, передаваемой в evaluate, что позволяет работать с элементами, не выходя за пределы страницы.

Пример 2: Изменение стилей элемента

Другой распространенный случай — изменение стилей элемента на странице. Это может быть полезно, например, для проверки того, как приложение реагирует на динамические изменения интерфейса. 

await page.evaluate(() => {
  const element = document.querySelector('#button');
  if (element) {
    element.style.backgroundColor = 'red';
  }
});

В данном примере мы изменяем стиль кнопки с id button, делая её фон красным. Такой подход позволяет проверять визуальные изменения на странице.

Взаимодействие с элементами через evaluate

Иногда необходимо не только читать данные из элементов, но и выполнять действия, такие как клик по кнопке, ввод текста в поле или прокрутка страницы.

Пример 3: Клик по элементу

Для имитации клика по элементу на странице можно использовать следующий код: 

await page.evaluate(() => {
  const button = document.querySelector('button');
  if (button) {
    button.click();
  }
});

Этот код находит первую кнопку на странице и кликает по ней. Такой метод полезен для тестирования пользовательских взаимодействий с элементами интерфейса.

Пример 4: Ввод текста в форму

Похожие действия можно выполнять и с формами. Для ввода текста в текстовое поле нужно найти соответствующий элемент и использовать метод value для задания текста. 

await page.evaluate(() => {
  const input = document.querySelector('input[type="text"]');
  if (input) {
    input.value = 'Пример текста';
  }
});

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

Работа с аргументами и результатами

Метод evaluate позволяет передавать аргументы в контекст страницы. Это удобно для того, чтобы динамически изменять поведение тестов или тестировать различные сценарии с разными входными данными.

Пример 5: Передача аргументов в evaluate 

const elementText = await page.evaluate((selector) => {
  const element = document.querySelector(selector);
  return element ? element.textContent : null;
}, '#header');

console.log(elementText); // Текст элемента с id="header"

В этом примере в функцию evaluate передается селектор элемента. Таким образом, можно использовать динамичные значения, что делает код гибким.

Пример 6: Возврат данных из evaluate

Метод evaluate может возвращать результаты выполнения JavaScript кода на странице обратно в Node.js. Это позволяет получить информацию о текущем состоянии DOM или других данных. 

const pageTitle = await page.evaluate(() => {
  return document.title;
});

console.log(pageTitle); // Заголовок страницы

В данном примере метод evaluate возвращает название текущей страницы, которое затем выводится в консоль.

Ограничения и особенности

Хотя evaluate мощный инструмент, он имеет несколько ограничений:

  1. Изоляция контекста: Код, выполняемый в evaluate, не имеет прямого доступа к переменным или объектам, находящимся в Node.js. Например, нельзя передать сложные объекты или функции напрямую, так как они будут сериализованы.

  2. Возврат значений: Возвращаемые данные из evaluate также подвергаются сериализации. Это означает, что нельзя напрямую передавать функции, undefined, или другие сложные типы данных. Однако можно работать с простыми типами данных, такими как строки, числа и массивы.

  3. Производительность: Частое использование evaluate для манипуляций с DOM может повлиять на производительность тестов, особенно если код работает с большими объемами данных. В таких случаях следует оценить, насколько эффективно вы используете evaluate и, возможно, рассмотреть другие методы взаимодействия.

Заключение

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

Оглавление