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

[fey]

Summary

Новая статья для студента: где в упражнении по вёрстке найти отчёт о тестах и как читать снимки. Повод — вопрос тьютора в Slack: снимки пропали из вывода тестов, теперь они в пункте «Отчет (Тесты)».

 docs/code-and-test-errors/
+├── kak-chitat-skrinshotnye-testy.md   # отчёт, Expected/Actual/Diff, заглушка, проверки до снимка
 static/img/docs/
+├── img-216--screenshot-tests-report-menu.png   # страница упражнения, пункт «Отчет (Тесты)»
+├── img-217--screenshot-tests-report-list.png   # список тестов в отчёте Playwright
+└── img-218--screenshot-tests-diff.png          # блок Image mismatch, вкладка Diff

Кадры 217 и 218 сняты на css_content_terminal_exercise с отступами терминала 10px 30px вместо 20px 30px. Перед каждой картинкой стоит {/* аннотировать: … */} с тем, что обвести; рамки дорисовываются отдельно.

Evidence

• Before: в хелпе ни одной статьи про скриншотные тесты, отчёт Playwright и Diff (грепом по docs/).
  After: pnpm build → [SUCCESS] Generated static files in "build", страница build/code-and-test-errors/kak-chitat-skrinshotnye-testy.html; локально три картинки загружаются, консоль страницы без ошибок; rumdl check без замечаний.

Merge Danger

Door: two-way

Blast Radius: один раздел

Статья встаёт первой в «Ошибки в коде и вывод тестов», остальные сдвигаются на одну позицию в меню.

🤖 Generated with Claude Code