diff --git a/docs/guides/how-to-minify-screenshots.mdx b/docs/guides/how-to-minify-screenshots.mdx deleted file mode 100644 index 3429c10..0000000 --- a/docs/guides/how-to-minify-screenshots.mdx +++ /dev/null @@ -1,36 +0,0 @@ -import Admonition from "@theme/Admonition"; - -# How to Reduce Screenshot Size - -## Introduction {#preface} - -One of the key features of Testplane is the ability to test layouts using screenshots. For this, you can take a screenshot during different states of a web page in your tests and compare it with a reference. - -An example of such a comparison: - -![Screenshot Comparison](/img/docs/guides/how-to-minify-screenshots.diff-in-screenshot.png) - - -**Where do reference screenshots come from?** - -You wrote a test using the Testplane _assertView_ command. The _assertView_ command compares the actual screenshot with the reference screenshot. An actual screenshot is one that the test takes during its run. It reflects the current state of your web page. On the first run of your test, you don't yet have a reference screenshot. Therefore, the _assertView_ command will fail with a message that the reference screenshot is not found. At the same time, you will have an actual screenshot. If the actual screenshot reflects the state of your web page you expect (consider as reference), then you need to _accept_ the actual screenshot as the reference one. To do this, you need to run Testplane with an additional _--update-refs_ option. Alternatively, you can use the GUI mode provided by the _html-reporter_ plugin. With it, you can view the run report in GUI mode, ensure the actual screenshots are as you expect, and accept them using the _Accept_ button. - - - -## Problem {#problem} - -If your project has many tests that use layout validation via screenshots, then your project will have many screenshots. Sometimes these screenshots are quite large and can take up a lot of space on the file system. - -If the project is actively developed, each pull request will generate its own test run report, containing hundreds (or thousands) of reference screenshots. The larger the screenshots, the larger your reports will be. This means they will take longer to download, occupy more disk space, and so on. - -## Solution: testplane-image-minifier {#solution} - -To reduce the space screenshots occupy on disk, add the [testplane-image-minifier][testplane-image-minifier] plugin to your project. This plugin supports 8 levels of lossless image compression. - -How to add and configure the plugin is detailed in the [plugin documentation][testplane-image-minifier]. - -## Keywords {#keywords} - -- testplane-image-minifier - -[testplane-image-minifier]: ../../plugins/testplane-image-minifier diff --git a/docs/plugins/testplane-image-minifier.mdx b/docs/plugins/testplane-image-minifier.mdx deleted file mode 100644 index 1b31c9b..0000000 --- a/docs/plugins/testplane-image-minifier.mdx +++ /dev/null @@ -1,114 +0,0 @@ -import Admonition from "@theme/Admonition"; - -# testplane-image-minifier - -## Overview {#overview} - -Use the `testplane-image-minifier` plugin to compress images (screenshots) in your tests. - -The plugin supports 8 compression levels: from 0 (do not apply compression) to 7 (maximum compression level). - -Compression is lossless. - -### How does it work? {#how_does_it_work} - -At startup, the plugin subscribes to the `UPDATE_REFERENCE` event, which Testplane sends in the following cases: - -- if the user started Testplane by passing the `--update-refs` option; -- if the user updates or saves screenshots using the [html-reporter][html-reporter] plugin. - -When the `UPDATE_REFERENCE` event is received in the `testplane-image-minifier` plugin, it gets a link to the image itself along with the event. Next, the plugin applies a compression algorithm to the received image with the compression level specified in the config. And saves the new image to the file system. After that, the developer can merge the updated files into the main branch of his project. - -To compress images, the `testplane-image-minifier` plugin uses the [optipng-bin][optipng-bin] package. - - - When choosing the compression level for images in your project, remember that you are choosing - between the speed and the space that your images will occupy on disk. The higher the compression - ratio, the less space your images will occupy on disk, but the tests themselves will take - longer. Since before comparing the images in the tests, the system will have to unpack them. - Therefore, in order to get an acceptable test run time, match the selected compression ratio - with the capacity of the servers on which these tests will be running. - - -## Install {#install} - -```bash -npm install -D testplane-image-minifier -``` - -## Setup {#setup} - -Add the plugin to the `plugins` section of the `testplane` config: - -```javascript -module.exports = { - plugins: { - "testplane-image-minifier": { - enabled: true, // Enable the plugin. - compressionLevel: 7, // Maximum compression level, compression will take some time - }, - - // other Testplane plugins... - }, - - // other Testplane settings... -}; -``` - -### Description of configuration parameters {#setup_description} - - - - - - - - - - -
**Parameter****Type****Default value****Description**
enabledBooleantrueEnable / disable the plugin.
compressionLevelNumber2Image compression level: from 0 to 7 (maximum compression level).
- -### Passing parameters via the CLI {#setup_by_cli} - -All plugin parameters that can be defined in the config can also be passed as command-line options or through environment variables during the launch of Testplane. Use the prefix `--image-minifier-` for command line options and `testplane_image_minifier_` for environment variables. For example: - -```bash -npx testplane --image-minifier-compression-level 5 -``` - -```bash -testplane_image_minifier_compression_level = 5 npx testplane -``` - -## Debugging {#debugging} - -Set the environment variable `DEBUG=testplane:image-minifier` to see messages in the console about the application of the compression algorithm for images in tests. - -```bash -DEBUG=testplane:image-minifier npx testplane --update-refs -``` - -An example of how it will look in the console: - -```bash -/path/to/reference/image.png compressed by 30% -``` - -## Usage {#usage} - -After adding the plugin to the project and configuring its parameters, run Testplane with the `--update-refs` option: - -```bash -npx testplane --update-refs -``` - -The images on the file system will be updated. - -## Useful links {#useful_links} - -- [testplane-image-minifier plugin sources][testplane-image-minifier] -- [optipng-bin package to compress images][optipng-bin] - -[testplane-image-minifier]: https://github.com/gemini-testing/testplane-image-minifier/ -[html-reporter]: ../html-reporter -[optipng-bin]: https://www.npmjs.com/package/optipng-bin diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/how-to-minify-screenshots.mdx b/i18n/ru/docusaurus-plugin-content-docs/current/guides/how-to-minify-screenshots.mdx deleted file mode 100644 index e6a42d9..0000000 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/how-to-minify-screenshots.mdx +++ /dev/null @@ -1,36 +0,0 @@ -import Admonition from "@theme/Admonition"; - -# Как уменьшить вес скриншотов - -## Введение {#preface} - -Одна из ключевых функций testplane — это возможность тестировать верстку с помощью скриншотов. Для этого в тестах, при разных состояниях веб-страницы, можно снять скриншот и сравнить его с эталонным. - -Пример такого сравнения: - -![Сравнение скриншотов](/img/docs/guides/how-to-minify-screenshots.diff-in-screenshot.png) - - -**Откуда берутся эталонные скриншоты?** - -Вы написали тест с использованием команды testplane _assertView_. Команда _assertView_ сравнивает актуальный скриншот с эталонным. Актуальный скриншот — это скриншот, который тест делает во время своего прогона. Он отражает текущее состояние вашей веб-страницы. При первом прогоне вашего теста эталонного скриншота у вас ещё нет. А значит команда _assertView_ упадет с сообщением, что эталонный скриншот не найден. При этом у вас будет актуальный скриншот. Если актуальный скриншот отражает то состояние вашей веб-страницы, которое вы ожидаете (считаете эталонным), то вам нужно _принять (accept)_ актуальный скриншот в качестве эталонного. Чтобы это сделать нужно запускать testplane с дополнительной опцией _--update-refs_. Или же воспользоваться режимом GUI, который предоставляет плагин _html-reporter_. С помощью него вы можете просматривать отчет о прогоне в GUI-режиме, убеждаться, что актуальные скриншоты именно такие, как вы ожидаете, и принимать их с помощью кнопки _Accept_. - - - -## Проблема {#problem} - -Если в вашем проекте много тестов, в которых используется валидация верстки с помощью скриншотов, то значит, в вашем проекте будет много скриншотов. Иногда эти скриншоты — довольно большие и могут занимать много места на файловой системе. - -Если в проекте идет активная разработка, то на каждый пулл-реквест будет формироваться свой отчет о прогоне тестов, в котором будут содержаться сотни (или тысячи) эталонных скриншотов. Чем больше вес скриншотов, тем больше будут весить ваши отчеты. А значит — дольше скачиваться, занимать больше места на диске и т. д. - -## Решение: testplane-image-minifier {#solution} - -Чтобы уменьшить место, которое скриншоты занимают на диске, подключите в своем проекте плагин [testplane-image-minifier][testplane-image-minifier]. Данный плагин поддерживает 8 степеней сжатия изображений без потерь. - -Как подключить и настроить плагин читайте в [документации][testplane-image-minifier] плагина. - -## Ключевые слова {#keywords} - -- testplane-image-minifier - -[testplane-image-minifier]: ../../plugins/testplane-image-minifier diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/plugins/testplane-image-minifier.mdx b/i18n/ru/docusaurus-plugin-content-docs/current/plugins/testplane-image-minifier.mdx deleted file mode 100644 index 1ec0006..0000000 --- a/i18n/ru/docusaurus-plugin-content-docs/current/plugins/testplane-image-minifier.mdx +++ /dev/null @@ -1,114 +0,0 @@ -import Admonition from "@theme/Admonition"; - -# testplane-image-minifier - -## Обзор {#overview} - -Используйте плагин [testplane-image-minifier][testplane-image-minifier], чтобы сжимать изображения (скриншоты) в своих тестах. - -Плагин поддерживает 8 степеней сжатия: от 0 (не применять сжатие) до 7 (максимальная степень сжатия). - -Сжатие происходит без потерь. - -### Как это работает? {#how_does_it_work} - -При запуске плагин подписывается на событие `UPDATE_REFERENCE`, которое testplane посылает в случаях: - -- если пользователь запустил testplane, передав ей опцию `--update-refs`; -- если пользователь обновляет или сохраняет скриншоты с помощью плагина [html-reporter][html-reporter]. - -Когда в плагин `testplane-image-minifier` прилетает событие `UPDATE_REFERENCE`, он получает вместе с событием ссылку на само изображение. Далее плагин применяет к полученному изображению алгоритм сжатия с указанной в конфиге степенью сжатия. И сохраняет новое изображение на файловую систему. После этого разработчик может влить обновленные файлы в главную ветку своего проекта. - -Для сжатия изображений плагин `testplane-image-minifier` использует пакет [optipng-bin][optipng-bin]. - - - Выбирая степень сжатия для изображений в своем проекте, помните, что вы выбираете между - скоростью и местом, которое будут занимать ваши изображения на диске. Чем выше степень сжатия, - тем меньше места будут занимать ваши изображения на диске, но дольше будут выполняться сами - тесты. Так как перед тем как сравнивать изображения в тестах система должна будет их - распаковать. Поэтому, чтобы получить приемлемое время прогона тестов, соизмеряйте выбираемую - степень сжатия с мощностью серверов, на которых эти тесты будут выполняться. - - -## Установка {#install} - -```bash -npm install -D testplane-image-minifier -``` - -## Настройка {#setup} - -Необходимо подключить плагин в разделе `plugins` конфига `testplane`: - -```javascript -module.exports = { - plugins: { - "testplane-image-minifier": { - enabled: true, // Включить плагин. - compressionLevel: 7, // Максимальный уровень компрессии, сжатие займет какое-то время - }, - - // другие плагины testplane... - }, - - // другие настройки testplane... -}; -``` - -### Расшифровка параметров конфигурации {#setup_description} - - - - - - - - - - -
**Параметр****Тип****По умолчанию****Описание**
enabledBooleantrueВключить / отключить плагин.
compressionLevelNumber2Степень сжатия изображения: от 0 до 7 (максимальная степень сжатия).
- -### Передача параметров через CLI {#setup_by_cli} - -Все параметры плагина, которые можно определить в конфиге, можно также передать в виде опций командной строки или через переменные окружения во время запуска testplane. Используйте префикс `--image-minifier-` для опций командной строки и `testplane_image_minifier_` — для переменных окружения. Например: - -```bash -npx testplane --image-minifier-compression-level 5 ... -``` - -```bash -testplane_image_minifier_compression_level = 5 npx testplane ... -``` - -## Отладка {#debugging} - -Установите переменную окружения `DEBUG=testplane:image-minifier`, чтобы видеть сообщения о применении алгоритма сжатия для изображений в тестах. - -```bash -DEBUG=testplane:image-minifier npx testplane --update-refs -``` - -Пример, как это будет выглядеть в консоли: - -```bash -/path/to/reference/image.png compressed by 30% -``` - -## Использование {#usage} - -После добавления плагина в проект и настройки его параметров запустите testplane с опцией `--update-refs`: - -```bash -npx testplane --update-refs -``` - -Изображения на файловой системе будут обновлены. - -## Полезные ссылки {#useful_links} - -- [Исходники плагина testplane-image-minifier][testplane-image-minifier] -- [Пакет для сжатия изображений optipng-bin][optipng-bin] - -[testplane-image-minifier]: https://github.com/gemini-testing/testplane-image-minifier/ -[html-reporter]: ../../plugins/html-reporter -[optipng-bin]: https://www.npmjs.com/package/optipng-bin