Ответ
Есть опыт тестирования визуальной части и пользовательского опыта (UI/UX) на соответствие дизайн-макетам и требованиям.
Основные аспекты проверки:
-
Визуальное соответствие (Pixel-Perfect):
- Сверка с макетами из Figma, Adobe XD, Zeplin.
- Проверка цветов (
#HEX,rgb()), шрифтов, размеров, отступов (padding,margin), выравнивания. - Использование плагинов (PerfectPixel) или инструментов разработчика (Computed Styles в DevTools).
-
Адаптивность и кросс-браузерность:
- Корректность отображения на разных разрешениях (мобильные, планшеты, десктоп).
- Единообразие поведения в различных браузерах (Chrome, Firefox, Safari, Edge).
-
Логика и доступность (Accessibility):
- Правильная последовательность фокуса (
tabindex). - Соответствие стандартам WCAG (контрастность, текстовые описания для изображений).
- Удобство навигации и интуитивность интерфейса.
- Правильная последовательность фокуса (
Пример проверки через DevTools:
/* Ожидаемые стили из макета */
.primary-button {
background-color: #4CAF50; /* Проверяем цвет */
padding: 12px 24px; /* Проверяем отступы */
font-family: 'Roboto', sans-serif; /* Проверяем шрифт */
border-radius: 8px;
}Для автоматизации применяются скриншотные тесты (например, в Selenium, Cypress или Playwright) для регрессионного контроля вёрстки.
Ответ 18+ 🔞
А, ну это про то, как глаза сломать, пока ищешь, где этот пиксель съехал, блядь. Визуальная проверка — это ж такая работа, где ты должен быть одновременно и педантом, и садистом, ёпта.
Смотри, в чём суть. Ты берёшь макет, который дизайнер выстрадал в Фигме, и начинаешь прикладывать его к тому, что наваял фронтендер. И тут начинается цирк, блядь.
Первое — это пиксель-перфект, ёбана. Ты должен смотреть на каждый отступ, на каждый скруглённый уголок. Цвета проверяешь — не просто «синий», а вот этот конкретный #4CAF50, сука. Шрифт — не просто «какой-то тонкий», а 'Roboto', sans-serif, жирность 500. И если где-то margin на 2 пикселя больше — это уже повод для разборок, пиздец. Плагины всякие в помощь, но чаще всего просто глаз-алмаз и вкладка Computed Styles в девтулзах, где вся правда жизни всплывает.
/* Вот смотришь на кнопку и думаешь: "Ну что, красавчик?" */
.primary-button {
background-color: #4CAF50; /* А цвет-то правильный? Не #4CAF51? */
padding: 12px 24px; /* А не 11 на 23? Сука, опять намудрили! */
font-family: 'Roboto', sans-serif; /* А если у юзера Хрома другой шрифт? */
border-radius: 8px; /* А скругление-то одинаковое везде? */
}Второе — адаптивность. Это вообще отдельная песня, ядрёна вошь. На десктопе всё красиво, а открываешь на телефоне — а там меню в жопу съехало, кнопки друг на друге висят, и текст читать невозможно. И так на каждом брейкпоинте. А потом ещё и в разных браузерах смотреть: в Хроме норм, в Сафари — хуйня, в старом Едже — вообще пиздец, всё разъехалось, как пьяные в подворотне. Волнение ебать!
Третье — логика и доступность. Это для тех, кому мало просто красоты, блядь. Надо, чтобы табом по сайту можно было пройтись, как по проспекту, а не как по минному полю. Чтобы слепой со скринридером не охуел от того, что ему зачитывают. Контрастность проверить, чтобы текст не сливался с фоном. В общем, сделать так, чтобы не только нам, молодым и злым, было удобно, но и всем остальным, в рот меня чих-пых.
А чтобы самому не сойти с ума от этой рутины, умные люди придумали скриншотные тесты. Настроил раз — и потом просто запускаешь, а тебе показывают, где и что поехало с прошлого раза. В Selenium, Cypress или Playwright это делается. Автоматизация, мать её. Но и тут не всё гладко: из-за разницы в рендеринге между машинами иногда фейлится на ровном месте. Но это уже другая история, блядь.
Короче, работа не для слабонервных. Нужно терпения — овердохуища, и глаз, заточенный под микроскоп. Иначе получится кривой, неудобный и недоступный интерфейс, на который пользователь посмотрит и скажет: «Да идите вы нахуй со своим сайтом». А мы не хотим такого, правда?