Автоматические скриншоты при падении

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

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

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

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

Настройка Playwright для создания скриншотов

Для того чтобы Playwright начал автоматически делать скриншоты при падении теста, нужно активировать соответствующую опцию в тестовом фреймворке. Ниже приведён пример настройки для Playwright с использованием библиотеки Jest.

const { test, expect } = require('@playwright/test');

test.beforeEach(async ({ page }) => {
  page.on('pageerror', (error) => {
    console.error('Ошибка на странице:', error.message);
  });
});

test.afterEach(async ({ page, status }) => {
  if (status === 'failed') {
    const screenshotPath = `./screenshots/${Date.now()}.png`;
    await page.screenshot({ path: screenshotPath });
    console.log(`Скриншот сохранён в: ${screenshotPath}`);
  }
});

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

Параметры метода screenshot()

Метод screenshot() имеет несколько полезных параметров, которые позволяют настроить поведение при создании скриншотов:

  • path – путь, по которому будет сохранён файл скриншота. Если не указать, Playwright не сохранит файл на диск.
  • type – формат изображения, доступные значения: png или jpeg. По умолчанию используется формат PNG.
  • quality – параметр, доступный для JPEG-формата, который определяет степень сжатия (от 0 до 100).
  • fullPage – если установлено в true, создаётся снимок всей страницы, включая те части, которые не видны на экране. По умолчанию значение false — скриншот только видимой части.

Пример использования всех параметров:

await page.screenshot({
  path: './screenshots/error.png',
  type: 'jpeg',
  quality: 80,
  fullPage: true
});

Этот код сохранит скриншот всей страницы в формате JPEG с качеством 80% в указанное место.

Сохранение скриншотов с уникальными именами

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

const screenshotPath = `./screenshots/failure_${Date.now()}.png`;
await page.screenshot({ path: screenshotPath });

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

Пример с несколькими тестами

Для более сложных тестов можно автоматизировать создание скриншотов и логи ошибок для каждого отдельного теста. В данном примере показано, как это реализовать в рамках нескольких тестов:

const { test, expect } = require('@playwright/test');

test.describe('Тесты с автоматическими скриншотами', () => {

  test('Тест 1', async ({ page }) => {
    await page.goto('https://example.com');
    await expect(page).toHaveTitle('Не тот заголовок');
  });

  test('Тест 2', async ({ page }) => {
    await page.goto('https://example.com');
    const element = await page.locator('button#submit');
    await element.click();
    await expect(element).toHaveText('Отправить');
  });
  
  test.afterEach(async ({ page, status }) => {
    if (status === 'failed') {
      const screenshotPath = `./screenshots/test_${Date.now()}.png`;
      await page.screenshot({ path: screenshotPath });
      console.log(`Скриншот для теста сохранён в: ${screenshotPath}`);
    }
  });
});

В этом примере после выполнения каждого теста проверяется его статус. Если тест завершился неудачей, создаётся скриншот с уникальным именем, и логируется путь к файлу.

Управление скриншотами в CI/CD

Когда тесты выполняются в среде непрерывной интеграции (CI/CD), скриншоты могут быть полезны для того, чтобы визуально отслеживать проблемы. Однако, в условиях CI/CD важно настроить очистку или архивирование скриншотов, чтобы избежать переполнения хранилища.

Один из способов – это сохранять скриншоты в отдельной директории, которая автоматически очищается после завершения тестов. Также можно настроить отправку скриншотов в систему отчётности или на почту для команды разработчиков.

Советы по использованию

  • Отображение ошибок: Если скриншот не помогает выявить проблему, полезно также записывать консольные ошибки или сетевые запросы с помощью Playwright. Это позволит получить более полное представление о том, что произошло во время выполнения теста.
  • Использование в продакшн-средах: При работе с реальными пользовательскими данными важно следить за безопасностью. Скриншоты не должны содержать конфиденциальной информации, такой как пароли или личные данные, поэтому важно использовать средства для их фильтрации и удаления.
  • Разделение на категории: Для удобства можно организовать скриншоты по категориям, например, по типам тестов или по их важности.

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

Оглавление