Заметки тестировщика | QA Notes

🎨 Figma для QA: что смотреть в макете, кроме красивой картинки

Макет открыли, глазами пробежались, "вроде все понятно". А потом половина багов верстки находится уже после релиза. Хотя в Figma есть все, чтобы проверять объективно.

🔍 1. Размеры и отступы
Зажми Alt (Option на Mac) и наведи курсор на элементы. Figma покажет точные расстояния между ними. Это те самые цифры, с которыми потом сравнивается реализация.

🌪 2. Стили текста
Шрифт, размер, начертание, межстрочный интервал. Всё это видно в правой панели при выборе элемента. Расхождение в 2px шрифта на глаз не заметно, а в цифрах видно сразу.

💫 3. Цвета
HEX-код берётся прямо из макета, в браузере его можно сверить через DevTools. Когда "голубой чуть другой" превращается в “#2B6CF6 вместо #3B82F6”, спорить не о чем.

🎲 4. Состояния компонентов
Хороший макет содержит не только дефолтное состояние кнопки, но и hover, нажатое, неактивное. Если их нет, это уже повод для вопроса дизайнеру до начала тестирования.

🖥 5. Разные экраны
Проверь, есть ли макеты для мобильной и десктопной версий. Если только для одной, то поведение на остальных размерах придётся уточнять.

⚠️ Частые ошибки
❌ Смотреть макет как картинку
❌ Сравнивать "на глаз"
❌ Не уточнять отсутствующие состояния
❌ Считать макет второстепенным по отношению к реализации

👇 Открываете Figma при тестировании или сверяетесь по памяти? Пишите в комменты 🙂

📓 Заметки тестировщика

🎨 Pixel Perfect: как найти расхождения с макетом, не имея дизайнерского глаза

"Ну вроде похоже на макет."
Знакомая фраза?
Проблема в том, что глаз пропускает 2-4 пикселя, а пользователь и дизайнер потом замечают.
Хорошая новость: дизайнерский глаз не нужен, есть инструменты, которые все покажут за тебя.

📍 Что такое Pixel Perfect
Это расширение для Chrome, которое накладывает скриншот макета из Figma поверх реальной страницы. Включаешь прозрачность, и все расхождения видны сразу.

📍 Как настроить за 5 минут
- Установи расширение Perfect Pixel для Chrome
- В Figma выбери нужный экран и экспортируй в PNG в масштабе 1x
- Загрузи PNG в расширение и выставь прозрачность 50%
- Совмести макет с реализацией по левому верхнему углу
- Листай страницу и смотри, где элементы двоятся
- Если картинка двоится, значит, есть расхождение. Остается только его зафиксировать.

📍 Что обычно находится
- Отступы, которые не совпадают с макетом
- Другой размер или начертание шрифта
- Цвета, которые отличаются на пару оттенков
- Иконки, сдвинутые на несколько пикселей
- Элементы, которые едут при смене ширины экрана

📍 Как измерить, а не гадать
Pixel Perfect показывает, что что-то не так, а точные цифры берем из двух мест:
- В Figma зажми Alt (Option на Mac) и наведи курсор на элементы, и увидишь расстояния между ними
- В DevTools на вкладке Elements, в разделе Computed, найди реальные padding, margin и размеры шрифта
- Дальше просто сравниваешь цифры. Никакого "мне кажется".

📍 Как оценить серьёзность
Ориентир, который можно использовать:
👉🏼 до 4px - Trivial или Minor
👉🏼 4-8px - Minor или Normal
👉🏼 больше 8px - Major
баг, который ломает пользовательский сценарий (кнопка уехала и на нее не нажать), - Critical, даже если отступ маленький

Главное правило: источник правды - это дизайн. Реализация должна соответствовать макету, а не наоборот.

📍 Как оформить баг-репорт
Шаги воспроизведения, ожидаемый результат (что в макете), фактический результат (что на странице) и скриншот с наложением. Если указать цифры из Figma и DevTools, разработчик не будет спорить и просто поправит.

⚠️ Частые ошибки

❌ Сравнивать на глаз
❌ Экспортировать макет не в 1x, и все "едет"
❌ Заводить по багу на каждый пиксель вместо одного баг-репорта на экран
❌ Не указывать приоритет, и все считается одинаково важным

👇 Проверяете верстку по макету или доверяете глазам? Пишите в комменты 🙂

📓 Заметки тестировщика

Рабочих мемов в почти пятницу 😏