Frontend (клиентская часть)
Урок 7.2 — Frontend: что видит и тестирует тестировщик
Что такое фронтенд
Фронтенд — это всё, что видит и с чем взаимодействует пользователь в браузере. Технически это три технологии, которые работают вместе:
- HTML — структура страницы (что есть на странице)
- CSS — внешний вид (как это выглядит)
- JavaScript — поведение (как это работает)
HTML: скелет страницы
HTML описывает содержимое: заголовки, параграфы, кнопки, формы, ссылки, изображения. Каждый элемент — это тег с атрибутами.
Тестировщику важно знать: если кнопка "не кликается" — первым делом смотри, не задизейблена ли она в HTML (disabled атрибут). Это видно в DevTools во вкладке Elements.
CSS: оформление
CSS управляет цветами, шрифтами, размерами, отступами, анимациями, адаптивностью. Визуальные баги — это почти всегда CSS.
Типичные CSS-баги:
- Элемент перекрыт другим элементом (z-index)
- Кнопка выходит за пределы контейнера на мобильном
- Текст не помещается и обрезается
- Цвет не соответствует дизайну
JavaScript: интерактивность
JS делает страницу живой: реагирует на клики, валидирует формы, загружает данные без перезагрузки страницы, показывает уведомления.
JS-ошибки видны в консоли браузера (DevTools → Console). Красная строка с Error или TypeError — это сигнал, что что-то сломалось. Всегда открывай консоль при тестировании.
Современные фреймворки: React, Vue, Angular
Большинство современных приложений используют JavaScript-фреймворки. Они строят интерфейс из компонентов — переиспользуемых блоков (кнопка, форма, карточка товара).
| Фреймворк | Кто использует | Особенность |
|---|---|---|
| React | Meta, Airbnb, Netflix | Самый популярный, компоненты + Virtual DOM |
| Vue | Alibaba, GitLab | Простой порог входа |
| Angular | Строгая архитектура, для крупных проектов |
Для тестировщика разница небольшая — интерфейс всё равно рендерится в HTML.
SPA vs традиционный сайт
Традиционный сайт: при переходе между страницами браузер загружает новый HTML с сервера. Каждый переход — полная перезагрузка.
SPA (Single Page Application): браузер загружает одну страницу один раз, а затем JavaScript меняет содержимое без перезагрузки. React, Vue и Angular создают SPA.
Что это значит для тестировщика:
- Навигация в SPA быстрая, но URL может не обновляться — проверяй это
- Состояние (данные в форме, фильтры) может теряться при "горячей" навигации
- DevTools Network показывает API-запросы, а не загрузку HTML-страниц
- Кнопка "Назад" браузера может работать неожиданно
Что тестировщик проверяет на фронтенде
| Область | Что проверять |
|---|---|
| Визуальное соответствие | Совпадает ли с макетом/дизайном |
| Адаптивность | Правильно ли выглядит на мобильном, планшете, десктопе |
| Кросс-браузерность | Работает ли в Chrome, Firefox, Safari, Edge |
| Доступность (a11y) | Есть ли alt у картинок, работает ли Tab-навигация |
| JS-ошибки | Есть ли ошибки в Console при сценариях использования |
| Состояние UI | Блокируется ли кнопка после клика, есть ли лоадер |
DevTools — твой главный инструмент
Открывается по F12 или Ctrl+Shift+I (Cmd+Option+I на Mac).
- Elements — смотришь HTML и CSS элементов
- Console — видишь JS-ошибки и логи
- Network — видишь все HTTP-запросы (API-вызовы, загрузка файлов)
- Application — куки, localStorage, sessionStorage
Что мы запомним
- Фронтенд = HTML (структура) + CSS (стили) + JavaScript (поведение)
- JS-ошибки всегда видны в консоли DevTools — открывай её при тестировании
- SPA не перезагружает страницу — это влияет на поведение кнопки "Назад" и URL
- Тестировщик проверяет: визуал, адаптивность, кросс-браузерность, доступность, JS-ошибки
- DevTools (F12) — главный инструмент фронтенд-тестирования