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

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

Основные методы WebdriverIO для скриншотов

1. browser.saveScreenshot(filePath)

Метод сохраняет изображение текущего состояния окна браузера в указанный путь. Формат файла определяется расширением, чаще всего .png. Пример использования:

it('Сохраняет скриншот страницы', async () => {
    await browser.url('https://example.com');
    await browser.saveScreenshot('./screenshots/fullPage.png');
});

Ключевые моменты:

  • Метод асинхронный, требует await.
  • Путь к файлу может быть как абсолютным, так и относительным.
  • Если указанная папка не существует, метод выбросит ошибку, поэтому нужно заранее создавать директории.

2. element.saveScreenshot(filePath)

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

const button = await $('#submitButton');
await button.saveScreenshot('./screenshots/button.png');

Особенности:

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

Настройка и организация скриншотов

Для удобства хранения скриншотов рекомендуется создавать структурированные папки по тестам или страницам, например:

/screenshots
   /loginPage
       loginButton.png
       loginForm.png
   /dashboard
       dashboardHeader.png

Можно автоматизировать создание папок через Node.js перед запуском теста:

import fs from 'fs';
import path from 'path';

const dir = './screenshots/loginPage';
if (!fs.existsSync(dir)){
    fs.mkdirSync(dir, { recursive: true });
}

Скриншоты при ошибках

WebdriverIO позволяет автоматически сохранять скриншоты при падении тестов через afterTest хук в конфигурации:

afterTest: async function(test, context, { error, result, duration, passed, retries }) {
    if (!passed) {
        await browser.saveScreenshot(`./screenshots/errors/${test.title.replace(/\s+/g, '_')}.png`);
    }
}

Особенности:

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

Скриншоты с прокруткой страницы

Для длинных страниц можно использовать стратегию “full page screenshot”, однако browser.saveScreenshot захватывает только видимую область по умолчанию. Для полного скриншота часто применяются сторонние решения:

  • Использование webdriver-image-comparison плагина:
import { compareScreen } from 'webdriver-image-comparison';

await browser.url('https://example.com');
await compareScreen('fullPage');
  • Скроллинг вручную и объединение изображений через Node.js библиотеки, например sharp.

Советы по эффективной работе со скриншотами

  1. Минимизировать лишние скриншоты: сохранять только критические состояния или ошибки тестов.
  2. Упорядочивание по папкам и датам: облегчает поиск нужного изображения при анализе багов.
  3. Согласованный формат: чаще всего .png — лучший выбор для тестов, т.к. сохраняет качество без сжатия.
  4. Размер экрана: фиксировать размеры окна браузера перед скриншотом, чтобы исключить различия в рендеринге:
await browser.setWindowSize(1280, 720);
  1. Сравнение скриншотов: для визуальных регрессий рекомендуется использовать инструменты сравнения изображений, такие как webdriver-image-comparison, что позволяет автоматически выявлять изменения интерфейса.

Пример комплексного сценария

it('Проверяет отображение кнопки и сохраняет скриншоты', async () => {
    await browser.url('https://example.com/login');
    await browser.setWindowSize(1280, 720);

    const loginForm = await $('#loginForm');
    await loginForm.saveScreenshot('./screenshots/loginForm.png');

    const submitButton = await $('#submitButton');
    await submitButton.saveScreenshot('./screenshots/submitButton.png');

    await browser.saveScreenshot('./screenshots/fullPage.png');
});

В этом примере фиксируются как отдельные элементы, так и весь экран, что позволяет создавать детальные отчёты и отчёты о визуальных изменениях.

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

Оглавление