Всем привет!

В этой статье я хочу рассказать о небольшом расширении, которое упрощает хранение и использование feature toggles, работающих через cookies.

В компании, где я сейчас работаю, фича-тоглы работают по принципу указания ключа и значения в cookies. Однако, при тестировании (и не только) возникает несколько болей:

• Количество тоглов уже перевалило за сотню, и хранятся они в Confluence. Постоянно ходить туда или держать названия в голове — то ещё удовольствие

• Тестирование на фичевых ветках осложняется тем, что из-за разных доменов UI и API невозможно авторизоваться: cookies не проставляются автоматически. Чтобы их добавить, приходится заходить на мастер-ветку, брать оттуда cookies и вручную подменять домен. Не страшно, если речь идёт об одной-двух cookies, но когда их больше десяти — это уже боль.

• Просмотр результата на проде тоже не всегда прост: feature-mapper не позволит просто так поменять значение cookies и вернёт исходное.

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

Разберём всё по порядку ?

Как появилась идея

Изначально задумывалось, что Fookie будет хранить информацию о feature-флагах и менять домены.

Цель — чтобы пользователь мог зайти на страницу в Confluence, нажать кнопку «Обновить», и все feature-флаги подтянулись бы в расширение. Также одной кнопкой можно было бы заменить домен у всех cookies на странице.

Первая версия Fookie была неказистая, но рабочая — а это главное. Уже тогда можно было:

• сохранять feature-флаги в избранное,

• работать с актуальными cookies,

• добавлять их на страницу,

• массово менять домен.

Позже появились новые возможности:

• выгрузка всех cookies для Postman,

• загрузка и выгрузка cookies со страницы,

• автозапуск.

Немного о функционале

При открытии Fookie отображается шапка с поиском, сортировкой, меню и настройками, а также текущие активные cookies — их можно удалить или изменить.

При наведении на таб с cookies показывается домен, а при клике по названию открывается модальное окно с двумя вкладками: «Редактировать»  и «Настройки».

Во вкладке «Редактировать»  всё просто — вводим данные, и cookies появляется на странице.

Во вкладке «Настройки» начинается интересное

• можно добавить cookies в избранное, и после того, как она станет неактивной, cookies будет отображаться на главной странице в разделе “Избранное” 

• также разблокируется возможность указать описание для cookies — по нему можно искать в поиске;

• если значение cookies — true, false или, например, 123||321, то в избранном блоке с cookies появится селектор для выбора варианта;

• можно включить автозапуск  — тогда при каждом заходе на страницу, Fookie автоматически будет добавлять нужные cookies.

А также в Fookie для удобства тестирования были реализованы следующие функции:

• Ручное добавление cookies - если вы ранее применяли cookies, Fookie автоматически предложит её название и по нажатию Tab, допишет её название в поле. Это позволяет упростить поиск cookies, с которыми работали ранее

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

• Подмена домена — позволяет заменить домен у всех cookies на указанный в настройках (например c test.mvideo.ru на mvideo.ru), что существенно сокращает время, так как исключается рутинный процесс ручной замены доменов в необходимых cookies в devTools.

• Postman — копирует все активные cookies в буфер обмена в формате, готовом для вставки в заголовки запроса

• Загрузка / Выгрузка — позволяет сохранить текущие cookies или избранное, для последующей передачи их коллеге или загрузки на новое устройство.

• Обновление cookies на текущей странице - позволяет подтянуть текущее состояние cookies со страницы.

• Обновление избранного - дает возможность вытянуть из документации (например, в Confluence)  информацию о cookies и сохранить её в расширение.

  • Добавление в избранное, у которого есть два режима работы:

    • Локальный  — чтобы вытянуть ваши фф (cookies) из документации на странице, но здесь важно, чтобы названия имели дата-атрибуты

      • data-fookie=cookie_name, - название cookies

      • data-fookie=cookie_value, - значение cookies

      • data-fookie=cookie_description - описание cookies (опционально).

    • Удалённый — аналогичный режим, но здесь данные берутся с сервера. Формат ответа должен быть таким:

      •  [{ "name": "", "value": "", "description": "" }]

Я описал только самую важную его часть. Но помимо всего вышеописаного ,в нем также есть возможность посмотреть local\session storage, а в будущем хотелось бы создать и для них избранное.

Заключение

Этой статьёй я хотел поделиться нашей болью при работе с фф и решением, которое удалось найти. Возможно, кто-то сталкивается с такой же проблемой — и Fookie поможет вам сэкономить время и упростить процесс тестирования.

Если вы дочитали до сюда, то оставлю небольшой намек на пасхалку: может стоит нажать на версию?)

Спасибо всем, кто читает, пользуется и будет пользоваться ❤️

Fookie chrome

Fookie firefox