Чем браузерные расширения могут помочь в тестировании? А какие именно? И все ли они безопасны? Весной на нашей конференции Heisenbug об этом всём рассказывали Юлия Атлыгина и Татьяна Дроздова. А теперь, пока готовится следующий осенний Heisenbug, публикуем на Хабре текстовую версию их доклада.
Оглавление
Немного о себе
Юлия: Работаю QA-архитектором и обучаю тестировщиков в LevelUp и QAla.school. В тестировании больше 14 лет, последние годы работаю с продуктами из экосистемы Atlassian. Если у вас есть вопросы про Jira или плагины к ней — обращайтесь!
А ещё я фанат инструментов и упрощений работы тестировщика. На предыдущих Heisenbug я рассказывала про инструменты тестировщика (примечание редактора: на Хабре есть текстовая версия), инструменты тест-менеджмента и техники тест-дизайна.
Татьяна: Мы с вами знакомы с прошлого Heisenbug (примечание редактора: тот доклад «Браузерные инструменты» мы тоже расшифровывали). Сейчас я занимаюсь автоматизацией тестирования в Ozon Fintech, а до этого была лидом тестирования веб-сервисов в онлайн-кинотеатре START. В свободное от работы время веду канал Short QA ideas.
Терминология
Начнём с того, что определимся с понятиями. Когда говорят о браузерных расширениях, используют термины «расширения», «плагины» и «аддоны». Давайте разберемся, чем же они отличаются.
Помните, как выглядели плагины лет десять назад, когда нас всё время просили установить Adobe Flash Player?
В докладе речь пойдет именно о браузерных расширениях. Но так ли нам важно разбираться в этой терминологии? Если честно, нет. Все до сих пор называют браузерные расширения и плагинами, и аддонами. Путаница есть даже в официальной документации браузеров.
С браузерными расширениями что-то не так?
Давайте разберемся с «за» и «против» браузерных расширений.
За:
Они точно ускоряют и упрощают мануальное тестирование.
О них много информации. И на курсах, и в мануалах, и в обзорах на YouTube — про них рассказывают везде.
Против:
Браузерные расширения часто оказываются небезопасными. Например, собирают информацию о вашей активности и используются для кражи данных.
Браузерные расширения сложно контролировать. Мало какая политика информационной безопасности покрывает этот вопрос.
Также есть несколько довольно сомнительных моментов:
Браузерных расширений только в Chrome более 176 тысяч. Из них примерно 10 тысяч — DevTools. Очевидно, что не все из них хорошо контролируются и поддерживаются, а найти из такого множества нужное ещё сложнее.
Опытные инженеры и автоматизаторы редко пользуются браузерными расширениями.
Зачем браузерные расширения тестировщику?
Мы провели пару опросов в каналах конференции Heisenbug и Short QA ideas и получили следующие результаты:
Во-первых, браузерные расширения используют большинство! На вопрос «используете ли вы браузерные расширения?» 60% ответили утвердительно:
Мы также хотели проверить свои гипотезы и узнать, для чего браузерные расширения используются чаще всего. И тут победителями стали варианты «adblock», тестирование верстки и генерация тестовых данных.
«Я почему раньше браузерными расширениями не пользовался?..», или А какие браузерные расширения вообще есть?
Давайте начнём с того, для решения каких повседневных задач могут пригодиться браузерные расширения.
Скриншоты и скринкасты
Самая частая опция. Для этой цели есть много расширений, которые круче, чем встроенные инструменты, например:
Тестирование верстки
Есть огромное количество и кроссбраузерных инструментов, и для тестирования CSS, и для шрифтов, и для Pixel Perfect:
Тестирование SEO
Здесь есть как мультитулы, так и инструменты, созданные специально для тестирования различных аспектов SEO, в частности:
Филлеры форм и генераторы тестовых данных
Bug Magnet (самый известный)
Тестирование API
Эти расширения заменяют хедеры, ответы на запросы, сами запросы, их параметры, троттлят и т. д. В их числе:
Давайте немного подробнее остановимся на ModResponse. По функциональности он близок к снифферам, но доступен прямо из браузера. Его просто включить и настроить, чтобы у вас под рукой были такие функции, как симуляция задержки ответа и ошибок соединения, перенаправление запросов, подмена ответов — сами настройки интуитивно понятны. И это только часть того, что он умеет. Обязательно прочитайте подробнее про этот инструмент.
Тестирование безопасности
Здесь хотелось бы остановиться на Eval Villain, доступном для FireFox. Eval Villain позволяет обнаруживать DOM XSS-уязвимости и скрытые get-параметры запросов, подсвечивая их прямо в консоли.
Часть тестовой среды
Пользователи тестируемых нами продуктов тоже нередко прибегают к помощи браузерных расширений, например, таких как AdBlock и VPN. В таких ситуациях мы используем расширения для воссоздания тестовой среды. Из неочевидных в данном разделе можно назвать:
Вспомогательные инструменты
Есть множество браузерных расширений, которые просто делают нашу работу немного проще и приятнее.
Здесь важно не перестараться: перед использованием браузерного расширения задумайтесь, действительно ли оно вам нужно? Или его функциональность уже есть у встроенных инструментов — браузера или операционной системы?
Отличными помощниками тестировщика при решении скучных повторяющихся задач могут стать:
Поговорим подробнее про XML Tree. Благодаря этому расширению вы сможете просматривать XML-файлы прямо в браузере в читабельном формате и с подсветкой синтаксиса.
А MindPane за считанные секунды отрисует майнд-карту вашего веб-приложения. Её можно будет выгрузить и использовать в помощь при составлении тестовых сценариев.
«Адмирал Иван Федорович Крузенштерн — человек и пароход!», или Расширения-тулкиты
Lighthouse
Первое расширение, про которое хочется рассказать — Lighthouse. Он родился из Google PageSpeed: сначала был сервисом, потом стал и отдельным плагином. Почему мы называем его тулкитом?
Позволяет получать множество метрик: это не только про перформанс
Может показать, насколько хорошо ваше приложение будет отображаться на разных устройствах
Анализирует SEO и accessibility и может показать, насколько ваше веб-приложение соответствует стандартам индустрии
Для Lighthouse есть дополнительные сервисы. Например, вы можете загрузить и сравнить несколько отчетов, сделанных в плагине, таким образом проводя регрессионное перформанс-тестирование.
Lighthouse — больше, чем просто плагин. Вы наверняка видели такую вкладку в DevTools прямо в панели разработчика (и Google-разработчики советуют использовать именно панель, а не плагин). Но и это не всё! Его можно запускать и через cmd, и подключать как Node-модуль.
Web Developer
Обычно про Web Developer говорят в разрезе тестирования форм, когда вы можете заменить выпадающий список на текстовое поле и ввести что-то, чего не ожидает сервер. Но на самом деле здесь много функций на любой вкус и цвет! Он может показать скрытые детали формы, позволяет быстро работать с cookies и временными файлами, менять HTTP-методы и прочее.
Однажды этот плагин помог нам найти очень интересную проблему. На странице регистрации была капча, мы как раз проводили исследовательское тестирование, и раз уж в Web Developer это всего одна кнопка, то решили посмотреть, что будет, если отключить картинки. Итог: в текстовое поле, куда нужно вводить данные с капчи, можно было вводить всё что угодно. У нас не было никакой проверки на этот текст, если картинки капчи нет. Достаточно стыдная история, но это хороший пример, как Web Developer помог найти проблему в безопасности приложения.
Wappalyzer
Если вы не знакомы с Wappalyzer — он известен как продукт для тестирования безопасности. Но на самом деле, он часто используется маркетологами, чтобы узнать, чем пользуются клиенты.
В современных продуктах мы используем очень много библиотек, в которых есть уязвимости. Но находим эти уязвимости не только мы, поэтому стоит следить за версиями и вовремя их обновлять. Wappalyzer показывает, какие именно технологии используются на странице — от операционной системы до конкретных библиотек.
Как использовать: если вы видели в новостях или еще откуда-то знаете, что есть уязвимые версии библиотек — проверьте версии в вашем продукте. Ну, и можно в продуктах конкурентов :)
И неожиданное использование: вы можете помочь себе с карьерой. В списке можно нажать на любой инструмент и посмотреть, насколько он популярен: как часто используется, есть ли на него тренд и даже в каких странах его больше используют.
Checkbot
Изначальная идея Checkbot — анализ SEO, но он умеет гораздо больше. Вы можете оценить и перформанс, и безопасность. Например, как быстро кэшируются данные, насколько ваше приложение подвержено XSS или насколько вы обходите mixed content.
«У него там такой кот есть, до которого тебе расти и расти», или Вспомним мастодонтов
Первое, что мне приходит в голову — Firebug. Он появился в 2006 году как отдельный плагин для FireFox. Но дальше появлялось всё больше встроенных средств браузера, и многие черпали вдохновение из Firebug, до сих пор его имя частенько используется как нарицательное для DevTools. С 2014 года он перестал поддерживаться, но мы всё ещё ему благодарны.
Если такие легенды уходят, значит, это может случиться с любым! Что делать, если ваш любимчик перестал поддерживаться?
Самое первое — поискать аналоги в сторах (да, есть сторы даже у Opera и Edge!). Пример неплохого продукта для генерации локаторов — POM Builder, у которого есть версии не только для Chrome, но и для Edge.
Еще один вариант для поиска замены — GitHub.
А если вы занимаетесь мобильным тестированием, то плагины есть и для мобильных браузеров. Чтобы поставить плагин в ваш Safari, пройдите в Settings -> Safari -> Extentions. Зашли? Давайте пройдёмся по самым интересным.
Hyperweb
Этот инструмент помогает работать с cookies, CSS, скриптами. Не нужно больше переключаться в веб, всё это можно сделать прямо с телефона!
Web Inspector
Это целая девелоперская консоль внутри вашего телефона. Настоящая браузерная консоль прямо в вашем мобильном! Можно посмотреть ошибки, инспектировать элементы, проверить запросы прямо с мобильного устройства.
Auto Clicker
А если вы устали постоянно делать однотипные клики и скроллы, то есть вариант простого инструмента и для этого сценария.
«Хорошая собака еще никому не помешала», или Набор на каждый день
Я бы хотела подсветить своих любимчиков, расширения, которые сильно упрощают ежедневную работу.
BrowserStack
Если вы используете BrowserStack для кроссбраузерного тестирования, обязательно присмотритесь к этому расширению. Плагин позволяет вам выбрать из списка поддерживаемых браузеров и устройств, на чём именно посмотреть страницу, меняя окружение «на лету».
Про следующие расширения я уже рассказывала на предыдущих докладах, но не устану повторять. Если из всей этой статьи вы можете установить только парочку плагинов, начните с них:
Exploratory Testing Chrome Extension
Это расширение поможет оставлять заметки во время exploratory-тестирования и вести весь ваш лог. Оставляйте заметки, скриншоты, вопросы и прочие находки, тем самым создавая автоматический отчет о вашем исследовательском тесте.
Bug magnet
Содержит встроенные наборы тестовых данных практически для любой ситуации. А если и их не хватает, есть возможность добавить свои собственные.
«Вот до чего бывают люди до чужого добра жадные», или Осторожно: браузерные расширения!
Известно немалое число случаев, когда браузерные расширения оказывались опасными: перенаправляли на фишинговые сайты, собирали личные данные и данные о браузерной активности пользователей, использовались для кражи данных банковских карт. Кроме того, когда-то безопасное расширение может перестать быть таковым – например, вследствие его перепродажи и последующего обновления.
Однако же, не всё так беспросветно — если соблюдать несложные меры предосторожности, можно существенно снизить вероятность неблагоприятных последствий использования браузерных расширений.
Итак, как же сделать браузерные расширения безопаснее?
До установки расширения стоит обратить внимание на следующие моменты:
Источник расширения (стор, публичный репозиторий, самописное)
Разработчик
Маркировка расширения стором
Меры по обеспечению конфиденциальности
Количество пользователей, отзывы и т. д.
Обращайте внимание на эти метки:
И на конкретном примере:
Дальше стоит проанализировать разрешения, которых требует расширение. В их числе могут быть:
Доступ к вашим данным для веб-сайтов
Чтение и изменение закладок
Чтение и изменение настроек браузера
Очистка недавней истории просмотра и связанных с ней данных
Получение данных из буфера обмена, помещение данных в буфер обмена
Разрешение DevTools получать доступ к вашим данным в открытых вкладках
Загрузка файлов, чтение и изменение истории загрузок браузера
Открытие файлов, загруженных на ваш компьютер
Чтение текста во всех открытых вкладках
Доступ к вашему местоположению
Удивительно, но в этом списке — меньше, чем треть групп разрешений, которые может затребовать браузерное расширение. При этом каждая группа включает в себя много более узких видов разрешений. С более или менее полным списком возможных разрешений можно ознакомиться по ссылке.
Но не всё так страшно – ведь некоторыми из аспектов безопасности браузерных расширений мы можем управлять:
1. Обновления расширения. Обращайте внимание, не предвыбрано ли автоматическое обновление расширения. Именно неконтролируемое обновление расширений часто влекло за собой появление уязвимостей.
2. Доступ к доменам. Вы можете сузить список сайтов, доступ к которым выдается браузерному расширению, до конкретных доменов.
3. Режим инкогнито. По умолчанию браузерные расширения не работают в режиме инкогнито. Есть возможность изменить данную настройку, но, возможно, не стоит.
Если вы всё же заподозрили что-то подозрительное, то отключите браузерное расширение, удалите его и, пожалуйста, сообщите о нарушении. И важный момент: если вы не используете браузерное расширение, лучше удалите его.
«На дворе конец XX века, а у нас в доме одна пара валенок на двоих», или Автоматизируй это немедленно!
Пройдемся по основным категориям браузерных расширений, которые используются для автоматизации тестирования.
Рекордеры
Ghost Inspector — необычный рекордер. Он собирает записанные тесты, хранит историю прогонов, размечает упавшие и успешно прошедшие тесты, позволяет гибко выбирать локаторы — выглядит очень круто и серьёзно. Он платный, но есть триальный период.
Тестирование скриншотами
Для этой цели вы можете воспользоваться инструментом LambdaTest. Он пройдётся по выбранному вами списку тестовых окружений и сам сделает скриншоты или запишет видео. Тоже платный.
Генераторы локаторов
На скрине — пример из реального обзора генератора локаторов из стора.
Но признаю, что не всё так плохо. Например, есть SelectorsHub, у которого есть суперкрутая платная версия. Но у генераторов локаторов по-прежнему есть свои минусы:
не умеют в логические операторы в XPath;
не умеют в переход по DOM-дереву вверх (частично есть в платном SelectorsHub);
не отличают динамический атрибут от постоянного (частично есть в платном SelectorsHub).
Расширения для Recorder Chrome DevTools
Chrome постоянно развивает свой рекордер, о котором я уже немного рассказывала в своём прошлом докладе. Браузерные расширения для экспорта сгенерированных рекордером скриптов для CodeceptJS, Cypress, Nightwatch, Owloops, Testing Library, WebdriverIO, WebPageTest появились относительно давно, а вот со 112-й версии Chrome стали доступны и браузерные расширения для их воспроизведения. То есть необходимость в конвертации скриптов под любимый фреймворк полностью отпала.
«Это не техника дошла, это я сама сюда дошла», или А если нужное браузерное расширение ещё не изобрели?
Часто бывает, что есть проблема, а браузерного расширения для её решения ещё нет. Что же делать в этом случае?
Нулевой шаг: а вам точно нужно именно браузерное расширение? Если да, то есть как минимум два варианта: можно доработать существующее опенсорсное решение или написать своё браузерное расширение. Случаев, когда нужно писать своё, может быть много, например:
Авторизация под тестовыми учётками, на тестовых окружениях
Предзаполнение кастомных форм
Генерация специфических тестовых данных
Сбор и сохранение данных (например, об ошибках из консоли)
Автоматизация работы с кастомными инструментами
Бонус: возможность попрактиковать JS.
Решено: пилим своё браузерное расширение. С чего начать?
Существует очень много информации и примеров кода для написания своего браузерного расширения, в частности:
Chrome: Getting Started Guides (туториал с примерами)
Firefox: Your first extension, Creating browser experiences for Android apps
Safari: Add, build, and enable a Safari app extension (без App Store)
Конечно, не хочется писать браузерное расширение под каждый браузер. Для этого существует web-extension-starter, он поможет написать браузерное расширение под целую группу браузеров, кроме Safari. Но и под него тоже можно будет сконвертировать.
Вы спросите у меня, писала ли я своё браузерное расширение хоть раз? Нет :) Но при этом ежедневно пользуюсь самописным расширением от моего коллеги.
На картинке — до боли знакомый скрин из Allure с отчётом о падении теста. Если что-то пошло не так, наше браузерное расширение позволяет собрать ключевую информацию и ссылки из отчёта в сообщение по тесту, чтобы без лишней траты времени поделиться им с коллегами.
Мы же в XXI веке — теперь браузерные расширения можно писать не самим, а с помощью ChatGPT. Вот так может выглядеть для него ТЗ:
А вот здесь полезные ссылки на тему привлечения ChatGPT к созданию браузерных расширений:
«Был бы у меня такой же кот, я б, может, и не женился никогда», или Наш топ браузерных расширений
И приведем еще результаты нашего опроса участников каналов Heisenbug и Short QA ideas. Топ-3 самых любимых расширений выглядит вот так:
На 3-м месте — Postman Interceptor. Этот плагин позволяет перехватывать запросы, чтобы использовать их в Postman.
На 2-м месте — Bug Magnet. Мы уже говорили про него, в нём есть готовые тестовые данные, с его помощью можно тестировать практически любые формы ввода данных.
На 1-м месте нашего хит-парада — Fake Filler. Он заполняет поля рандомными данными, умеет игнорировать капчи, поддерживает регулярные выражения. идеален, если нужно быстро заполнить форму чем угодно (не забудьте поделиться им со своими коллегами из команды разработки и дизайна!).
«До свидания, ваш сын — дядя Шарик», или Перейдем к выводам
Инструменты рядом, ближе, чем вы думаете!
И в браузере, и в GitHub, и даже в телефоне.
Инструменты нужны, чтобы работу упрощать.
Будьте осторожны с выбором и не забывайте удалять ненужное.
Если инструмент не отмечен как «для тестировщиков», он всё равно может вам подойти.
Например, инструменты для SEO и разработки.
Обратите особенное внимание на инструменты-тулкиты.
Иногда достаточно всего одного инструмента, чтобы покрыть половину рабочих задач.
Даже самому прекрасному инструменту нужен человек, который его выберет!
«Дядя Федор, а у тебя только один бутерброд неправильный был?», или У нас для вас есть посылка с полезностями
Building Browser Extensions: Create Modern Extensions for Chrome, Safari, Firefox, and Edge
8 Useful Firefox Extensions For Ethical Hacking and Security Research
Чек-лист «Браузерные расширения: инструкции по поиску и разумному использованию»
А по этим ссылкам вы найдёте наши контакты:
Спасибо за внимание!
Если вам интересны инструменты, помогающие тестировщикам, обратите внимание на следующую конференцию Heisenbug, которая пройдёт онлайн 10 и 11 октября, а 15 и 16 октября — в Санкт-Петербурге.
А если круг интересов не ограничивается тестированием, посмотрите список всех конференций осеннего сезона.
