Мы уже знаем, как находить ошибки в интерфейсе и как правильно описывать их в Jira — теперь пришло время научиться смотреть "под капот" веб-страницы. Это поможет точнее понимать, где и почему возникает ошибка, особенно если она связана с отображением: обрезанные блоки, съехавшие кнопки или неправильные стили.
Для этого у нас есть мощный инструмент — DevTools (инструменты разработчика). Он встроен в любой современный браузер и позволяет анализировать структуру сайта, изменять элементы и проверять, как интерфейс реагирует на правки. И, что важно, вы не обязаны быть программистом, чтобы его использовать.
Что такое DevTools и зачем они тестировщику?
DevTools — это набор встроенных инструментов в браузере, которые помогают анализировать и отлаживать веб-страницы. Раньше их использовали в основном разработчики, но сегодня любой тестировщик должен уметь с ними работать.
С их помощью можно:
- Найти любой элемент на странице и посмотреть его свойства.
- Проверить, почему блок выглядит иначе, чем в макете.
- Временно изменить текст или стиль, чтобы проверить поведение интерфейса.
- Убедиться, что верстка корректно отображается на разных устройствах.
💡 DevTools — как рентген для интерфейса. Вы видите не только симптомы (ошибку на экране), но и возможную причину.
Как открыть DevTools?
Открыть инструменты очень просто — используйте:
- F12 — универсальная клавиша в большинстве браузеров.
- Ctrl+Shift+I (на Windows) или Cmd+Option+I (на Mac).
- Или кликните правой кнопкой мыши по любому элементу на странице и выберите «Просмотреть код» или «Исследовать элемент».
После открытия вы увидите панель с несколькими вкладками. Нас сейчас больше всего интересует вкладка Elements.
Вкладка Elements: структура страницы под микроскопом
Вкладка Elements показывает HTML-элементы — основные строительные блоки веб-страницы. Каждый элемент (кнопка, заголовок, поле ввода) представлен в виде тега, например:
<button class="login-btn">Войти</button>
Здесь:
<button>— это HTML-элемент.class="login-btn"— атрибут, который задаёт стиль и поведение.
В левой части вкладки — дерево DOM (Document Object Model), где все элементы организованы иерархически, как вложенность папок. В правой — CSS-стили, которые применяются к выделенному элементу.
🔍 Вы можете навести курсор на любой элемент в DevTools — и браузер подсветит его на странице. Это помогает быстро сопоставить код и визуальное отображение.
Как находить элементы?
Часто нужно найти конкретный элемент, чтобы проверить его классы или стили. Сделать это можно несколькими способами:
- Наведение мыши по HTML-структуре — DevTools подсвечивает соответствующий блок на странице.
- Поиск по тексту: нажмите Ctrl+F (Cmd+F на Mac) внутри вкладки Elements и введите текст, например «Зарегистрироваться».
- Поиск по классу или тегу: введите
.header,buttonили#menu— DevTools покажет все совпадения.
Пример:
Вы тестируете форму входа и видите, что поле «Электронная почта» обрезано.
- Открываете DevTools.
- Ищете по слову «Электронная почта».
- Находите элемент
<input placeholder="Электронная почта">. - В правой панели видите, что ему задана ширина
width: 200px— возможно, этого недостаточно.
Теперь вы не просто сообщаете: «Поле обрезано», а можете точно указать: «Поле ввода email имеет фиксированную ширину 200px, что недостаточно для длинных адресов».
Изменение HTML и CSS "на лету"
Одно из самых полезных свойств DevTools — возможность временно изменять элементы. Это не затрагивает реальный код сайта, но помогает проверить, как исправление повлияет на интерфейс.
Как изменить текст элемента
- Найдите нужный элемент в вкладке Elements.
- Дважды кликните по тексту (например, по надписи «Войти»).
- Измените его, например, на «Войти срочно!».
- Нажмите Enter.
Вы увидите, как текст изменился на странице. Это полезно при тестировании:
- Проверки переполнения текстом.
- Локализации (например, как интерфейс ведёт себя с длинными словами).
- Верстки при динамическом обновлении контента.
Как изменить CSS-стили
- Выделите элемент.
- В правой панели найдите блок Styles — там отображаются CSS-стили.
- Найдите свойство, например
width, и измените его значение. - Или добавьте новое: кликните в пустую строку, введите
background-color: red, нажмите Enter.
Пример:
Кнопка "Оплатить" частично скрыта на мобильном экране.
- Выделяете её в DevTools.
- В CSS видите
max-width: 250px. - Меняете на
300px— и видите, что теперь кнопка отображается полностью. - Это подтверждает, что проблема в ограничении ширины.
⚠️ Изменения временные! После обновления страницы всё вернётся к исходному виду. Это не поломает сайт — вы просто "примеряете" исправления.
Практическое задание
Откройте любую веб-страницу (например, сайт интернет-магазина) и выполните:
- Найдите кнопку «Корзина» с помощью DevTools.
- Измените её текст на «Моя сокровищница».
- Найдите поле поиска по
placeholderи проверьте, какие классы у него указаны. - Увеличьте ширину шапки сайта на 50 пикселей через CSS.
- Сделайте скриншот с выделенным элементом — он пригодится при оформлении баг-репорта.
📌 Подсказка: прикрепляя скриншот из DevTools к багу в Jira, вы показываете не только визуальную проблему, но и её техническое обоснование. Это делает ваш отчёт гораздо сильнее.
Мобильный режим: тестирование адаптивности
В DevTools есть встроенная симуляция мобильных устройств. Нажмите иконку 📱 (или Ctrl+Shift+M), чтобы переключиться в режим просмотра для телефонов.
Теперь вы можете:
- Выбрать модель устройства (iPhone, Pixel и др.).
- Повернуть экран.
- Проверить, как элементы перестраиваются.
Это особенно важно при кроссбраузерном тестировании — вы можете быстро увидеть, поедет ли верстка на узком экране.
Зачем это всё тестировщику?
Вы уже умеете находить UI-ошибки. Теперь вы можете:
- Точнее описывать баги, ссылаясь на конкретные элементы и стили.
- Быстрее локализовать проблему, не дожидаясь разработчика.
- Проверять гипотезы, не выходя из браузера.
- Делать баг-репорты в Jira более убедительными, прикладывая скриншоты из DevTools.
Это не просто "прикольный инструмент" — это часть вашей повседневной работы.
Что дальше?
Мы научились анализировать структуру и стили интерфейса. Но иногда ошибка не видна на экране — она скрывается в логике работы сайта. Например, кнопка нажимается, но ничего не происходит.
Чтобы находить такие скрытые проблемы, нужно заглянуть в Console — там отображаются ошибки JavaScript, предупреждения и системные сообщения. Именно этому мы посвятим следующую тему: Отладка с помощью Console.
Вы удивитесь, сколько багов можно найти просто посмотрев на вкладку с ошибками — даже не касаясь интерфейса.