Давно испытывал необходимость в нормальных расширениях для Google Chrome, которые действительно помогают в работе. Когда Google начал сворачивать поддержку Manifest V2, многие привычные инструменты оказались за бортом. И самое интересное: производители некоторых расширений, которыми я пользовался годами, похоже, не особо торопятся адаптировать их под новые требования. А иногда проекты просто перестают развиваться. Но работа на этом не должна заканчиваться из-за прихоти больших корпораций. Хорошо, что у нас теперь есть искусственный интеллект. Всю предыдущую неделю я экспериментировал с DeepSeek Harness, изучал возможности инструмента и проверял, насколько далеко можно зайти с его помощью в реальной разработке. На счету оставалось шесть юаней бонусного баланса. Решил не тратить их на очередные разговоры о прекрасном будущем, а попробовать создать именно то расширение, которого мне самому не хватало в работе.

Так появился Odesoftami QA Monitor. Это расширение для Google Chrome, которое помогает контролировать работу сайтов, отслеживать изменения страниц, проверять текст и DOM-элементы, фиксировать доступные HTTP-статусы и собирать результаты QA-сессий. Мне оно нужно для повседневной работы с сайтами и тестирования. Возможно, пригодится и вам. Здесь нет идеи построить очередную корпорацию с миллиардными инвестициями и презентацией на 150 слайдов. Есть конкретная задача, рабочий инструмент и желание сделать его полезным. Проект развивается, функциональность проверяется, а исходный код доступен на GitHub. Odesoftami QA Monitor — инструмент, который я создал для себя и которым делюсь с другими. Исходный код Odesoftami QA Monitor на GitHub ( https://github.com/odesoftami/Odesoftami-QA-Monitor-Chrome-Extension )

Почему именно расширение для браузера?

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

Зачем нужен QA Monitor

При тестировании сайта недостаточно открыть страницу и убедиться, что она выглядит нормально. Ошибки могут возникать периодически, отдельные элементы интерфейса могут исчезать после обновления, а редиректы и изменения URL — нарушать пользовательские сценарии.

Например, после публикации новой версии сайта необходимо убедиться, что:

1. основные страницы продолжают открываться;
2. сервер возвращает ожидаемые HTTP-статусы;
3. пользователя не перенаправляет на неправильный адрес;
4. необходимые элементы интерфейса присутствуют;
5. важный текст отображается на странице;
6. время загрузки не выходит за приемлемые для проекта пределы;
7. динамические изменения страницы не приводят к нарушению проверяемого сценария.

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

Кому подойдёт расширение

Manual QA и тестировщикам

Расширение помогает выполнять повторяемые проверки без необходимости каждый раз вручную обновлять страницу и записывать результаты. Можно проверить наличие элемента, отслеживать текст, контролировать изменения URL, анализировать доступные HTTP-статусы и сохранять результаты тестирования. QA Monitor дополняет ручное тестирование, но не заменяет полноценные тест-кейсы, DevTools или автоматизированные тесты.

Разработчикам

После изменения кода удобно проверить, сохранилась ли ожидаемая структура интерфейса и не появилась ли ошибка при переходе между страницами. Например, можно наблюдать за элементом с определённым CSS-селектором, проверять ожидаемый текст или отслеживать переходы на другие URL.

Владельцам сайтов и веб-мастерам

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

Специалистам по SEO и техническому аудиту

QA Monitor может использоваться как дополнительный инструмент при проверке:

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

При этом расширение не заменяет полноценный SEO-аудит, сканирование сайта или проверку всех внутренних ссылок. Оно наблюдает за основной навигацией выбранной вкладки, а не собирает полный список сетевых запросов сайта.

Какие данные собирает Odesoftami QA Monitor

Главная задача инструмента — не просто обновлять страницу, а фиксировать результаты проверок в структурированном виде.

1. HTTP-статусы и ошибки навигации

Расширение фиксирует HTTP-статус основного документа, если Chrome предоставляет эту информацию. Это позволяет обнаруживать ситуации, когда страница возвращает:

• 200 OK  — успешный HTTP-ответ;
• 301 или `302` — серверное перенаправление, если статус доступен;
• 403 Forbidden` — отказ в доступе;
• 404 Not Found` — страница не найдена;
• 500 Internal Server Error` — внутренняя ошибка сервера.

Также могут фиксироваться сетевые ошибки и адрес назначения редиректа. Это расширение наблюдает только за навигацией основного документа. Оно не анализирует HTTP-статусы всех изображений, CSS-файлов, JavaScript-ресурсов, запросов `fetch` и XHR. Если Chrome не предоставляет статус, результат обозначается как `UNKNOWN`, а не подменяется предположительным значением 200

2. Время загрузки страницы

QA Monitor использует Navigation Timing API для измерения временных характеристик навигации. В зависимости от доступных данных можно получить:

• продолжительность навигации;
• время до события `DOMContentLoaded`;
• время до события `load`.

Эти показатели помогают сравнивать поведение страницы в разных сессиях и замечать существенные изменения. Однако это не полноценный анализ производительности. Показатели не являются временем ответа сервера или TTFB и не заменяют Lighthouse, Web Vitals либо специализированные инструменты профилирования.

3. Изменения текста

Расширение позволяет проверять текстовое содержимое страницы и отслеживать его изменения. В зависимости от настройки можно контролировать:

• появление определённого текста;
• исчезновение текста, присутствовавшего в исходном состоянии;
• изменение текста страницы;
• соответствие текста заданному условию;
• совпадение с регулярным выражением.

Например, тестировщик может отслеживать появление сообщения об успешном сохранении, подтверждения операции или уведомления об ошибке. Можно использовать и более прикладной сценарий: после деплоя проверять, появился ли на странице новый текстовый блок. При этом мониторинг текста относится к верхнеуровневому документу. Содержимое изображений, PDF, canvas и недоступных iframe не анализируется.

4. HTML-элементы через CSS-селекторы

Встроенный DOM watcher позволяет следить за одним элементом, выбранным с помощью CSS-селектора.

Доступны проверки:

• появления элемента;
• изменения его текста;
• соответствия текста заданному условию.

Например, можно отслеживать:

• checkout-success` — сообщение об успешном оформлении заказа;
• login-form` — форму авторизации;
• product-price` — блок с ценой товара;
• error-message` — сообщение об ошибке.

Это примеры селекторов, а не встроенные проверки расширения: пользователь должен выбрать нужный селектор и настроить соответствующее условие. Если сайт изменит HTML-структуру и нужный элемент перестанет находиться, проверка сможет зафиксировать проблему. DOM watcher работает с одним селектором за сессию и не является полноценным DOM-анализатором. Он не обходит iframe и shadow DOM.

5. Изменения URL и редиректы

Расширение может отслеживать URL основной страницы и обнаруживать неожиданные переходы.

Это полезно для проверки:

• редиректов после авторизации;
• переходов после отправки формы;
• перенаправлений на страницы ошибок;
• изменений адреса при работе SPA;
• переходов на неожиданные маршруты.

Для SPA предусмотрена периодическая проверка URL, поэтому изменение может обнаруживаться с задержкой примерно до секунды. Cерверные редиректы и клиентские переходы обрабатываются по-разному: не каждый переход через JavaScript будет иметь отдельный HTTP-статус редиректа.

6. История QA-сессий и результаты проверок

Каждая сессия формирует историю событий. Для результатов используются четыре статуса:

| Статус | Значение |
|—|—|
| `PASS` | Проверка пройдена |
| `FAIL` | Проверка обнаружила несоответствие или ошибку |
| `WARN` | Предупреждение, незавершённая проверка или ситуация, требующая внимания |
| `UNKNOWN` | Недостаточно данных для достоверного результата |

В зависимости от типа события история может содержать:

• дату и время;
• тип проверки;
•  URL;
• ожидаемое и фактическое значения;
• HTTP-статус, если он доступен;
• длительность загрузки;
• описание причины результата;
• дополнительные технические сведения.

В Dashboard можно просматривать историю, сводную статистику, количество результатов разных типов, продолжительность сессии и доступные показатели загрузки. Результаты экспортируются в CSV, HTML и JSON. Это позволяет сохранять отчёты для последующего анализа или прикладывать их к задачам в системе управления разработкой.

7. Скриншоты

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

Три режима работы

В версии 3.2.0 предусмотрено три режима.

1. Refresh — автоматическое обновление. Этот режим предназначен для повторной загрузки страницы по расписанию. Можно настроить интервал обновления, использовать циклические сценарии и запускать или останавливать сессию. Интервал обновления поддерживается от 2 секунд до 24 часов. Режим подходит для проверки поведения страницы после повторных загрузок и наблюдения за доступными событиями навигации.
2. Monitor — наблюдение без перезагрузки. В этом режиме страница остаётся открытой, а расширение выполняет настроенные проверки.  Можно отслеживать текст, DOM-элемент, URL, HTTP-статусы основной навигации и показатели загрузки. Это удобный вариант для динамических страниц, когда необходимо наблюдать за изменениями интерфейса без постоянных перезагрузок.
3. QA Session — полноценная записываемая сессия. Этот режим объединяет проверки и сбор истории результатов.  Можно настроить текстовые условия, DOM watcher, проверки URL и навигации, а также при необходимости включить автоматическое обновление страницы. Перезагрузка в QA Session является опциональной. Если её отключить, проверки продолжат выполняться без автоматических обновлений. Результаты можно просматривать в плавающей QA-панели и Dashboard, а по завершении — экспортировать отчёт.

Как установить Odesoftami QA Monitor

Так как в данный момент происходит добавление приложения в Chrome Web Store ( https://chromewebstore.google.com/detail/noldjkigakdpdgpjoknenjcjgiilccmh ) у вас нет возможности его установить от туда. Соответственно можно сделать руками и по старинке. Для установки потребуется Google Chrome версии 120 или новее. На момент подготовки этой статьи проект содержит исходный код и готовую сборку версии 3.2.0.

Шаг 1. Откройте GitHub

Перейдите в репозиторий проекта: ( https://github.com/odesoftami/Odesoftami-QA-Monitor-Chrome-Extension ) Найдите репозиторий Odesoftami QA Monitor и ознакомьтесь с README, описанием возможностей и инструкциями по установке.

Шаг 2. Скачайте исходный код

Скачайте архив репозитория или готовую сборку, если она доступна в разделе Releases. Для версии 3.2.0 готовая сборка называется: odesoftami-qa-monitor-v3.2.0.zip Если используете архив исходного проекта, убедитесь, что выбираете именно готовый пакет расширения, а не архив всего репозитория.

Шаг 3. Распакуйте архив

Распакуйте ZIP-файл в отдельную папку. В корне папки расширения должен находиться файл `manifest.json`.

Шаг 4. Откройте страницу расширений Chrome

Введите в адресной строке: chrome://extensions  и включите Режим разработчика (Developer mode). Нажмите **Загрузить распакованное расширение (Load unpacked)** и выберите папку, содержащую `manifest.json`. После успешной загрузки расширение появится в списке установленных расширений.

Шаг 5. Закрепите расширение

При необходимости закрепите QA Monitor на панели инструментов Chrome, чтобы быстро запускать его для нужной вкладки. При первом использовании ознакомьтесь с разрешениями расширения и его политикой конфиденциальности.

Как пользоваться расширением

Пример 1. Проверка сайта после деплоя

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

1. Откройте нужную страницу в Chrome.
2. Запустите Odesoftami QA Monitor.
3. Выберите режим `Monitor`.
4. Настройте проверку нужного текста или DOM-элемента.
5. При необходимости включите проверку URL.
6. Нажмите `Start`.
7. Дождитесь выполнения проверок и изучите события.
8. Откройте Dashboard и сохраните отчёт.

В результате можно увидеть, обнаружила ли система настроенные несоответствия и какие события произошли во время сессии.

Пример 2. Проверка ошибки 404

Допустим, нужно проверить, что при открытии несуществующей страницы сайт возвращает ожидаемый HTTP-статус.

1. Откройте вкладку с нужным URL.
2. Запустите QA Monitor и начните сессию.
3. Перейдите на проверяемый адрес или перезагрузите страницу после начала сессии.
4. Найдите соответствующее событие навигации в истории.
5. Проверьте доступный HTTP-статус и описание результата.

Важно: если страница была загружена до старта сессии, первоначальный HTTP-статус может быть недоступен. Для корректной проверки начните сессию до новой навигации.

Пример 3. Контроль появления сообщения

Предположим, после выполнения действия на сайте должно появиться сообщение `Order confirmed`.

1. Откройте страницу, на которой появляется уведомление.
2. Выберите режим `Monitor` или `QA Session`.
3. Настройте текстовое условие.
4. Запустите сессию.
5. Выполните необходимое действие на странице.
6. Проверьте, зарегистрировано ли появление ожидаемого текста.

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

Пример 4. Проверка редиректов

Предположим, после перехода на определённую страницу пользователь должен попасть на другой адрес.

1. Запустите QA Monitor до выполнения перехода.
2. Включите проверку URL и навигации.
3. Выполните переход.
4. Проверьте зарегистрированные URL и события редиректов.
5. Сравните фактический адрес с ожидаемым.

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

Отчёты и анализ результатов

Одна из полезных особенностей QA Monitor — возможность сохранять результаты сессий в структурированном виде.

• CSV подходит для работы с таблицами, сортировки событий и дальнейшего анализа.
• HTML позволяет просматривать отчёт как отдельную веб-страницу.
• JSON удобен для программной обработки и интеграции с собственными инструментами анализа.

Перед отправкой отчёта коллегам следует проверить содержимое. URL могут включать параметры запросов или токены, а скриншоты — конфиденциальную информацию, отображаемую на странице. История ограничена настройками хранения. Расширение автоматически удаляет старые завершённые сессии при достижении установленных лимитов.

Конфиденциальность: куда отправляются данные

Odesoftami QA Monitor построен по принципу локальной обработки данных. Согласно документации проекта:

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

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

Что расширение не умеет

QA Monitor — специализированный браузерный инструмент, а не универсальная платформа тестирования. У него есть конкретные ограничения:

1. он не анализирует все сетевые запросы страницы;
2. не проверяет автоматически все ссылки сайта;
3. не заменяет полноценное нагрузочное тестирование;
4. не выполняет комплексный аудит безопасности;
5. не измеряет серверный TTFB;
6. не наблюдает за сайтом круглосуточно без активной браузерной сессии;
7. не гарантирует обнаружение каждого возможного дефекта.

HTTP-статусы доступны не для каждой навигации. SPA-переходы, кэширование и особенности браузера могут влиять на доступность отдельных измерений. Эти ограничения важно учитывать при интерпретации отчётов.

Итог

Odesoftami QA Monitor — практический инструмент для тех, кому необходимо контролировать поведение веб-страниц непосредственно в браузере. Он объединяет автоматическое обновление, проверки текста и DOM, наблюдение за URL, регистрацию доступных HTTP-статусов, измерение времени загрузки и формирование отчётов.  Расширение особенно полезно для ручного QA, регрессионных проверок, тестирования после деплоя и диагностики отдельных проблем интерфейса.

Исходный код, документация и актуальная сборка проекта: Открыть Odesoftami QA Monitor на GitHub (https://github.com/odesoftami)