Как читать скриншотные тесты
Проверка упражнения по вёрстке упала, и во вкладке «Вывод» написано, сколько пикселей не совпало, например 3372 pixels (ratio 0.05 of all image pixels) are different. Какие именно пиксели разошлись, текст не показывает. Их видно в отчёте о тестах, который открывается пунктом «Отчет (Тесты)» в правой колонке страницы упражнения.
Скриншотный тест открывает вашу страницу в браузере и снимает её. Снимок он сравнивает пиксель за пикселем с эталоном, то есть со снимком решения учителя. Небольшую разницу тест прощает, потому что сглаживание краёв и шрифтов даёт шум в несколько пикселей даже на одинаковой вёрстке. Если разница больше, проверка падает.
Читать результат удобнее с текста ошибки. Часто причина названа в нём прямо, и картинки тогда не нужны. К снимкам стоит переходить, когда текст сообщает только число разошедшихся пикселей.
Упала проверка перед снимком
Прежде чем снимать страницу, тест убеждается, что сравнивать есть что. Он проверяет, что стили подключились, шрифты загрузились и картинки на странице открываются. Если одна из этих проверок упала, до снимка дело не доходит, и в отчёте картинок не будет. Причину тогда называет сама ошибка, как в этом примере.
Error: стили не подключились: проверьте <link> на styles/app.css
Такое сообщение означает, что браузер вообще не применил ваш CSS. Сверьте путь в теге <link> с тем, где лежит файл стилей, и запустите проверку снова.
Разошлись снимки
Если ошибка сообщает, сколько пикселей не совпало, откройте «Отчет (Тесты)». Это отчёт Playwright, инструмента, который запускает тесты. Вверху отчёта список тестов, упавший помечен красным крестиком, а значок картинки рядом означает, что к тесту приложены снимки.
Щелчок по тесту открывает его страницу. Внизу страницы блок Image mismatch, в нём снимки и переключатель между ними.
- Expected (эталон) показывает снимок решения учителя.
- Actual показывает снимок вашего решения.
- Diff показывает разницу между ними. Разошедшиеся пиксели подсвечены красным.
- Side by side ставит Expected и Actual рядом, а Slider накладывает их друг на друга со шторкой, которую можно двигать.
Начинать удобно с 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, отчёта ещё нет. Он появляется после запуска проверки и пропадает, когда упражнение перезапускается. Запустите проверку ещё раз, и отчёт заполнится.
Часть упражнений по вёрстке проверяет конкретные свойства, например цвет или отступ элемента. Снимков такие тесты не делают, поэтому картинок в их отчёте нет, и это нормально. Ожидаемое и полученное значение свойства написаны в тексте ошибки.
Отладка выполнена, причины ошибки непонятны
Если вы пока учитесь самостоятельно, то можете обратиться к другим студентам в нашем Сообществе. Если вы учитесь с наставником, обратитесь к нему, наставник поможет разобраться. Чтобы в вопросе легко мог разобраться другой человек, сделайте три вещи.
- Напишите, как вы думаете, почему произошла ошибка.
- Сохраните ваше решение и вставьте ссылку на него в сообщение.
- Опишите, где на снимке Diff подсвечено расхождение, или приложите скриншот этой вкладки.