Комментарии 14
Вы, безусловно, талантливый и креативный человек, но...
1. "Этот сайт открывается внутри iframe прямо в отчёте." - Вы, видимо, не в курсе про атаки кликджекинга и методы защиты? нормальный сайт во фрейм не загрузить, этому препятствует это - https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/X-Frame-Options
Технически можно решить, донастроить, многие заголовки выставляются на nginx, а не в приложении, но внутреннюю безопасность никто не отменял. Ни одна крупная компания не пойдет на это.
2. Добавлять себе на сайт <script src="https://nikita-filonov.github.io/ui-coverage-report/agent.global.js"></script> без глубокого исследования скрипта - плохая практика. Плюс можно "забыть" убрать для продакшена и т.п., в общем, риски.Сама идея интересная, но не нова. Продолжайте, ищите вариант как можно меньше интегрировать тулзу с целью. С интересом смотрел на вашу другую вещь - покрытие api
Спасибо за развёрнутый комментарий
Про
iframeиX-Frame-Options— вы абсолютно правы: современные сайты, особенно корпоративные, действительно часто блокируют загрузку во фреймы, и это абсолютно оправданная мера против кликджекинга. Однако, инструментui-coverage-toolне предполагает работу с продакшеном напрямую, даже специально написан про это в статье. Он ориентирован на тестовые стенды, локальные версии и dev-сборки — там, где у разработчика/тестировщика есть контроль над конфигурацией.
То есть, да,X-Frame-Optionsможет мешать — и это нормально. Но в CI или при ручной проверке такой механизм работает идеально и дает визуальную обратную связь прямо на живом UI — что и было главной целью. Так что всё честно и реалистично в рамках применения.Насчёт скрипта
agent.global.js— это абсолютно резонный пойнт. Да, я бы тоже не стал подключать любой внешний скрипт в продакшн без ревью. Поэтому в статье прямо указано: использовать только на тестовом окружении.
Плюс исходники полностью открыты: любой желающий может собрать агент вручную, посмотреть, как он работает, и адаптировать под свои нужды. Этот проект — не blackbox и не магия, а прозрачный инструмент, созданный разработчиком для разработчиков.
И если уже совсем паранойя, можно взять сделать форк/утащить себе локально и уж точно никто туда не вмешаетсяПро «идея не нова» — возможно, но я пока не встречал инструмента, который делает это именно так:
без необходимости менять код приложения,
без зависимости от конкретного фреймворка,
с визуализацией поверх живой страницы
и с возможностью отслеживать реальные действия из автотестов.
Если знаете аналог — с удовольствием посмотрю, будет интересно сравнить подходы. А пока — это первая публичная реализация такого рода с открытым исходным кодом
Спасибо ещё раз за интерес к проекту
Минус-то за что? За обсуждение? Ну спасибо, конструктивно.
Тестовые стенды внезапно тоже должны покрываться безопасностью, в корпоративной среде приложения и test/dev стенды - монстры, локально их не поднимешь, и на них ИБ тоже будет требовать те же X-Frame-Options. Я вам пытаюсь показать, что этот инструмент имеет сильные ограничения в корп. среде. В мелких проектах - наверно да, можно попробовать применить.
Лично к Вам - вижу вашу безапелляционность к возражениям и слепую веру в свой идеальный продукт-детище. Юношеский максимализм - хорошо, но давайте больше конструктива и прислушиваться к советам и мнению других людей, Вы же пришли на Хабр не прокричать, какой вы гениальный и инновационный, а собрать обратную связь, правда же? Надеюсь, мы оба понимаем, что позитивная критика - это хорошо
Спасибо за подробный фидбек, давайте по делу:
Про безопасность и X-Frame-Options
Да, в корпоративной среде есть ограничения, и они реальны. Но если подходить с таким критерием, то давайте вычеркнем и весь open source, который не покрывает 100% корпоративных кейсов. А это — почти всё.
На dev/stage можно отключить заголовки, можно поднять отчёт рядом, можно подгружать снимки и визуализировать отдельно. Это не проблема, это просто нюанс интеграции. У инструмента есть фокус — визуализировать покрытие UI, и он с этим справляется. Даже в корп-среде.
Про веру и максимализм
Я действительно верю в свой инструмент — потому что я его сделал. С нуля. Один. И он работает, этим пользуются, он приносит реальную пользу — это факт, а не эмоция.
Если у вас есть альтернатива — давайте посмотрим. Я открыт к конструктиву, но обсуждать "как должно быть" проще, чем сделать "как есть". Поэтому я привык слушать тех, кто тоже делает.
Про скрипт и безопасность
Любой скрипт можно форкнуть и держать у себя, как делают с Bootstrap, jQuery, любой CDN. Никто не заставляет подключать агент напрямую. Это инструмент, а не вирус. Исходники открыты — берите, собирайте, адаптируйте под себя.
P.S. И про минус — да нет, это не я XD Я в дискуссии за факты, не за кнопки.
Если коротко: инструмент не идеален, но он реален. Он уже решает задачи. А что-то, что "могло бы быть лучше", — ну так сделайте, покажите. Я первый скажу "круто".
"Когда ты сделал что-то своё, а тебе говорят, что оно 'неподходит под корп. среду'"
Я: «Зато оно вообще есть.»
Интересно, на поиграться, но реальной пользы вижу мало - в реальном приложении много вьюшек, которые с ходу не видны. Так что всё, что ты увидишь - несколько очевидных тестовых сценариев и всё.
лёгкая, но гибкая архитектура на React + PostMessage, которая масштабируется и кастомизируется под любые нужды. Благодаря React и открытой архитектуре, можно написать всё что угодно и куда угодно.
Примечательно, что именно в Реакте появилось разделение на "умные" и "глупые" компоненты. Не от хорошей жизни. В нём очень сложно сделать что-то на настоящему гибкое. Так что если вы что-то такое и сделали, то не "благодаря", а "вопреки".
Лимитации? Пока не обнаружены. Инструмент активно тестируется в боевых условиях, и пока ни одной критичной лимитации замечено не было.
У нас, например, ui-тесты не рендерят по чём зря DOM дерево. Вот, например, страница, где тестируется приложение (отчёт выводится в консоль). Как вы подсветите, какие компоненты протестированы и насколько качественно?
Лёгкий как перышко. Отчёт весит всего ~1MB — с историей, фреймом, графиками и всей аналитикой.
Как-то многовато. У вас там дамп Войны и Мира зашит что ли?
Работа с реальным приложением, а не копией. Вы работаете с живым приложением во фрейме. Можно изменить состояние, перезагрузить и сразу увидеть изменения. Это не реплей, это реальность.
Во что превратится отчёт, когда приложение или данные обновятся?
Спасибо за мнение, но давайте по фактам
"В реальном приложении много вьюшек, которые с ходу не видны"
Сюрприз: именно поэтому инструмент и нужен. Чтобы увидеть, что реально покрыто, а что забыто. Он не заменяет здравый смысл или хороший тест-дизайн, он показывает фактическое покрытие. Это зеркало, а не костыль.
"React — не от хорошей жизни"
Инструмент работает, потому что архитектура простая и гибкая, а React идеально ложится под визуализацию и расширение через postMessage. Можно не любить React, но это не мешает инструменту быть полезным и кастомизируемым.
"DOM не рендерится, ничего не подсветите"
Если DOM не рендерится — значит, там и не с чем работать визуально. Это как жаловаться, что тепловизор не показывает невидимое. Этот инструмент не для всего подряд — он для UI, который реально отрисовывается.
"1MB — многовато"
Серьёзно? У нас в 2025-м отчёт весом 1MB — это уже много? Это как жаловаться на размер скриншота. Там графики, история, фрейм, интерактив — не просто текстовичок на коленке.
"Что будет, когда данные обновятся?"
Ну… появятся непокрытые зоны. Это как раз плюс — вы сразу видите, где тесты устарели. Инструмент и не должен хранить вечную истину, он показывает текущее покрытие. Как бы если данные обновятся, то и тесты попадают. Чиним тесты, запускаем, видим новую картину покрытия.
Фишка в чём: этот инструмент — не панацея, не silver bullet. Это визуальный инструмент, который реально помогает понять, что происходит в UI.
Никто до меня это не делал на таком уровне — и если у вас есть что-то лучше, покажите. Я первый в очереди на то, чтобы посмотреть и сказать «вау».
Сюрприз: именно поэтому инструмент и нужен. Чтобы увидеть, что реально покрыто, а что забыто.
На одном экране видно хорошо если 1% от того, что реально надо покрыть тестами, а до остальных ещё добраться надо.
Этот инструмент не для всего подряд — он для UI, который реально отрисовывается. этот инструмент — не панацея, не silver bullet.
Ой, лимитации.
Можно не любить React, но это не мешает инструменту быть полезным и кастомизируемым.
Ну раз она такая гибкая, то что мешает поддержать фреймворки, которые не рендерят весь DOM в тестах?
Серьёзно? У нас в 2025-м отчёт весом 1MB — это уже много?
Много/мало определяется не годом, а соотношением полезной информации к бесполезной.
Ну… появятся непокрытые зоны. Это как раз плюс — вы сразу видите, где тесты устарели.
То есть старые отчёты превращаются в тыкву, понятно.
"На одном экране видно хорошо если 1% от того, что реально надо покрыть тестами, а до остальных ещё добраться надо."
Вы описали не проблему инструмента, а проблему отсутствия нормальных тестов. Инструмент ничего не скрывает — он показывает то, что реально трогают автотесты. Остальное не покрыто? Ну вот, теперь мы это видим. Добро пожаловать в реальность.
"Ой, лимитации."
Да, звучит как будто вы прям расстроились, что не нашли критичных проблем. Но ничего, держу в курсе — инструмент будет развиваться, и багтрекер открыт. Можете оставить фидбек, если вдруг появится что-то конкретнее, чем "ой".
"Что мешает поддержать фреймворки, которые не рендерят весь DOM в тестах?"
Ничего не мешает. Просто этот инструмент для визуального UI, а не для фантомных абстракций. Хотите интеграцию с виртуальными компонентами — флаг в руки, контрибьюшен открыт. Сделаете PR — я скажу спасибо и залью.
"Много/мало определяется не годом, а соотношением полезной информации к бесполезной."
Именно. 1MB отчёта — это:
история действий,
интерактивный фрейм,
таймлайны,
подсветка элементов,
и вся аналитика.
Если вы считаете это "бесполезным", возможно, вам просто пока не приходилось разбираться с рефакторингом тестов и анализом покрытия.
"Старые отчёты превращаются в тыкву"
Старые отчёты отражают то, как работали тесты тогда. Новый релиз — новые тесты. Захотел — пересобрал. Это не минус, это индикатор жизни проекта. Только мёртвый проект не меняется и не ломает покрытие.
Этот инструмент не решает все беды мира — зато он даёт реальный визуальный фидбек, без симуляций и фантазий.
Проблемы в UI-тестировании — это не "у нас слишком много вьюшек", а "у нас нет ни одного нормального инструмента, чтобы понять, что реально протестировано".
Вот теперь он есть.
Остальное не покрыто? Ну вот, теперь мы это видим. Добро пожаловать в реальность.
Не видим, ибо смотрим через замочную скважину, показывающую 1% приложения.
Да, звучит как будто вы прям расстроились, что не нашли критичных проблем.
Звучит так, что я уличил вас во лжи, а вам не хватает размера яиц это признать.
Хотите интеграцию с виртуальными компонентами — флаг в руки, контрибьюшен открыт. Сделаете PR — я скажу спасибо и залью.
Если вы ждёте от сообщества помощи, то выбрали неправильную стратегию общения с ним. Попробуйте не строить из себя упоротого маркетолога.
Если вы считаете это "бесполезным", возможно, вам просто пока не приходилось разбираться с рефакторингом тестов и анализом покрытия.
Я считаю всё это весит 100кб в прыжке. Думаю у вас там много мусора, который стоит удалить, а не кичиться тем, что у вас "всего" мегабайт.
Старые отчёты отражают то, как работали тесты тогда. Новый релиз — новые тесты.
Так не отражают же. У вас старые отчёты показываются с новым приложением. И с каждым апдейтом показания в этом отчёте разные.
Спасибо за вашу активность, давайте по порядку, спокойно, без эмоций:
Не видим, смотрим через замочную скважину
Вы сами себе противоречите: сначала говорите "мы ничего не видим", потом — "всё равно ничего не покрыто". Так может как раз и видим?
Инструмент показывает то, что реально отрисовано, и в этом его сила. Он не гадает по облакам, он даёт фактическую картину.
Уличил во лжи / яйца / признание
Оставлю это без комментариев — не мой стиль мериться органами. Я тут про продукт и про факты, не про уличные перепалки с гопниками.
Контрибьюшен открыт
Вот тут вы сами ответили на свой же тезис: инструмент открыт, адаптируем, обсуждаем. Нравится идея — welcome, сделайте лучше. Вместо того, чтобы пытаться ткнуть пальцем, можно просто поучаствовать. Это не сарказм — это прямое приглашение.
Выбрали неправильную стратегию общения
Наоборот. Я с самого начала говорил: критику принимаю, если она идёт в связке с предложением или решением. Кричать "это всё фигня" — легко. Сделать PR — вот это польза.
100кб в прыжке / мусор
Отчёт содержит графики, хронологию действий, снимки, динамику. Это не hello-world.json.
Да, он весит чуть больше, чем «проверка одного чекбокса», потому что он визуальный и подробный. Если он показывает что покрыто, как, когда и кем — 1MB за это более чем уместно.
Старые отчёты показываются с новым приложением
Показываются. Потому что это — история. Как работали тесты тогда, что покрывали тогда. Это и есть point-in-time snapshot. Хочешь актуальное — запускай тесты заново и получишь актуальный отчёт. Всё честно.
Инструмент не претендует на всемирное господство. Он закрывает свою задачу — понятно, наглядно и прозрачно показать покрытие UI. Не вместо, а в дополнение.
Если вы это не видите — возможно, это просто не ваш кейс. Такое тоже бывает.
Но инструмент есть, он работает, и он реально помогает.
P.S. И да, если вы увидели всего 1% — возможно, пора протереть глаза и посмотреть шире.
Если вы ждёте от сообщества помощи, то выбрали неправильную стратегию общения с ним. Попробуйте не строить из себя упоротого маркетолога.
ой, а кто это говорит?
может тот человек, которому миллион раз говорили что есть общепринятые нормы написания кода, а он им не следует? тот, кто на любую критику чуть ли не посылает человека в пешее эротическое? или же комментатор, который приходит в любой пост про фронтенд тематику и говорит какой крутой его мол (по поводу и без. ну, скорее всего не в тему)?
хотя не, скорее всего, это говорит человек, который строит стратегию пиара своего продукта на принципе "вы все дибилы и не лечитесь, а один тут шарю как надо"
ну камон, чел, сначала меня это забавляло, но в последнее время реал бесить начало. нафига докапываться до людей постоянно?
ой, а кто это говорит?
Очевидно, человек не понаслышке знающий, о чём говорит.
может тот человек, которому миллион раз говорили что есть общепринятые нормы написания кода, а он им не следует?
Тот человек, который провёл технический анализ вопроса, например.
тот, кто на любую критику чуть ли не посылает человека в пешее эротическое?
Приведите ссылку, где я кого-то "чуть ли не посылаю" - посмотрим, насколько обоснована была эта "любая критика".
или же комментатор, который приходит в любой пост про фронтенд тематику и говорит какой крутой его мол (по поводу и без. ну, скорее всего не в тему)?
Опять же, покажите хоть одно моё сообщение из 10К на Хабре, написанное не в тему.
это говорит человек, который строит стратегию пиара своего продукта
У вас маркетинг головного мозга уже, раз везде мерещатся продукты, которые вам типа продают.
вы все дибилы и не лечитесь, а один тут шарю как надо
И я подкрепляю свои слова пруфами. Но, к сожалению, дебилизм пруфами не лечится.
сначала меня это забавляло, но в последнее время реал бесить начало
Попробуйте обратиться ко психотерапевту с этим вопросом, не запускайте.
нафига докапываться до людей постоянно?
Ок, отвечу на понятном вам языке: слыш, пацанчик, ты чё к бате докопался? Череп сильно жмёт?
Ну ок, такой вопрос:
Безусловно, проект талантливый, но по как мне, так я все отчеты генерю в первую очередь для бизнеса, а во вторую для себя.
Что говорит бизнес, когда смотрит на получившуюся отчетность? Те, для кого количество кликов, количество элементов - штуки абстрактные скорее всего. Удобно конечно, что можно "подсветить", но теперь надо ходить считать сколько подсвеченно, а сколько нет? Или я прочитал невнимательно и что то упустил?
Другими словами: бизнес пользует вашу отчетность?
Как увидеть, что именно покрывают UI-тесты — прямо на сайте и в реальном времени