feat(docs): статья «Как читать скриншотные тесты»

docs/code-and-test-errors/kak-chitat-skrinshotnye-testy.md

@@ -0,0 +1,62 @@
+---
+title: "Как читать скриншотные тесты"
+---
+
+[Перейти на сайт](https://ru.hexlet.io)
+
+# Как читать скриншотные тесты
+
+Проверка упражнения по вёрстке упала, и во вкладке «Вывод» написано, сколько пикселей не совпало, например `3372 pixels (ratio 0.05 of all image pixels) are different`. Какие именно пиксели разошлись, текст не показывает. Их видно в отчёте о тестах, который открывается пунктом «Отчет (Тесты)» в правой колонке страницы упражнения.
+
+![Страница упражнения по вёрстке, в правой колонке пункт «Отчет (Тесты)» с подписью «Визуализация прогона»](/img/docs/img-216--screenshot-tests-report-menu.png)
+
+Скриншотный тест открывает вашу страницу в браузере и снимает её. Снимок он сравнивает пиксель за пикселем с эталоном, то есть со снимком решения учителя. Небольшую разницу тест прощает, потому что сглаживание краёв и шрифтов даёт шум в несколько пикселей даже на одинаковой вёрстке. Если разница больше, проверка падает.
+
+Читать результат удобнее с текста ошибки. Часто причина названа в нём прямо, и картинки тогда не нужны. К снимкам стоит переходить, когда текст сообщает только число разошедшихся пикселей.
+
+## Упала проверка перед снимком
+
+Прежде чем снимать страницу, тест убеждается, что сравнивать есть что. Он проверяет, что стили подключились, шрифты загрузились и картинки на странице открываются. Если одна из этих проверок упала, до снимка дело не доходит, и в отчёте картинок не будет. Причину тогда называет сама ошибка, как в этом примере.
+
+```text
+Error: стили не подключились: проверьте <link> на styles/app.css
+```
+
+Такое сообщение означает, что браузер вообще не применил ваш CSS. Сверьте путь в теге `<link>` с тем, где лежит файл стилей, и запустите проверку снова.
+
+## Разошлись снимки
+
+Если ошибка сообщает, сколько пикселей не совпало, откройте «Отчет (Тесты)». Это отчёт Playwright, инструмента, который запускает тесты. Вверху отчёта список тестов, упавший помечен красным крестиком, а значок картинки рядом означает, что к тесту приложены снимки.
+
+![Отчёт о тестах, в списке один упавший тест со значком приложенных снимков](/img/docs/img-217--screenshot-tests-report-list.png)
+
+Щелчок по тесту открывает его страницу. Внизу страницы блок Image mismatch, в нём снимки и переключатель между ними.
+
+- **Expected** (эталон) показывает снимок решения учителя.
+- **Actual** показывает снимок вашего решения.
+- **Diff** показывает разницу между ними. Разошедшиеся пиксели подсвечены красным.
+- **Side by side** ставит Expected и Actual рядом, а **Slider** накладывает их друг на друга со шторкой, которую можно двигать.
+
+![Блок Image mismatch на вкладке Diff, красным подсвечены полосы у верхнего и нижнего края терминала](/img/docs/img-218--screenshot-tests-diff.png)
+
+Начинать удобно с Diff. На снимке выше красные полосы идут вдоль верхнего и нижнего края терминала, при этом содержимое внутри совпало. Значит, блок получился ниже эталона, и искать надо в его вертикальных отступах. В этом примере вместо 20 пикселей сверху и снизу стоит 10. Чтобы понять, в какую сторону разошлась вёрстка, переключитесь на Actual и Expected по очереди.
+
+Снимки в отчёте мельче страницы в браузере, потому что тест снимает её в половинном масштабе. Expected и картинка в условии задания изображают одно и то же, просто Expected снят тестом.
+
+Бывает, что снимки не совпали по размеру, например `Expected an image 400px by 200px, received 400px by 230px`. Тогда тест падает сразу, без допуска на мелкую разницу. Такое сообщение означает, что ваша страница выше или шире эталона, и первым делом стоит проверить размеры и отступы крупных блоков.
+
+Место, которое нашлось в Diff, удобно разобрать на живой странице. Пункт «Сайт задания» в правой колонке открывает ваше решение в полном размере, и там элемент можно изучить инструментами разработчика в браузере.
+
+## Вместо отчёта заглушка
+
+Если в «Отчет (Тесты)» написано `The report appears here after the first test run`, отчёта ещё нет. Он появляется после запуска проверки и пропадает, когда упражнение перезапускается. Запустите проверку ещё раз, и отчёт заполнится.
+
+Часть упражнений по вёрстке проверяет конкретные свойства, например цвет или отступ элемента. Снимков такие тесты не делают, поэтому картинок в их отчёте нет, и это нормально. Ожидаемое и полученное значение свойства написаны в тексте ошибки.
+
+## Отладка выполнена, причины ошибки непонятны
+
+Если вы пока учитесь самостоятельно, то можете обратиться к другим студентам в [нашем Сообществе](/docs/community-and-media/telegram-soobshchestvo-heksleta.md). Если вы учитесь с наставником, обратитесь к нему, наставник поможет разобраться. Чтобы в вопросе легко мог разобраться другой человек, сделайте три вещи.
+
+- Напишите, как вы думаете, почему произошла ошибка.
+- [Сохраните](/docs/practice/kak-sohranit-svoe-reshenie.md) ваше решение и вставьте ссылку на него в сообщение.
+- Опишите, где на снимке Diff подсвечено расхождение, или приложите скриншот этой вкладки.