Захват снимков экрана в Selenium и TypeScript

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

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

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

Типы снятия экрана

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

• Вы можете сохранить HTML страницы с помощью GetPageSource
• Вы можете сделать скриншот видимой области окна с помощью TakeScreenshot
• Вы можете распечатать страницу в PDF с помощью PrintPage

Проблема в том, что ни один из этих методов не является идеальным. Если вы сохраняете HTML страницы, есть вероятность, что будут отсутствовать CSS, HTML и JavaScript, которые необходимо выполнить для восстановления страницы. Если вы делаете скриншот, вы получаете только небольшую часть полной страницы. И если вы печатаете в PDF, часто возникают значительные расхождения в форматировании и макете.

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

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

Создание скриншота в Selenium

Для захвата страницы нам потребуется сделать один или несколько скриншотов после прокрутки страницы в видимую область. Давайте сначала решим простой случай - как сделать скриншот страницы?

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

Вот код, который запускает Selenium и делает скриншот в TypeScript:

// Запуск Selenium
const driver = new webdriver.Builder()
  .forBrowser('chrome')
  .build();

// Переход на страницу
await driver.get('https://www.example.com');

// Прокрутка вверх страницы
await driver.executeScript('window.scrollTo(0, 0);');

// Сделать скриншот страницы
await driver.takeScreenshot().then(function(data) {
  fs.writeFileSync('screenshot.png', data, 'base64');
});

// Закрыть браузер
await driver.quit();

Но если страница выше, чем одно окно, вам потребуется выполнить дополнительные действия.

Захват нескольких скриншотов

Следующий шаг - определить высоту страницы, размер окна и определить, сколько скриншотов нам понадобится, чтобы точно представить всю видимую страницу.

Вот TypeScript, который определяет размеры страницы, прокручивается до каждого экрана и последовательно делает скриншоты:

// Запуск Selenium
const driver = new webdriver.Builder()
  .forBrowser('chrome')
  .build();

// Переход на страницу
await driver.get('https://www.example.com');

// Определение размеров страницы
const pageHeight = await driver.executeScript('return document.body.scrollHeight;');
const windowHeight = await driver.executeScript('return window.innerHeight;');
const numScreenshots = Math.ceil(pageHeight / windowHeight);

// Прокрутка и создание скриншотов
for (let i = 0; i < numScreenshots; i++) {
  await driver.executeScript(`window.scrollTo(0, ${i * windowHeight});`);
  await driver.takeScreenshot().then(function(data) {
    fs.writeFileSync(`screenshot${i}.png`, data, 'base64');
  });
}

// Закрыть браузер
await driver.quit();

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

Сшивка скриншотов

Следующая задача - объединить изображения. Если нам нужно сделать семь скриншотов, то вероятно, мы будем располагать первые шесть скриншотов один над другим, но седьмой может перекрывать шестой.

Чтобы правильно рассчитать это, вам нужно сохранить оригинальную высоту окна и оригинальную высоту клиента, как сообщается Selenium. Мы будем использовать это для определения коэффициента масштабирования по оси Y для скриншотов, сделанных на мониторах с высоким разрешением.

Затем мы сначала нарисуем последнее изображение внизу объединенного битмапа, а затем расположим все остальные сверху, чтобы последнее частично перекрывало конечное изображение.

В результате получится удовлетворительный скриншот, который оценит ваша команда контроля качества. Счастливого парсинга!

Тед Спенс преподает в Bellevue College и разрабатывает решения для налогового учета в Anrok. Если вас интересует программная инженерия и бизнес-анализ, я буду рад услышать вас в Twitter или LinkedIn.