Как я тестирую веб: топ-5 инструментов для QA Engineer

Привет! Меня зовут Владислав Фарисей, я QA Engineer в Prozorro, а еще — веду свой YouTube-канал с курсами для начинающих тестировщиков. В этом материале я поделюсь самыми популярными инструментами, которые использую в своей работе для тестирования фронта и бэка. 

Зачастую QA сталкиваются с тестированием веба (видимой частью проекта) и API (того, что под капотом). И если логика тестирования API-части понятна — нужно лишь пару инструментов и документация от разработчика, то с вебом не все так очевидно. Ведь юзера не сильно волнует, что под капотом, его интересует отображение продукта конкретно на его девайсе.

В Prozorro мы используем мировые практики тестирования веба, так как наш сайт не имеет конкурентов в сегменте госзакупок. Наши пользователи — не просто классические потребители товаров или услуг. Мы охватываем всех, у кого есть интернет и желание просмотреть информацию о любой закупке.

Система Prozorro имеет уникальную базу заказчиков и участников, и отображает все этапы их связи между собой в предоставлении и получении товара или услуг. Поскольку каждый юзер может просмотреть данные, которые его интересуют в системе госзакупок (кто покупал, за сколько покупал, выполнил ли условия покупки и так далее), мы заботимся, чтобы эта информация отображалась и несла в себе только актуальные данные. Поэтому мы тщательно проверяем отображения и у нас низкий порог багов на основной странице сайта. 

Существует большое количество полезных инструментов тестирования, с помощью которых можно усовершенствовать продукт, уменьшить количество багов на проде, сделать его доступным любому юзеру на любом девайсе. Но чтобы выбрать именно те, которые будут вам полезны — нужно их опробовать. В этом материале я поделюсь самыми популярными инструментами, которые использую в своей работе для тестирования фронта и бэка. 

Браузеры

Все гениальное происходит из простого: наличие двух-трех и больше браузеров облегчает тестирование веб-части.

Почему так? Возьмем для примера интернет-магазин с шаблонным функционалом — отображением товара и его покупкой пользователем. Мы знаем, что для того, чтобы на сайте появился товар, его нужно туда добавить. Для этого, допустим, есть роль администратора. Так, открыв один и тот же сайт под двумя ролями в разных браузерах — администратора и пользователя, можно проверить загрузку товара и его отображение для покупателя. И это — самый примитивный тест.

В каждом браузере нужно проверить отображение всего функционала страницы, ведь покупатели используют разные браузеры, и нужно учесть все моменты. 

Chrome DevTools

Следующий инструмент — серьезная утилита для тестирования веба – Chrome DevTools, которая позволяет перевернуть видимую часть проекта (страницу сайт) с ног на голову. То есть придумать разноплановые проверки, узнать происхождение багов, настроить сайт под любой вид устройства — так как юзеры пользуются не только домашним ПК или ноутбуком, у них есть еще смартфоны с разными разрешениями экрана. 

DevTools

Чтобы задебажить сайт, у утилиты есть две вкладки: Network и Console. Первая используется для работы с запросами и их анализом, а вторая — для определения ошибок в коде и работы с ним. 

Помимо этих фич, Chrome DevTools разрешает узнать и настроить : 

• эмуляцию Android и iOS, подключение Android при отладке;
• переопределение геолокации и подмену User-Agent;
• определение JS-пути к строке;
• изменение стилей CSS у элементов;
• неиспользуемые CSS и JavaScript в верстке;
• сохранение изменений в Chrome при перезагрузке страницы;
• имитация медленного сетевого соединения;
• снимки экрана при загрузке страницы;
• блокирование запросов;
Онлайн-курс Frontend-разробник від Powercode academy.
Курс на якому ти напишеш свій чистий код на JavaScript, попрацюєш із різними видами верстки, а також адаптаціями проектів під будь-які екрани. .
Зарееструватися
• все о cookies во вкладке Applications.

Приложения для браузера

Третий пункт тоже связан с браузерами. Почти все браузеры имеют свой встроенный магазин для установки приложений. Большинство этих приложений идеально подходят для тестирования продукта и его настройки для конечного юзера. 

JSON Viewer

JSON Viewer

JSON Viewer — приложение для удобного просмотра JSON-объектов и работы с ними. Ведь почти всегда нам нужно проверить все товары магазина не только на фронте, но и убедиться, что все отображается правильно в API-части.

CrossBrowserTesting GO

CrossBrowserTesting GO

CrossBrowserTesting GO — это приложение от Google, которое позволяет освоить кроссбраузерное тестирование:

• имитирует работу любой операционной системы;
• умеет выставлять и настраивать отображение сайта на разных версиях браузеров;
• имитирует популярные и не популярные мобильные девайсы и их операционные системы, а также работу с интернетом.

Приложение отлично подойдет для компаний, у которых есть веб-продукты. 

Tampermonkey

Tampermonkey

Tampermonkey — это скрипты для веба. Иногда для проверки нового функционала нужно воспроизвести алгоритм действий на фронте сайта, чтобы дойти до него. Зачастую это очень утомительно, но есть выход!

Приложение, которое работает в паре с вашим браузером, позволяет всего один раз настроить алгоритм заполнения полей на ресурсе и сохранить его. Уже при открытии этого окна поля в нем будут автоматически заполнены благодаря нашему приложению. 

Software testing

Software testing

Software testing — платформа для тестировщиков разного уровня. Здесь можно узнать последние новинки в отрасли тестирования, поделиться опытом с коллегами и многое другое. Это своего рода мировой блок для тестировщиков прямо у вас в браузере.

Текстовые редакторы

Наличия разных текстовых редакторов мало — нужно еще уметь ими правильно пользоваться 🙂 Всем известны редакторы вроде MS Excel и Notepad++, которые имеют не только стандартные функции базового пользователя. Их намного больше, чем нам кажется.

MS Excel

Например, MS Excel умеет сравнить два списка, имеющие какой-то уникальный идентификатор. И это очень полезная функция, если есть много одинаковых товаров на сайте, но в некоторых, например, стоит неправильная цена.

Notepad++

А Notepad++ подойдет для работы с большими файлами. Также редактор прекрасно справляется с синтаксисом форматов XML / JSON / JavaScript.

LightShot для оформления баг-репорта

LightShot

Обязательный пункт в работе тестировщика — правильное оформление баг-репорта и прикрепление к нему скриншота с ошибкой. Для этого подойдет LightShot. Приложение позволяет делать скриншоты выделенной области. Помимо этого, при оформлении скриншота доступна функция редактирования. Она позволяет подписать проблемное место, отметить его стрелкой, написать дополнительные параметры. А также сохранить или скопировать скриншот в буфер обмена и сразу отправить его в удобный мессенджер или в Jira.

Вместо выводов

Главное — уметь подбирать правильные инструменты под специфику проекта. Но чтобы качественно это сделать, нужно в первую очередь подумать, для кого ваш продукт предназначен и как целевая аудитория будет его использовать. Ведь чтобы поймать вора, нужно думать как вор 🙂