Всем привет, меня зовут Иван, я инженер по тестированию (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