Всем привет, меня зовут Иван, я инженер по тестированию (Manual and Automation). В ремесле более 2-х лет. В этой статье мы рассмотрим методы черного, серого и белого ящиков, а так же как JavaScript может быть использован для перехода от метода черного ящика к серому и белому.
Со мной сегодня senior фронтенд-разработчик, Алексей - специалист с большим опытом, он научит вас дебажить код в Devtools и ставить точку останова. Даст советы для QA как стать самостоятельнее и определять ошибки в коде с базовыми знаниями JavaScript. Ссылка на канал Алексея "Рассказ фронтендера"
Для чего нам нужна точка останова и как это связано с методами тестирования?
Что такое метод тестирования? Это метод подхода к тестированию: можно подойти к тестированию закрытыми глазами с тест-дизайном "Исследовательское тестирование", а можно изучить, что происходит под капотом и уже как механик капаться в грязи в чужом коде. Точка останова это один из гаечных ключей, которые помогут проверить код и его реализацию в проекте.
ТЕОРИЯ (1 мин)
QA подходит к тестированию по трём методам:
Метод черного ящика - тестирование ПО без знания его внутренней структуры и реализации.
Независимость от внутренней реализации: QA-специалисты могут тестировать ПО, не зная деталей его реализации. Это позволяет им сосредоточиться на проверке функциональности и пользовательского опыта.
Метод серого ящика - тестирование с некоторым представлением о внутренней структуре ПО.
Более глубокое тестирование: QA-специалисты могут использовать знания о внутренней структуре ПО для проведения более глубокого тестирования, включая проверку базы данных, взаимодействие с API и проверку состояния приложения.
Метод белого ящика - тестирование внутренней структуры и реализации ПО.
Полное покрытие кода: QA-специалисты могут проверить каждую строку кода ПО, что позволяет обнаружить скрытые ошибки и улучшить качество программного обеспечения.
Для того, чтобы перейти из черного ящика в серый ящик, нам необходимо познакомиться с Devtools, а точнее с некоторыми вкладками, которые необходимы инженеру по тестированию.
Elements - вкладка, позволяющая просматривать и редактировать HTML-структуру страницы, а также изменять стили элементов.
Console - предоставляет возможность взаимодействия с JavaScript интерпретатором, отображение ошибок и вывод отладочных сообщений.
Network - отображает все сетевые запросы, отправляемые и получаемые страницей, а также информацию о времени загрузки ресурсов.
Sources - позволяет просматривать и отлаживать JavaScript-файлы (картинки, css- файлы и др.), а также устанавливать точки останова в исходном коде для отладки js скрипта.
ПРАКТИКА (20 мин)
На веб-странице добавлен новый функционал по случаю большого праздника. Тематическое обновление принесло на сайт падающие ❄️ снежинки при загрузке страницы. В требованиях есть параметры скорости и кружения снежинок для более реалистичной картинки. Методом черного ящика, то есть на глаз с секундомером тестировать не получится, даже если сильно хочется.
В новом функционале заложены переменные speed и rotate, у которых есть значения. Необходимо сравнить ожидаемый результат (требования) с фактическим.
https://ivaniksanov.github.io - тестируемый сайт на котором вы можете сами следовать инструкции ниже. Рекомендую использовать Chrome Browser.
Переходим на сайт и открываем инструмент разработчика (devtools) - вкладка Sources.
main.js - это файл JavaScript, который обычно содержит основной код и логику для работы веб-сайта. Он может включать в себя функции, обработчики событий, взаимодействие с элементами страницы и другие операции, необходимые для функционирования сайта.
Веб-сайт обычно состоит из трех основных компонентов:
HTML (HyperText Markup Language) - это язык разметки, используемый для создания структуры и содержимого веб-страницы.
CSS (Cascading Style Sheets) - это язык стилей, который определяет внешний вид и оформление веб-страницы.
JavaScript - это язык программирования, который позволяет добавлять интерактивность и динамическое поведение на веб-странице.
? В оранжевой области код JavaScript. Для удобства понимания кода мы оставили комментарии по каждому блоку функций наших снежинок.
? В зелёной - номера строк, при нажатии на строку мы активируем точку останова.
? В фиолетовой - управление точкой останова. Пропустить точку, пойти по шагам функции, отобразить значения переменной и т.д.
ТРЕБОВАНИЯ:
Скорость снежинок должна быть разной для реалистичности, примерно speed (2-3 сек) и задается случайным числом. Поворот rotate (направо и налево) снежинок так же случайным числом, но не слишком быстро. Снежинки также не должны перегружать интерфейс веб-сайта. Протестировать кол-во снежинок при нахождении на сайте более 5 мин.
Breakpoint — это инструмент отладки, который позволяет нам выбрать определенную строку кода, на которой мы хотим остановиться, чтобы проанализировать данные и состояние программы в этой точке. Breakpoint = Точка останова
Точку останова нельзя поставить на инициализацию функции:
?function createSnowflake() {
Инициализация функции createSnowflake() представляет собой объявление функции и определение ее тела. Это лишь создает функцию в памяти, но само выполнение кода внутри функции происходит только при вызове этой функции.
После активации точки останова необходимо запустить дебаг кода путем любого клика на веб-сайте. (После клика активируется функция и соответсвенно точка останова)
Установив breakpoint, мы останавливаем выполнение функции на этой строчке. Это позволяет нам продолжить выполнение кода построчно, чтобы отследить изменения нашей переменной.
? Коричневым акцентом выделены основные команды для управления точками останова. Нажимаем на дугообразную стрелку и шагаем по функции
? Зеленым выделены значения по каждой строке кода и значения переменных.
? Синим обозначен раздел Watch, в котором можно добавить наименования переменных и смотреть их значения. Также эти же значения можно увидеть в зеленой области.
Пришло время понять значения переменных и сравнить с требованиями
randomSize - случайное значение размера снежинок в пределах от 20px до 80px.
startX - случайное значение появление снежинки от левого края.
speed - случайная скорость, но не падения, а поворота снежинок.
? Голубым цветом указана переменная speed она используется в повороте снежинок rotate ${speed}s linear infinite
? Оранжевым указано значение скорости снежинок - 3 секунды, snowfall 3s linear infinite - это означает отклонение от требований. Скорость снежинок одинаковая, а должна зависеть от случайного числа переменной speed.
Уже можно завести задачку в Jira и прикрепить ОР и ФР.
Помимо скорости снежинок, нам также необходимо протестировать их количество и то, как они влияют на производительность сайта при нахождении на нём более 5 минут. Похвально, если вы не забыли про кросс-браузерное тестирование.
❄️ Напишите в комментариях, что происходит на сайте, если пользователь будет находится более 5 минут, и что можно поменять в коде для исправления ошибки.
Подсказка:
Спасибо нашему фронтенд-разработчику, Алексею, за переход от метода черного ящика к серому, путем прекрасного инструмента браузера - Devtools (Breakpoint).
❄️ Ссылка на канал Алексея, где он помогает понять JavaScript "Рассказ фронтендера"
❄️ Контакт QA Ивана - тг для связи @evanovnew
