#visualregressiontesting — Public Fediverse posts

Как протестировать более 40 UI-компонентов за минуту: ускоряем скриншот-тесты

Привет, Хабр! Меня зовут Антон, я фронтенд‑разработчик в Домклик. Наша команда отвечает за библиотеку «Продуктовых сниппетов» — те самые карточки недвижимости, которые вы видите в нашей поисковой выдаче. Проблема в том, что этих карточек у нас более 40 видов (сниппеты вторичной, первичной, загородной, краткосрочной недвижимости, каждый тип имеет несколько размеров под разные разрешения), и все они живут в одной монорепозиторной библиотеке на React 19 . Любая правка в общих стилях или глобальных дизайн-токенах, или элементарное обновление компонентов дизайн-системы превращалось в игру «Сапёр»: поправил отступ в одном типе сниппета — поехала вёрстка или поплыл паддинг в другом, о чём мы узнавали уже при тестировании релиза или, что хуже, от пользователей после релиза. Я расскажу, как мы внедрили полноценное визуальное регрессионное тестирование (Visual Regression Testing) на основе Storybook , Playwright и Jest , с какими трудностями столкнулись при стабилизации скриншотов и как заставили тесты работать стабильно.

https://habr.com/ru/companies/domclick/articles/1050424/

#playwright #storybook #visualregressiontesting #react #jest #screenshottesting #frontend