Всем привет, меня зовут Иван, я инженер по тестированию (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 - это язык программирования, который позволяет добавлять интерактивность и динамическое поведение на веб-странице.
Интересные статьи
Интересные статьи
