Водяные знаки

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

Основные принципы работы с водяными знаками

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

Для начала необходимо понять, как Puppeteer может взаимодействовать с изображениями, элементами на странице и работать с визуальными аспектами контента. Puppeteer предоставляет удобный интерфейс для манипулирования DOM, выполнения действий на странице и анализа визуальных изменений.

Инспекция водяных знаков на странице

Для начала нужно идентифицировать водяной знак на целевой странице. Это можно сделать через селекторы CSS, которые позволят найти элементы, содержащие водяной знак. Обычно такие элементы могут быть изображениями с наложенным полупрозрачным текстом или графикой, или же эти элементы могут быть отдельными div-ами, содержащими стилизованный текст.

Пример: 

const waterMarkSelector = &


В этом примере используется селектор .watermark-image,
который может быть привязан к элементу, содержащему водяной знак. После
того как элемент найден, можно проверить его свойства и убедиться, что
он соответствует нужным критериям.




Проверка визуальных изменений




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




Пример проверки с помощью Puppeteer:



const screenshotPath = './screenshot.png';
await page.screenshot({ path: screenshotPath });



С помощью этого кода Puppeteer делает снимок экрана, который можно
использовать для последующего сравнения с эталонным изображением. Чтобы
удостовериться, что водяной знак на изображении присутствует и
отображается корректно, важно использовать инструменты для анализа
изображений, такие как pixel-match, которые помогут сравнить два
изображения и найти различия.




Добавление водяных знаков с помощью Puppeteer




Для добавления водяных знаков на изображение или страницу можно
использовать несколько подходов. Одним из наиболее распространённых
является наложение текстового или графического водяного знака с
использованием стандартных HTML и CSS средств.




Пример добавления водяного знака на изображение:



await page.evaluate(() => {
  const image = document.querySelector('img');
  const watermark = document.createElement('div');
  watermark.style.position = 'absolute';
  watermark.style.bottom = '10px';
  watermark.style.right = '10px';
  watermark.style.color = 'rgba(255, 255, 255, 0.5)';
  watermark.style.fontSize = '24px';
  watermark.innerText = 'Watermark';
  image.parentElement.appendChild(watermark);
});



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




Сравнение водяных знаков с эталонным изображением




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




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




Пример сравнения изображений с использованием библиотеки
pixelmatch:



const pixelmatch = require('pixelmatch');
const fs = require('fs');
const { PNG } = require('pngjs');

const img1 = PNG.sync.read(fs.readFileSync('./expected.png'));
const img2 = PNG.sync.read(fs.readFileSync('./actual.png'));
const diff = new PNG({ width: img1.width, height: img1.height });

const numDiffPixels = pixelmatch(img1.data, img2.data, diff.data, img1.width, img1.height, { threshold: 0.1 });

fs.writeFileSync('./diff.png', PNG.sync.write(diff));
console.log(`Number of differing pixels: ${numDiffPixels}`);



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




Тестирование водяных знаков в разных условиях




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




Puppeteer позволяет эмулировать различные устройства и разрешения
экранов с помощью функции page.setViewport(), что полезно
для тестирования отображения водяных знаков на мобильных устройствах.




Пример настройки мобильного устройства:



await page.setViewport({
  width: 375,
  height: 667,
  isMobile: true
});



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




Заключение




Работа с водяными знаками в Puppeteer — это важная часть тестирования
визуальных аспектов веб-приложений. Проверка корректности отображения
водяных знаков и их правильного позиционирования позволяет обеспечить,
чтобы они не мешали основному контенту и соответствовали дизайнерским
стандартам. Puppeteer предоставляет мощные средства для взаимодействия с
элементами страницы, снятия скриншотов и анализа визуальных изменений,
что делает его отличным инструментом для автоматизированного
тестирования таких аспектов, как водяные знаки.
Оглавление