Зачем тестировщикам знания о frontend

Вам не нужно становиться frontend-разработчиком. Но вам нужно говорить на этом языке достаточно хорошо, чтобы вести продуктивные разговоры с разработчиками, писать точные баг-репорты и понимать, что вы тестируете.

Когда тестировщик говорит «кнопка не на своём месте», разработчику приходится гадать, что происходит. Когда тестировщик говорит «у кнопки submit стоит margin-top: 0 вместо margin-top: 16px, из-за чего она перекрывает поле формы на экранах уже 768px», разработчик может исправить это за секунды.

Этот урок научит вас минимальным знаниям frontend, которые дадут максимальную пользу для тестирования.

HTML: Структура

HTML (HyperText Markup Language) определяет структуру и содержимое веб-страницы. Думайте о нём как о скелете страницы.

Основные HTML-элементы для тестирования 

<!-- Заголовки определяют структуру документа -->
<h1>Главный заголовок</h1>
<h2>Заголовок раздела</h2>

<!-- Параграфы и текст -->
<p>Это параграф текста.</p>
<span>Строчный текстовый элемент</span>

<!-- Ссылки -->
<a href="https://example.com" target="_blank">Нажмите здесь</a>

<!-- Изображения -->
<img src="photo.jpg" alt="Описание изображения">

<!-- Формы -->
<form action="/submit" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Отправить</button>
</form>

<!-- Списки -->
<ul>
  <li>Неупорядоченный элемент</li>
</ul>
<ol>
  <li>Упорядоченный элемент</li>
</ol>

<!-- Контейнеры -->
<div class="wrapper">Блочный контейнер</div>
<section>Семантическая секция</section>
<nav>Область навигации</nav>
<footer>Область подвала</footer>

Что тестировщики должны проверять в HTML

Семантическая корректность: Используются ли заголовки в правильном порядке (h1, затем h2, без прыжков к h4)? Это влияет на доступность и SEO.

Атрибуты форм: Есть ли у каждого input элемент label? Установлены ли атрибуты required на обязательных полях? Используется ли правильный type (email, number, tel)?

Целостность ссылок: Ведут ли атрибуты href на валидные URL? Есть ли у внешних ссылок target="_blank" с rel="noopener noreferrer" для безопасности?

Доступность изображений: Есть ли у каждого <img> осмысленный атрибут alt? Это не просто хорошая практика — это юридическое требование во многих юрисдикциях.

Data-атрибуты: Современные фреймворки используют data-testid или аналогичные атрибуты для автоматизации тестирования. Проверяйте, что они есть там, где нужно.

DOM: HTML в памяти

Когда браузер загружает HTML, он создаёт DOM (Document Object Model) — живую древовидную структуру в памяти. JavaScript может модифицировать DOM, поэтому страницы меняются без перезагрузки.

Понимание DOM важно, потому что:

  • Исходный HTML-код и живой DOM могут отличаться (JavaScript его изменяет)
  • Инструменты автоматизированного тестирования взаимодействуют с DOM, а не с исходным HTML
  • «Просмотр исходного кода» показывает оригинальный HTML; вкладка Elements в DevTools показывает живой DOM

CSS: Представление

CSS (Cascading Style Sheets) контролирует, как выглядят HTML-элементы — цвета, размеры, позиции, анимации и адаптивное поведение.

Концепции CSS, которые должны знать тестировщики

Блочная модель (Box Model): Каждый элемент — это блок с content, padding, border и margin. Большинство багов вёрстки сводятся к неправильным значениям блочной модели.

+---------------------------+
|         margin            |
|  +---------------------+ |
|  |      border          | |
|  |  +-----------------+ | |
|  |  |    padding       | | |
|  |  |  +-----------+  | | |
|  |  |  |  content  |  | | |
|  |  |  +-----------+  | | |
|  |  +-----------------+ | |
|  +---------------------+ |
+---------------------------+

Типы отображения: Элементы block занимают всю ширину, элементы inline текут вместе с текстом, flex и grid создают современные макеты.

Позиционирование: static (по умолчанию), relative, absolute, fixed, sticky — каждый тип меняет расположение элемента на странице.

Media queries: Правила, применяющие стили в зависимости от размера экрана. Так работает адаптивный дизайн.

/* Стили для экранов уже 768px */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-content { width: 100%; }
}

Распространённые CSS-баги

БагСимптомЧто проверять
ПереполнениеТекст или изображения выходят за пределы контейнераСвойство overflow, размеры контейнера
Z-indexЭлементы скрыты за другимиЗначения z-index, контекст наложения
ВыравниваниеЭлементы не центрированы или не выровненыdisplay: flex, text-align, margin: auto
Поломка адаптивностиВёрстка ломается при определённой ширинеMedia queries, мета-тег viewport
Рендеринг шрифтовТекст выглядит по-разному в разных браузерахFallback-шрифты в font-family, загрузка веб-шрифтов

JavaScript: Поведение

JavaScript делает веб-страницы интерактивными — обрабатывает клики, валидирует формы, получает данные, обновляет страницу без перезагрузки.

Концепции JavaScript для тестировщиков

Обработка событий: Когда пользователь нажимает на кнопку, JavaScript перехватывает событие и выполняет код. Баги возникают, когда обработчики событий отсутствуют, привязаны к неправильному элементу или срабатывают многократно.

Асинхронные операции: API-вызовы, таймеры и анимации — асинхронные, они не выполняются мгновенно. Многие баги возникают потому, что код выполняется до прихода данных.

// Это распространённый паттерн бага:
const data = fetchUserData(); // Возвращает Promise, а не данные
console.log(data.name); // Ошибка: data — это объект Promise

// Правильный подход:
const data = await fetchUserData(); // Ждёт данные
console.log(data.name); // Работает корректно

Управление состоянием: Современные фреймворки (React, Vue, Angular) управляют состоянием приложения. Когда состояние обновляется некорректно, UI показывает неправильную информацию — устаревшие данные, фантомные элементы или пропущенные обновления.

Использование консоли браузера

Консоль — ваша суперсила в тестировании. Откройте её нажатием F12 или Cmd+Option+J (Mac) / Ctrl+Shift+J (Windows).

Проверка ошибок: Красные сообщения в консоли означают ошибки JavaScript. Это баги, даже если страница выглядит нормально.

Запросы к элементам: Используйте document.querySelector('.button-class') для программного поиска элементов.

Мониторинг сети: Вызовы console.log из приложения раскрывают поток данных.

Тестирование взаимодействий: Вы можете выполнять JavaScript напрямую, чтобы запускать действия, менять значения или инспектировать состояние приложения.

// Найти все битые изображения на странице
document.querySelectorAll('img').forEach(img => {
  if (!img.complete || img.naturalWidth === 0) {
    console.log('Битое изображение:', img.src);
  }
});

Практика: Инспекция реальной веб-страницы

Давайте отработаем навыки из этого урока на реальной веб-странице.

Упражнение 1: Инспекция HTML

Откройте любой веб-сайт и используйте DevTools (F12 > вкладка Elements):

  1. Кликните правой кнопкой мыши на главный заголовок и выберите «Исследовать элемент». Запишите HTML-тег (h1, h2 и т.д.)
  2. Найдите форму на странице. Проверьте каждый input:
    • Есть ли у него элемент label?
    • Правильный ли атрибут type (email, password, number)?
    • Установлены ли атрибуты required, minlength или maxlength?
  3. Найдите изображение. Проверьте, есть ли у него осмысленный атрибут alt
  4. Кликните правой кнопкой на ссылку. Проверьте, ведёт ли href на валидный адрес

Задокументируйте каждую находку, как вы бы сделали в баг-репорте.

Упражнение 2: Исследование CSS

Используя ту же страницу:

  1. В DevTools выберите элемент и посмотрите на панель Styles справа
  2. Включайте/выключайте CSS-свойства, кликая на чекбокс рядом с каждым правилом
  3. Измените значение margin или padding и наблюдайте эффект
  4. Измените размер окна браузера до разной ширины (1200px, 768px, 375px) и отметьте изменения вёрстки
  5. Поищите элементы, которые выходят за границы контейнеров или перекрывают другие элементы

Упражнение 3: Исследование консоли JavaScript

Откройте вкладку Console в DevTools:

  1. Введите document.title и нажмите Enter — это покажет заголовок страницы
  2. Введите document.querySelectorAll('a').length — это подсчитает все ссылки на странице
  3. Введите document.querySelectorAll('img[alt=""]').length — это подсчитает изображения с пустым атрибутом alt
  4. Проверьте наличие ошибок в консоли (красные сообщения). Каждая ошибка — потенциальный баг
  5. Попробуйте эту проверку доступности:
// Найти интерактивные элементы без доступных имён
document.querySelectorAll('button, a, input').forEach(el => {
  const name = el.textContent.trim() || el.getAttribute('aria-label') || el.getAttribute('alt') || '';
  if (!name) console.warn('Нет доступного имени:', el.tagName, el.className);
});

Упражнение 4: Определение frontend-бага

Вот типичный сценарий. Пользователь сообщает: «Цена показывается как $NaN на странице товара».

Для расследования:

  1. Откройте консоль — ищите ошибки JavaScript
  2. Найдите элемент цены в DOM — каково его текстовое содержимое?
  3. Найдите в вкладке Network ответ API — содержит ли он валидные данные о цене?
  4. Проверьте, правильно ли JavaScript парсит цену (string vs. number)

Баг может быть:

  • Backend: API возвращает цену как строку “19.99”, а frontend ожидает число
  • Frontend: JavaScript использует parseInt вместо parseFloat, теряя десятичные знаки
  • Данные: У товара нет цены в базе данных, возвращается null

Ваше расследование определяет, кто должен исправить баг.

Профессиональные советы по тестированию frontend

Совет 1: Всегда проверяйте консоль. Даже если страница выглядит нормально, ошибки в консоли указывают на проблемы. Предупреждения о производительности, уведомления об устаревших API и неудачные сетевые запросы — всё отображается здесь.

Совет 2: Используйте эмуляцию устройств. В DevTools есть панель устройств (Ctrl+Shift+M), которая имитирует разные размеры экрана и устройства. Тестируйте на стандартных breakpoint: 320px, 375px, 768px, 1024px, 1440px.

Совет 3: Отключите JavaScript. В настройках DevTools можно отключить JavaScript для проверки поведения страницы без него. Отображается ли контент? Деградируют ли формы корректно? Это тестирует доступность и SEO.

Совет 4: Проверяйте загрузку шрифтов. На медленных соединениях может появляться вспышка нестилизованного текста (FOUT) или невидимого текста (FOIT) при загрузке пользовательских шрифтов. Тестируйте с включённым троттлингом сети.

Совет 5: Инспектируйте состояния hover и focus. В панели Elements DevTools используйте кнопку :hov для принудительной активации состояний hover, focus, active и visited. Проверяйте, что все интерактивные элементы имеют видимые индикаторы фокуса для клавиатурной навигации.

Ключевые выводы

  • HTML определяет структуру — тестировщики должны проверять семантическую корректность, атрибуты форм и доступность
  • CSS управляет представлением — распространённые баги связаны с переполнением, z-index, выравниванием и адаптивными breakpoint
  • JavaScript добавляет интерактивность — следите за асинхронными ошибками, багами обработки событий и проблемами управления состоянием
  • DOM — живое представление страницы, с которым взаимодействуют инструменты тестирования
  • Консоль браузера показывает ошибки, невидимые пользователям, и необходима для эффективной отладки
  • Вам не нужно писать production-код, но чтение и понимание frontend-кода делает вас значительно более эффективным тестировщиком