Какие проверки нужно сделать для кнопки: многократное нажатие, однократное выполнение, цвет, форма, адаптивность и текст?

Что проверяют

Умеете ли вы разложить простой элемент на функциональные, визуальные и нефункциональные проверки и не забыть про сервер. Следом часто спрашивают, как вы убедитесь, что двойной клик не создал два заказа.

Как отвечать

Сгруппируйте проверки:

• однократное выполнение: один клик даёт один запрос и одну запись. Смотрите не на экран, а во вкладку Network, в прокси вроде Charles и в базу. Двойной клик, серия быстрых кликов, клик во время загрузки, Enter одновременно с кликом;
• блокировка: на время запроса кнопка неактивна или с лоадером, после ошибки снова доступна, а не зависает навсегда;
• защита на сервере: отправьте тот же запрос дважды через Postman. Блокировка кнопки от дублей не защищает, нужна идемпотентность на бэкенде;
• многократное нажатие там, где оно законно: счётчик «+» учитывает каждое нажатие, дебаунс не съедает клики;
• состояния: обычное, hover, фокус с видимой обводкой, нажатое, disabled, загрузка;
• цвет и форма: точные значения из макета в Figma: цвет, радиус, размеры, отступы. Контраст текста к фону по WCAG AA не ниже 4,5:1, для крупного текста 3:1;
• текст: правильная формулировка, длинные переводы не вылезают за границы, перенос или обрезка по макету;
• адаптивность: брейкпоинты, поворот экрана, масштаб 200%. Зона нажатия на мобильных не меньше 44×44 pt по гайдлайнам Apple и 48×48 dp по Material;
• клавиатура и доступность: кнопка достижима по Tab, срабатывает от Enter и Space, у неё есть доступное имя для скринридера. div вместо button обычно проваливает всё это сразу.

Где спотыкаются

Проверяют двойной клик глазами: кнопка посерела, значит всё хорошо. При этом в Network уходит два запроса.

Сверяют цвет «на глаз» вместо значений из макета и не считают контраст.

Тестируют только десктоп в одном состоянии кнопки и забывают про фокус, disabled и работу с клавиатуры.