Маскирование областей на скриншотах

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

Скриншоты страницы и элементов

Основная функция для снятия скриншота в Playwright — page.screenshot() для всей страницы и elementHandle.screenshot() для конкретного элемента.

Пример снятия скриншота страницы:

await page.screenshot({ path: 'fullpage.png', fullPage: true });

Скриншот отдельного элемента:

const element = await page.$('#user-profile');
await element.screenshot({ path: 'profile.png' });

Маскирование областей с помощью mask

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

Синтаксис для mask:

await page.screenshot({
  path: 'masked.png',
  fullPage: true,
  mask: [
    await page.$('#password'),
    await page.$('.credit-card')
  ]
});

В данном примере все элементы с селекторами #password и .credit-card будут замаскированы серым прямоугольником по размеру элемента.

Особенности маскирования:

  • mask принимает массив элементов (ElementHandle) или массив прямоугольников ({x, y, width, height}).
  • Маска автоматически подстраивается под размеры элемента на момент снятия скриншота.
  • Элементы можно маскировать динамически, например, через page.$eval или генерацию селекторов по данным.

Маскирование произвольных областей по координатам

Иногда требуется скрыть области, не привязанные к конкретному элементу. Для этого используется объект с координатами:

await page.screenshot({
  path: 'masked-area.png',
  fullPage: true,
  mask: [
    { x: 50, y: 100, width: 200, height: 50 },
    { x: 300, y: 400, width: 150, height: 100 }
  ]
});

Каждый объект задаёт прямоугольник для маски. Цвет по умолчанию — серый, но можно изменять его через глобальные стили страницы перед снятием скриншота.

Маскирование с кастомным цветом

Для изменения цвета маски Playwright не предоставляет прямую опцию. Однако цвет можно изменить через временную модификацию стиля элементов перед снятием скриншота:

await page.$$eval('.sensitive', elements => {
  elements.forEach(el => el.style.backgroundColor = 'black');
});

await page.screenshot({
  path: 'custom-mask.png',
  fullPage: true
});

После скриншота стили можно сбросить при необходимости.

Маскирование динамически появляющихся элементов

В случае динамического контента (например, модальные окна, уведомления) важно убедиться, что элементы существуют перед маскированием. Рекомендуется использовать waitForSelector:

const sensitiveElement = await page.waitForSelector('#token', { state: 'visible' });
await page.screenshot({
  path: 'dynamic-mask.png',
  mask: [sensitiveElement]
});

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

Маскирование при тестировании отдельных областей

Для тестов, где требуется сравнение скриншотов (visual regression testing), маскирование помогает избежать ложных срабатываний из-за динамических данных:

await page.screenshot({
  path: 'baseline.png',
  fullPage: true,
  mask: [
    await page.$('.timestamp'),
    await page.$('.dynamic-value')
  ]
});

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

Важные моменты при использовании маски

  1. Маска не изменяет исходный DOM, она применяется только на момент снятия скриншота.
  2. Элементы для маски должны существовать и быть видимыми; невидимые элементы игнорируются.
  3. Маскирование больших областей может влиять на производительность, особенно при fullPage скриншотах.
  4. Комбинирование маскирования по селекторам и по координатам позволяет гибко скрывать как DOM-элементы, так и специфические области интерфейса.

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

Оглавление