Модификация содержимого страницы

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

Изменение текста на странице

Чтобы изменить текст на странице, можно использовать метод page.evaluate(), который позволяет выполнять JavaScript-код в контексте страницы. Внутри этого метода можно получить доступ к элементам DOM и модифицировать их содержимое.

Пример: 

const puppeteer = require(&

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

  // Изменение текста на странице
  await page.evaluate(() => {
    document.querySelector('h1').textContent = 'Новый заголовок';
  });

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

В этом примере изменяется текст первого элемента <h1> на странице. Метод textContent позволяет установить новый текст.

Изменение значений форм

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

Пример изменения значения поля ввода: 

await page.evaluate(() => {
  document.querySelector('input[name="username"]').value = 'новое_значение';
});

Чтобы выбрать элемент в выпадающем списке, используется метод selectedIndex или можно симулировать выбор с помощью метода select.

Пример выбора значения в выпадающем списке: 

await page.evaluate(() => {
  document.querySelector('select[name="country"]').value = 'RU';
});

Для работы с флажками или радиокнопками можно использовать метод checked.

Пример установки флажка: 

await page.evaluate(() => {
  document.querySelector('input[type="checkbox"]').checked = true;
});

Добавление новых элементов на страницу

Добавление новых элементов на страницу также можно выполнить с помощью page.evaluate(). Этот метод позволяет манипулировать DOM, создавая новые элементы, добавляя их в нужное место и изменяя их свойства.

Пример добавления нового элемента: 

await page.evaluate(() => {
  const newElement = document.createElement('div');
  newElement.textContent = 'Это новый элемент на странице';
  document.body.appendChild(newElement);
});

В данном примере создается новый элемент div, который затем добавляется в конец тела страницы (body).

Удаление элементов с страницы

Удаление элементов можно выполнить с помощью метода remove() или изменения структуры DOM с использованием parentNode.removeChild().

Пример удаления элемента: 

await page.evaluate(() => {
  const element = document.querySelector('.element-to-remove');
  element.remove();
});

Этот код находит элемент с классом .element-to-remove и удаляет его из DOM.

Стилизация элементов

Puppeteer также позволяет изменять стили элементов страницы. Для этого используется свойство style в JavaScript, что позволяет динамически изменять CSS-стили.

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

await page.evaluate(() => {
  const element = document.querySelector('.some-element');
  element.style.backgroundColor = 'red';
  element.style.color = 'white';
});

Этот пример изменяет фон и цвет текста у элемента с классом .some-element.

Работа с изображениями и медиа-элементами

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

Пример замены изображения: 

await page.evaluate(() => {
  const img = document.querySelector('img');
  img.src = 'https://example.com/new-image.jpg';
});

Кроме того, можно изменять другие атрибуты медиа-элементов, такие как видео или аудио, устанавливая атрибуты src, controls, autoplay и другие.

Манипуляции с таблицами

Работа с таблицами — одна из часто встречающихся задач. Puppeteer позволяет добавлять новые строки или ячейки, а также изменять их содержимое.

Пример добавления строки в таблицу: 

await page.evaluate(() => {
  const table = document.querySelector('table');
  const newRow = table.insertRow();
  const cell1 = newRow.insertCell(0);
  const cell2 = newRow.insertCell(1);
  cell1.textContent = 'Новая ячейка 1';
  cell2.textContent = 'Новая ячейка 2';
});

Этот код добавляет новую строку в таблицу и заполняет ячейки значениями.

Вставка и удаление классов

Можно не только изменять стили, но и работать с классами элементов. Метод classList позволяет добавлять, удалять и переключать классы на элементах.

Пример добавления и удаления классов: 

await page.evaluate(() => {
  const element = document.querySelector('.some-element');
  element.classList.add('new-class');   // Добавление класса
  element.classList.remove('old-class'); // Удаление класса
});

Модификация атрибутов элементов

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

Пример изменения атрибутов: 

await page.evaluate(() => {
  const link = document.querySelector('a');
  link.setAttribute('href', 'https://example.com/new-page');
});

Этот код изменяет атрибут href у первого элемента <a>, что может быть полезно для тестирования редиректов или динамически изменяемых ссылок.

Важные моменты при модификации содержимого страницы

  • Все изменения, сделанные через page.evaluate(), выполняются в контексте браузера. Поэтому любые манипуляции с DOM или стилями не видны в Node.js, а только в браузере.
  • Для тестирования изменений важно убедиться, что страница обновляется корректно, и что изменения не нарушают работу других компонентов.
  • При изменении значений форм и взаимодействии с элементами важно учитывать, что не все изменения являются эквивалентом действий пользователя. Например, изменения значений полей не всегда приводят к срабатыванию событий, таких как input или change. Для этого может потребоваться вручную инициировать события.

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

Оглавление