В этом обзоре я попытаюсь охватить расширения для тестирования сайтов, которые могут пригодиться начинающим тестировщикам в работе. Информация о них частенько мелькала на профильных сайтах, и мне стало интересно, впишутся ли они в рабочий процесс. В основном это будут расширения для Firefox, в Chrome из-за сложившихся обстоятельств проверялось только одно из них. Итак, мы начинаем...
Расширения к Firefox для тестирования сайтов — это все те же популярные расширения, которые мы будем использовать немного по-другому. Отдельных расширений, тонко специализированных на процессе тестирования, по правде, не так уж много.
Bug Magnet
Это расширение для Хрома и Фаерфокса. Изучать, что к чему, пришлось на версии для Хрома. С расширением для Фаерфокса нужно немного поиграться, в маркете его нет.
Позволяет быстро вбивать в поля простые и граничные значения. Есть возможность использовать свой файл конфигурации. Работает на полях для ввода данных, текстовых полях, содержащих редактируемые div’ы. Короче, должно кушать все, куда можно вбивать данные. По идее.
Понимает мультифреймовые страницы, если они в одном и том же домене. Совсем небольшая нагрузка на страницу, работает в пассивном режиме, так что за быстродействие можно не бояться. Да, а еще это open source.
В настройки параметров можно только указать, где лежит ваш конфиг. Какая безграничная щедрость...
С заявленной задачей вбивать в поля выбранные значения расширение справляется. Можно с легкостью вставить латинские, кириллические, арабские и прочие лоремы (даже unicode-символами), имена, и-мейлы, УРЛы и прочее из того, что обычно приходится вбивать руками.
Лоремы — дело понятное. Имена тоже не вызывают вопросов. Помимо набора разной длины на латинице (где, собственно, не только имя-фамилия и поехали, а еще и другие слова и названия, которые, возможно, будут вбиваться в формы для данных, плюс имеется ряд имен с символами, которые используются во французском и прочих языках, буквы с диакритикой, умляуты, апострофы и прочее), есть еще возможность вставлять дефолтные значения на языках, отличных от английского, что пригодится, например, если надо узнать, как отдается контент на другом языке, не слетает ли кодировка.
Ладно, имена можно забивать и с клавиатуры, это не проблема. В конце концов, искусство копипасты с камбоджийских и индонезийских сайтов доступно каждому. В моей практике было немного кейсов, где приходилось изгаляться с иероглифами, большую проблему также составляли математические символы :) . Bug Magnet позволяет вставлять куски текста разной длины, с пробелами или без, от 128 байт до 64 килобайт. Lorem ipsum dolor sit amet никогда не бывает много. Тексты без пробелов, предлагаемые расширением — это набор цифр.
Города. В дефолтном конфиге маловато значений. Сюда вполне можно добавить те поисковые запросы, которые автоматом отдают Гугл-карты, а также разные написания адресов, с номером дома перед улицей или после нее.
Набор правильных и неправильных и-мейлов в дефолтном конфиге порадовал. Честно говоря, я и половину из предлагаемых вариантов не использовал, потому за такую щедрость и фантазию расширению можно ставить жирный плюс.
УРЛы. Опять же, есть валидные, невалидные. Кириллические отсутствуют. В свой кастомный конфиг я добавил бы еще УРЛы на тестовые аккаунты в социалках, поскольку частенько надо еще проверять и их корректное подключение.
Цифры. Стандартно: значения разной длины, с точкой, с запятой, с минусом и тому подобное.
Пробелы и табы. Пригодится, если надо проверить, обрезаются ли пробелы и как формы реагируют на лишние табы в тексте.
Помимо всего вышеперечисленного, можно еще вставлять эксплоиты. В дефолтной конфигурации их немного, но иногда таки нужно проверять, как форма справляется с js-инджекшенами.
Возможно, кому-то и будет достаточно того, что предлагает расширение по умолчанию. Но в жизни всегда есть место для экспериментов. Вот он, дефолтный конфиг.
Например, можно добавить валидные и невалидные номера телефонов (предлагаемых вариантов мне показалось мало). Я охватил не весь список возможных вариантов, но для примера и так сгодится:
{"Phones":{"Valid":["+380673830000","+38 067-383-00-00","+38 067 383-00-00","+38 067 3830000","38067383000","0673830000","(067)3830000","+38(067)3830000","+38 067 383 00 00","+38 067 383 0000","+38 (067) 383 00 00","+38 (067) 383-00-00"],"Invalid":["0","sdfggs","-"," ","11111111111111121222221","-380673830000","+38o673830000","+38/067/383/00/00"]}}
При желании и наличии свободного времени можно, скажем, забить список фикстур-логинов для входа на тестовый сайт или же еще каким-то образом приспособить расширение под себя — тут все зависит от вашей фантазии.
Альтернатива. Если вам нужен просто генератор лоремов, то можно обойтись одним Dummy Lipsum. После установки вызывается из контекстного меню, в настройках выставляются нужные параметры.
Web Developer
Названия этого расширения для Фаерфокса бояться не стоит, мы будем использовать его в своих тестировочных целях. В наличии также расширения для Хрома и Оперы. Разработчики обещали множество гибких инструментов, которые позволят тщательно проверить страницу, вытянуть информацию о стилизации каждого веб-элемента, отключить на странице все, что только можно. Попробуем разобраться.
После установки все, что нам нужно, находится в контекстом меню или в меню .
В меню можно поотключать на отображаемой странице все, что мешает вам жить и тестировать. Можно вывести из игры весь кэш. Также есть возможность установить опцию для отображения закэшированной информации. Например, вам будет показываться только самое свеженькое каждый раз при заходе на страницу. Не нужны Java или JavaScript на странице — убираем. Можно погрузиться в мир нетривиального тестирования, отработав самые разные кейсы, при которых у пользователя не работает или не отображается то одно, то другое.
Присутствует возможность ручного добавления кук, есть отдельное удаление кук разных типов. В меню все это можно делать более осознанно.
Нужно проверить CSS? Для этого тоже есть средства. Поиздеваться над формами — тоже. Например, возникла потребность показывать пароли, а в дизайне кнопки для такого не предусмотрено — плагин поможет. Или же вы хотите быстро заполнить все поля какими-то данными — такое тоже имеется, . Правда, типы полей эта функция, конечно, различает, но данные могут вам не понравиться:
На ряде сайтов протестировать авточек всех чекбоксов не получилось, функция попросту не срабатывала. Но проверить ее таки удалось:
Опять же, если тестировщику в жизни не хватало приключений, в разделе для работы с формами наличествует конвертация методов GET в POST и наоборот.
Бывает ситуация, что мне лень не то что нажимать на F12, мне даже код страницы пролистывать не хочется. А там нагенерили alt’ов для картинок. Господи, что же делать, как же быть? Два клика, ребята, всего два клика. . Вот, теперь зашибись:
Для скрупулезной проверки можно включить отображение ширины и высоты картинок, их размеров и путей к ним. Кроме этого, можно на лету проверить, не завалялось ли на странице битых картинок. У меня для Розетки плохие новости:
С картинками поиграться можно по самое не могу. Вам мешали background-картинки? Не вопрос, спрячьте их. Или же количество картинок на странице такое, что рябит в глазах — можете всех их скрыть, при этом верстка не поедет. К слову, есть опция сделать картинки полноразмерными. можно на лету перегрузить все картинки, не перегружая страницу, или заменить картинки их alt-атрибутами; информация о изображениях также не является секретом и выводится удобным списком.
Раздел . Дает возможность просматривать всю ту информацию, которая касается элементов страницы, того, что не видно сразу, но есть на уровне кода. Тестировщик сможет сразу указать, с каким элементов у него возникли проблемы. Желательно хоть немного разбираться в коде, естественно.
(разное). Несмотря на название раздела, его функционал наверняка будет вам полезен. В можно почистить кэш, историю, HTTP-аутентификацию или все вместе. Хотя я для очисти кэша использую старую-добрую комбинацию клавиш Shift+Ctrl+Delete, но здесь даже этого не надо делать. выведет на страницу скрытые элемента. Срабатывает не везде, но если получилось, то вы увидите, например, всплывающее окно для авторизации, которое обычно вызывается кликом по соответствующей кнопке. На Розетке, например, я получил input value для их блока недавно просмотренных товаров:
Добавление line guides будет полезно для проверки верстки (хотя в расширении FoxGuide они более чем наглядны). Есть также свой аналог увеличительного стекла (который может безбожно тормозить, да и тот же Magnifier имеется), и своя линейка.
У линейки, правда, есть существенный недостаток — она не остается на экране, когда вы переходите на другую вкладку. Панель для ее настроек и вывода начальной и конечной позиций есть, а самой ее нет, приходится снова включать из контекстного меню.
В этом же разделе не обошлось без своего HTML-редактора. Он примитивен, и пользоваться им я не стал бы, при наличии-то аналогов.
«Линеризировать страницу». Ну вот, теперь у вас вся страница отображается аккуратно по вертикали, уходя куда-то глубоко к футеру. Тоже наверняка кому-то пригодится. Таблицы, кстати, остаются нетронутыми, но одна под другой. Я пока с трудом могу представить, как это использовать. Разве что если надо проверить наличие того или иного элемента, а на экране — салат из элементов. Более опытные тестировщики наверняка найдут тысячу и один способ заюзать функцию в своей работе. Буду рад видеть ваши идеи в комментариях.
позволяет отметить все линки как просмотренные или не просмотренные.
(контур или, исходя из контекста, визуальное выделение). С помощью функций из этого раздела можно наглядно выделить те или иные элементы страницы. Например, нам надо знать точки выхода со страницы на другие ресурсы — ; подсветить блочные элементы — ; для устаревших элементов также имеется своя подсветка — ; можно подсветить заголовки — . Также можно подсветить элементы в зависимости от вида их позиционирования (размещения): абсолютные, относительные, фиксированные.
. Во-первых, с помощью функций из этого раздела можно визуально отобразить видимый и реальный размер окна как отдельной панелькой, так и в title страницы.
Во-вторых, есть также ручное изменение размера окна, но сейчас для этого есть и более удобные способы.
В опциях, кстати, можно повесить ресайзы в нужные размеры на «горячие» клавиши.
А теперь король меню ресайза — просмотр адаптивной верстки на одной вкладке под экраны разных размеров, или .
Будет полезно не только тестировщикам, но и верстальщикам (чтоб проверить, не забыл ли чего), и заказчикам. Просматривать страницу можно в отдельных блоках под разные размеры экрана, остальные блоки никуда не денутся. Правда, может немного тормозить (у меня, например, лаг при возврате на закладку с набором экранов был ну ооочень долгим), но эта функция все равно сэкономит вам время.
В разделе находятся валидаторы CSS, RSS-ленты, HTML, УРЛов и прочего. Естественно, используются веб-сервисы от старого-доброго https://www.w3.org/, парочка валидаторов от https://www.cynthiasays.com/ (правда, из контекстного меню они не работали, потому проще напрямую туда постучаться). Валидаторы также можно повесить на «горячие» клавиши, если проверка с их помощью является для вас ежедневной рутиной.
Есть у расширения и своя отдельная консоль ошибок, но, как и случае с HTML-редактором, существуют ее более продвинутые аналоги в других расширениях. Она еще и выводится отдельным окном… Я уже не говорю о просмотре кода страницы и кода отдельных фреймов, которые также не обделены вниманием со стороны создателей других расширений.
В целом, Web Developer тестировщику надо ставить. Оно пускай и перегружено, но чнаверняка будет вас выручать. А еще частенько забываешь что-то проверить, какую-то, казалось бы, незначительную мелочь, и список функций этого расширения может послужить отправной точкой для дополнения списка тест-кейсов.
И про аналоги.
Для линейки, встроенной в это расширение, конечно же, есть аналоги… в виде отдельных расширений. Например, MeasureIt.
Вот так простенько. Если нужна самая обычная линейка — ставьте, не пожалеете.
Для блокировки скриптов, если уж возникла в этом необходимость, можно использовать расширение NoScript. Не дает жизни JavaScript, Java, Flash и другому активному контенту. Практически для тех же целей подходит QuickJava. Отключать можно все по отдельности, достаточно вынести нужные кнопки на панель инструментов.
В качестве тулзы для валидации кода можно использовать HTML Validator. Есть несколько алгоритмов на выбор, результаты валидации выдаются вместе с подсказками.
iMacros
Расширение для повторяющихся задач. Скачать можно отсюда.
Как обещают его разработчики,
Whatever you do with Firefox, iMacros can automate it.
Да, для более тщательного тестирования больше подойдет Selenium, но ежедневную рутину iMacros способен автоматизировать. Или нет? Сейчас посмотрим, что умеет эта «автоматизация для бедных».
Итак, с помощью расширения мы можем записывать свои действия на странице, сохранять их последовательность в файл, редактировать его и воспроизводить. Раз за разом. День за днем. Помимо этого, iMacros еще и пароли сохраняет, со 256-битным шифрованием. Обязательно ознакомьтесь с Вики.
К примеру, iMacros используют для логина в почтовые ящики, которые находятся на разных почтовых сервисах. Но я не искал легких путей и попробовал кое-что другое: просмотр элементов главной страницы, переход в блог, возврат обратно, авторизацию, заливку и редактирование фото в галерею, просмотр галереи и добавление фото в корзину.
Получилось довольно сумбурное воспроизведение. iMacros не понял, как закрывать всплывающие окна, не понял, как прокручивать баннеры в слайдере, что делать при нажатии кнопки «Назад» на панели инструментов браузера. За последнее я его не виню.
Я решил немного упростить задачу, убрал переход в блог, убрал нажатие «Назад».
Код выглядел примерно так:
VERSION BUILD=8920312 RECORDER=FX TAB T=1 URL GOTO=https://***************** TAG POS=1 TYPE=DIV ATTR=TXT:Sign<SP>in<SP>Remember<SP>me<SP>Lost<SP>Password?<SP>Sign* SET !ENCRYPTION NO TAG POS=1 TYPE=INPUT:PASSWORD FORM=ACTION:/login_check ATTR=ID:password CONTENT=***************** TAG POS=1 TYPE=INPUT:EMAIL FORM=ACTION:/login_check ATTR=ID:username CONTENT=***************** TAG POS=1 TYPE=BUTTON FORM=ACTION:/login_check ATTR=ID:_submit TAG POS=1 TYPE=INPUT:FILE ATTR=ID:fileupload CONTENT=D:\!Work\IMG_2659.JPG TAG POS=1 TYPE=A ATTR=TXT:Done TAG POS=1 TYPE=SPAN ATTR=TXT:Select... TAG POS=1 TYPE=A ATTR=TXT:Unpublished TAG POS=1 TYPE=BUTTON ATTR=TXT:Edit TAG POS=1 TYPE=A ATTR=TXT:30 TAG POS=1 TYPE=INS ATTR=CLASS:iCheck-helper&&TXT: TAG POS=1 TYPE=BUTTON ATTR=TXT:Save<SP>changes TAG POS=1 TYPE=BUTTON ATTR=TXT:Publish TAG POS=1 TYPE=I ATTR=CLASS:icon<SP>icon-close<SP>js-close-notify&&TXT: TAG POS=1 TYPE=LI ATTR=TXT:Settings<SP>Account<SP>info<SP>Notifications<SP>Billing<SP>h* TAG POS=2 TYPE=A ATTR=TXT:Account<SP>info TAG POS=1 TYPE=A ATTR=TXT:Open<SP>in<SP>new<SP>window
Воспроизведение застопорилось на заливке фото.
Подходит для функционального и регрессивного тестирования, тестирования производительности, но только для рутины, прокликивания одинаковых форм с использованием разных данных для полей, например. Пару-тройку заданий для этого расширения я точно найду.
FireShot
Расширение для Огнелиса, позволяющее делать скриншоты. Что ж, если по религиозным или еще каким-то причинам вы считаете Monosnap, Joxy и Пейнт ;) недостойными вашего внимания, то попробуйте FireShot. В конце концов, это же не отдельный многомегабайтный софт ставить...
Создатели сего расширения дают вам вдоволь насладиться бесплатной lite-версией, но это не мешает им напоминать о платном pro-варианте, который даже можно поюзать на протяжении 30-дневного триала, не заплатив ни копейки.
Очень полезная штука — снимок всей страницы, Shift+Ctrl+Alt+Z. Нужно сделать пометки сразу в нескольких местах на странице, а они разнесены по всей высоте? Не беда, теперь можно обойтись 1-м скрином. Правда, есть и альтернативные способы для этого, но тут ведь у нас редактор, все удобства.
Напрягает при этом тот факт, что вызвав на экран редактор, мы теперь не можем работать с браузером, он попросту становится неактивным. «Вот закроешь редактор, тогда и продолжай работать», как бы говорят нам создатели.
Следующий плюс — возможность заливки скринов на популярные сервисы и сайты, вплоть до социалок. Можно указать ссылки и на кастомные хранилища. Не забыта опция отправки картинки в сторонние приложения.
Сохранять скрины можно в стандартных форматах, плюс есть возможность сделать из них pdf-файл. Правда, для мультистраничного pdf придется купить pro-версию.
Выделение областей скриншота и аннотации в целом выглядят и работают на отлично. Можно заблюривать определенные участки скрина, если он будет доступен широкой общественности, а на нем мелькают конфиденциальные данные.
Если и этого мало, есть опция подсветки выделенной области, инвертирование ее цветов и тому подобное.
Установив это расширение, вы на борту своего Фаерфокса получите даже не тулзу для создания скриншотов, а небольшой, но вполне функциональный графический редактор. Правда, боюсь, вы потратите больше времени на всяческие украшательства скриншотов, чем непосредственно саму работу. Ведь что нужно тестировщику? Сделать скрин, пометить на нем, где проблема, и залить в репорт на багтрекере.
Я пока что и сам не знаю, буду ли использовать FireShot в работе. Потенциал у него есть, время от времени добавляются новые фичи, но я слишком привык к Monosnap, который уже и видео с места возникновения бага писать может, и лить это видео на YouTube научен (да и в целом его клиент — программа полезная). В любом случае, попробуйте FireShot, он неплох.
И немного аналогов.
Можно попробовать Screengrab, если вы не гонитесь за тоннами функционала. с задачей сохранить страницу как картинку это расширение справляется. Ловить может как видимую часть окна,так и всю страницу целиком или выделенный фрагмент. Или Take Screenshots, Screen Grab with Online Upload, который заливает скриншоты на ImageBam.
Open With
Напоследок, коротко об Open With. Расширение позволяет открыть текущую страницу в другом браузере, установленном на вашей машине.
Удобно, не надо каждый раз копировать УРЛ. Есть аналог исключительно для любителей открывать в Опере.
Надеюсь, в вашей работе этот обзор расширений к браузеру для тестирования сайта окажется полезен. Я не рассматривал расширения к Chrome для тестирования только потому, что мой основной инструмент — это Огнелис :).
