Зачем снимать визуальные доказательства?

Когда тест падает, самый частый вопрос — «как выглядел экран в момент падения?» Стек-трейс говорит, какая проверка упала, но скриншот показывает реальное состояние приложения. Видеозапись идёт дальше — показывает всю последовательность событий до падения.

Снятие скриншотов

Playwright 

export default defineConfig({
  use: {
    screenshot: 'only-on-failure',
  },
});

test('поток оформления', async ({ page }) => {
  await page.goto('/cart');
  await page.screenshot({ path: 'screenshots/cart.png' });
  await page.click('#checkout');
  await page.screenshot({ path: 'screenshots/checkout.png', fullPage: true });
});

Cypress 

module.exports = defineConfig({
  screenshotOnRunFailure: true,
  screenshotsFolder: 'cypress/screenshots',
});

cy.screenshot('страница-корзины');

Selenium 

File screenshot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(screenshot, new File("screenshots/failure.png"));

Видеозапись

Playwright 

export default defineConfig({
  use: {
    video: 'retain-on-failure',
  },
});

Cypress 

module.exports = defineConfig({
  video: true,
  videoCompression: 32,
});

Playwright Trace Viewer 

use: {
  trace: 'on-first-retry',
}
// npx playwright show-trace test-results/trace.zip

Интеграция CI/CD

Артефакты GitHub Actions 

- name: Запуск тестов Playwright
  run: npx playwright test
  continue-on-error: true

- name: Загрузка артефактов
  uses: actions/upload-artifact@v4
  if: always()
  with:
    name: доказательства-тестов
    path: |
      test-results/
      playwright-report/
    retention-days: 30

Пошаговые доказательства 

test('полный поток покупки', async ({ page }) => {
  await page.goto('/products');
  await page.screenshot({ path: 'evidence/01-страница-товаров.png' });

  await page.click('[data-testid="add-to-cart"]');
  await page.screenshot({ path: 'evidence/02-добавлено-в-корзину.png' });

  await page.goto('/cart');
  await page.screenshot({ path: 'evidence/03-корзина.png' });

  await page.click('#checkout');
  await page.screenshot({ path: 'evidence/04-форма-оплаты.png' });

  await page.click('#submit-payment');
  await expect(page.locator('.confirmation')).toBeVisible();
  await page.screenshot({ path: 'evidence/05-подтверждение.png' });
});

Лучшие практики

  1. Всегда снимать при падении — минимальное требование
  2. Снимать полную страницу — частичные скриншоты теряют контекст
  3. Описательные имена файлов — включать имя теста, шаг и время
  4. Политики хранения — 30 дней типично
  5. Сжимать видео — баланс между качеством и размером
  6. Использовать Playwright traces — дают гораздо более богатые данные отладки

Упражнения

Упражнение 1: Стратегия скриншотов

Настройте автоматические скриншоты при падении и на ключевых шагах. Запустите тесты, проверьте доказательства.

Упражнение 2: Видеозапись

Включите запись в Playwright или Cypress. Внесите намеренную ошибку и используйте видео для диагностики.

Упражнение 3: CI/CD-пайплайн доказательств

Настройте пайплайн для захвата скриншотов, видео и traces. Загрузите как артефакты с хранением 30 дней.