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

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

А в конце статьи вас ждет ссылка на видео, которое я записал, для быстрого освоения принципа их работы.

1. Check My Links

Check My Links помогает быстро обнаружить битые ссылки на веб-странице. Оно автоматически выделяет неработающие ссылки красным цветом, что значительно упрощает и ускоряет процесс тестирования.

В моей практике, кроме битых ссылок, это расширение также помогло найти проблемы с плагинами и скриптами.

Установить из chromewebstore Check My Links

2. Fake Filler

Довольно часто в тестировании веб‑приложений приходится проверять различные формы на сайте, где необходимо заполнять поля тестовыми данными. Здесь очень пригодится Fake Filler, который помогает генерировать случайные данные для заполнения форм на веб‑страницах. Оно идеально подходит не только для тестировщиков, но и для разработчиков, которым нужно быстро протестировать интерфейсы или автоматизировать процесс регистрации на различных сайтах.

С помощью Fake Filler можно легко вводить фальшивые имена, адреса, номера телефонов, электронные почты и другие данные. Расширение поддерживает различные форматы ввода, что позволяет гибко настроить процесс генерации.

Установить из chromewebstore Fake Filler

3. ColorZilla

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

С помощью ColorZilla тестировщики могут быстро и точно захватывать цвета с любых элементов веб-страницы, используя инструмент "Пипетка". Это позволяет убедиться, что на сайте применяются правильные цвета в нужных местах, а также проверить соответствие цветовых кодов между макетами и реальной реализацией. Расширение поддерживает различные форматы цветовых кодов, такие как HEX, RGB, HSL, что удобно для проверки точности отображения цветов и их согласованности на разных устройствах и в разных браузерах.

Установить из chromewebstore ColorZilla

4. WhatFont

Подобно рассмотренному выше расширению ColorZilla, WhatFont необходим тестировщикам для быстрой и удобной работы с типографикой на веб-страницах. Это расширение позволяет точно определять шрифты, используемые на сайте, что важно для проверки соответствия шрифтов в различных элементах страницы.

С помощью WhatFont достаточно просто навести курсор на любой текст на веб-странице, чтобы мгновенно узнать его шрифт, размер, стиль и семейство шрифтов. Это позволяет тестировщикам быстро идентифицировать несоответствия в шрифтах или ошибки в применении стилей, без необходимости углубляться в исходный код страницы.

Установить из chromewebstore WhatFont

5. Viewport Resizer

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

Я пользовался многими аналогичными расширениями, но именно в Viewport Resize нашел самый обширный список предустановленных разрешений, охватывающих популярные современные устройства: от смартфонов и планшетов (iPhone, Android) до ноутбуков и мониторов с различными разрешениями.

Установить из chromewebstore Viewport Resizer

6. Fintest Pro

Конечно, в подборке расширений для ручного тестирования нельзя обойтись без инструмента, который помогает делать снимки экрана и записи видео. Такие расширения, например, позволяют захватывать скриншоты всей веб-страницы, а во время записи добавлять стрелки, выделения и текст для более наглядного объяснения.

Раньше для этих целей я использовал расширение Awesome Screenshot, а сейчас перешел на Fintest Pro. Оба инструмента предлагают схожий функционал, но Fintest Pro имеет несколько существенных улучшений, которые оказались для меня очень удобными. Среди них - возможность добавлять текст при записи и интеграция с Telegram, Google Drive и Dropbox, доступная даже в бесплатной версии.

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

Установить из chromewebstore Fintest Pro

7. BetterBugs: A Fresh Approach to Bug Reporting

BetterBugs это расширение для создания баг-отчетов. Оно также предоставляет функционал для скриншотов и записи экрана, а также записывает информацию из DevTools, включая данные с вкладок Console, Network и Application, полученные во время записи или снимка.

Для полноценного использования BetterBugs в качестве инструмента отчетности по дефектам, все члены вашей команды должны зарегистрироваться в системе. В бесплатной версии данные сохраняются только на 7 дней. Тем не менее, это расширение можно адаптировать под ваши тесты, особенно для анализа багов.

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

Установить из chromewebstore BetterBugs

То, что я не включил в этот список

Конечно, есть те, кто заметит, что некоторые расширения также могут быть полезны ручному тестировщику, но они отсутствуют в моем списке. Рассмотрим несколько таких вариантов и объясню, почему я их проигнорировал.

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

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

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

Где посмотреть принцип работы расширений из Топ 7

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