Полностраничные скриншоты

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

Возможности Playwright для захвата полностраничных скриншотов

Playwright предоставляет удобный способ создания скриншотов целых веб-страниц с помощью метода page.screenshot(). Этот метод позволяет захватить как часть страницы, так и всю страницу целиком. Для этого необходимо использовать параметр fullPage, который обеспечивает захват скриншота всей страницы.

Захват полностраничного скриншота

Для того чтобы сделать полностраничный скриншот с помощью Playwright, необходимо передать параметр fullPage: true в опции метода page.screenshot(). Пример кода:

const { chromium } = require('playwright');

(async () => {
  // Запуск браузера и создание новой страницы
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Переход на веб-страницу
  await page.goto('https://example.com');

  // Снимок экрана всей страницы
  await page.screenshot({ path: 'fullpage.png', fullPage: true });

  // Закрытие браузера
  await browser.close();
})();

В данном примере браузер Chromium запускается, создается новая страница, выполняется переход по адресу веб-страницы, а затем делается скриншот всей страницы с сохранением его в файл fullpage.png.

Особенности и настройки полностраничных скриншотов

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

  1. Стилизация и размер страницы Если на странице присутствуют динамически подгружаемые элементы или контент, который появляется при прокрутке, важно убедиться, что все необходимые элементы загружены перед захватом скриншота. Для этого можно использовать методы ожидания, такие как page.waitForSelector() или page.waitForLoadState().

  2. Медиа-запросы При создании полностраничных скриншотов необходимо учитывать, что различные разрешения экрана могут вызывать изменения в отображении контента. Например, страницы могут адаптироваться в зависимости от размеров окна браузера (через медиа-запросы CSS). Для того чтобы избежать таких искажений, можно настроить размер окна браузера с помощью page.setViewportSize().

    Пример настройки размера окна перед созданием скриншота:

    await page.setViewportSize({ width: 1280, height: 1024 });

  3. Качество скриншота Playwright позволяет задавать качество скриншотов для изображений в формате JPEG. Параметр quality позволяет установить степень сжатия, что может быть полезно для оптимизации размера файла. Однако при использовании формата PNG качество не изменяется, так как этот формат является без потерь.

    Пример с установкой качества для скриншота в формате JPEG:

    await page.screenshot({ path: 'fullpage.jpg', fullPage: true, type: 'jpeg', quality: 90 });

  4. Формат скриншота Playwright поддерживает два формата для снимков экрана — PNG и JPEG. В зависимости от требуемого качества и размера файла можно выбрать подходящий формат. PNG подходит для изображений с прозрачностью или высокой детализацией, в то время как JPEG может быть использован для больших изображений, где важен баланс между качеством и размером файла.

Проблемы с динамическим контентом

Веб-страницы с динамическим контентом, где элементы подгружаются по мере прокрутки страницы, могут создать проблему при создании полностраничных скриншотов. Чтобы гарантировать, что весь контент загружен перед захватом скриншота, можно использовать различные методы ожидания. Например, можно использовать page.waitForLoadState() для ожидания полной загрузки страницы:

await page.goto('https://example.com');
await page.waitForLoadState('load');  // Ожидание полной загрузки страницы
await page.screenshot({ path: 'fullpage.png', fullPage: true });

Еще один способ — это использовать метод ожидания появления определенных элементов на странице:

await page.goto('https://example.com');
await page.waitForSelector('.dynamic-content');  // Ожидание появления динамического контента
await page.screenshot({ path: 'fullpage.png', fullPage: true });

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

Прокачка производительности

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

  1. Использовать тесты с небольшими страницами для предварительных проверок, минимизируя время захвата скриншота.
  2. Оптимизировать страницы для тестов, отключив тяжелые элементы, такие как анимации или всплывающие окна.

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

await page.addStyleTag({ content: '*, *::before, *::after { animation: none !important; }' });

Захват скриншотов с учетом устройств

Playwright предоставляет возможность эмулировать различные устройства, что может быть полезно для тестирования отображения страниц на мобильных устройствах. Для этого используются устройства из списка devices в Playwright. Например, чтобы сделать скриншот страницы, как если бы она просматривалась на iPhone 11, можно использовать следующий код:

const { devices } = require('playwright');
const iPhone11 = devices['iPhone 11'];

const browser = await chromium.launch();
const page = await browser.newPage();

await page.emulate(iPhone11);  // Эмуляция iPhone 11
await page.goto('https://example.com');
await page.screenshot({ path: 'iphone11_fullpage.png', fullPage: true });

await browser.close();

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

Заключение

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

Оглавление