TestSprite - КОРОЛЬ MCP! Автотесты для кода. Подключаю к IDE

Всем привет. Меня зовут Костя, и в этом видео я расскажу вам про MCP, который умеет тестировать ваш код. Находить уязвимости, находить код, который плохо написан, код, который не работает и так далее. Наверняка вы знают, что хоть и нейронки пишут код, но не всегда делают это идеально. Так вот, как раз тест спрайт создан для того, чтобы решить эту проблему. Начать пользоваться можно абсолютно бесплатно, что самое главное. То есть нам с вами дают 150 кредитов бесплатных, которые мы как раз можем потратить на тестирование своего кода. Давайте чуть-чуть пробежимся и посмотрим, как это всё работает. То есть это обычный MCP-сервер, который подключается к большинству IDE, к большинству SL программ и так далее. Нам лишь нужно его подключить. Всё это я сегодня покажу и сразу на нескольких инструментах. То есть вот нам здесь показано, что можно легко подключить в Drive, в Cloud, Visual Studio Code, в антиграutти, в Cursor Inserve и в остальное. Но сначала давайте пробежимся всё-таки по ценнику, что сколько стоит. А конкретно а у нас есть бесплатный тариф, которым мы сегодня и будем пользоваться. То есть у нас 150 кредитов есть в месяц, который нам дают. Он обновляется каждый месяц. Далее у нас есть тариф, котором первый месяц абсолютно бесплатный, то есть, а со второго уже будет по 20 долларов, в котором нам дают 400 кредитов в месяц. Как у нас расходуются эти кредиты, мы сегодня посмотрим. Также мы можем посмотреть, как у нас это всё работает с точки зрения того, какие модели использовать. То есть на бесплатном тарифе у нас будет использоваться JPT4. 1 для тестов и клод 3. 7. А клод 3,7, я считаю, до сих пор очень даже неплохой. А, ну и, соответственно, если мы уже платно используем платные тарифы, то у нас, скорее всего, будут одни из самых последних моделей и использоваться. И, соответственно, здесь вы при желании можете почитать все остальные фичи, которые предоставляются. Ссылки я, конечно же, оставлю в описании и в закреплённом комментарии. Давайте чуть-чуть поговорим про установку. У нас есть документация, в которой можно самому всё это посмотреть, но я сегодня буду всё рассказывать по этапам. Итак, а для того, чтобы установить этот MCP-сервер, нам для начала нужно получить iключ. Мы его сегодня получим обязательно на видео. И далее нам нужно будет установить э этот MCP-сервер себе в какой-либо IDE, допустим, в тра. Это легче всего делается. То есть нам всего лишь нужно зайти в настройки, выбрать Marketplace, Tests sprite, и всё. И у вас всё будет работать после того, как вы ключ туда введёте. В курсоре это просто по одной, э, ссылке устанавливается и вводится опилюч. Соответственно, в clД код нам нужно также написать просто вот такую вот команду, куда тоже нужно заменить вот тут вот апи ключ. Ну и в антигравити vsкод и в остальных всё одинаково устанавливается. То есть нужно просто MCP config отредактировать и вписать вот это вот всё. И у вас также это всё будет работать. Мы сегодня попробуем, наверное, три варианта. Я покажу, и вы сможете повторить это у себя. Итак, давайте регистрироваться. Я перейду на главную страницу, нажму регистрацию кнопку и войду просто через свой Google аккаунт. Можете войти через GitHub, в принципе, разницы большой нет. Входим, и у нас происходит регистрация. Так. И вот на вот он наш дашборд самый главный, который нас приветствует, где всё рассказывается. Я это всё сегодня буду вам рассказывать. Итак, а здесь нас сразу же приветствуются, приветствуется и рассказывается, что нам необходимо создать свой IP ключ. Соответственно, мы переходим на эту страницу. Пока что мы создавать ключ не будем, потому что нам его пока что некуда и вводить-то, собственно говоря. Далее у нас тут написано, что мы можем MCP установить легко. То есть просто нажав на кнопку, он добавится в курсор. Вот это вот всё, если мы введём в клод. И в остальных случаях вот это то, что я ранее и рассказывал. Давайте приступать. Начну я с кодекса. Открываем кодекс. Вот так он у нас выглядит. У нас здесь есть настройки. Нажимаем их. Вот они наши серверы MCP. Можем посмотреть, допустим, вот у нас здесь шатсин установлен, как он установлен. То есть нам необходимо здесь написать команду для запуска и так далее. Давайте добавлять новый сервер. Команда для запуска у нас также будет NPX, потому что здесь тоже написано NPX. Далее вот этот вот аргумент мы отсюда копируем, вставляем в аргументы. Далее у нас здесь есть переменное окружение. Это как раз-таки и есть ENV. Мы вот это вот

копируем APK. Отсюда возвращаемся в кодекс и в значение пока что оставляем пустым, потому что у нас нет IP ключа. Итак, а я создаю новый IP ключ. Вот у нас страница. То есть я здесь как раз наберу кодекс какой-нибудь. И вот он наш IP ключ. Я его копирую, возвращаюсь обратно в кодекс, вставляю. И мы забыли ещё написать имя этого MCP сервера. Это обязательно. Просто копируем отсюда же и это имя. Возвращаемся, вставляем, нажимаем сохранить. И всё, MCP у нас подключен. Он полностью рабочий и можно пользоваться. Всё достаточно просто. Давайте также этот MCP установим в Visual Studio Cд, а именно в Kill Cд. Я знаю, что вы продолжаете им пользоваться, поэтому покажу и как в нём это сделать. Нажимаем здесь вот такие вот весы. И у нас здесь есть список MCP серверов. У вас он может быть пустым этот список. И далее вы принимаете решение, вам нужно в конкретный проект установить либо глобально во все проекты. А я глобально установлю. У нас здесь вот такая вот квакозябра. Это ничего страшного. Копируем это всё дело. А есть вот такие вот сайты. Называются они Jon Beauty в общем, как-то так. Можете конкретно в этот зайти, то есть код Beautify Org Jon Viver. Сюда это всё вводите, чтобы он стал красивым. И далее копируете. Вот я нажал Peutify, копирую, возвращаю обратно, чтобы была возможность у меня всё это дело отредактировать. То есть мне сейчас нужно вот сюда этот MCP вставить. Возвращаемся, смотрим, как его вставлять. Вот у нас вот этот вот а весь этот код. Мы его отсюда копируем. Можете отсюда скопировать, это вообще неважно. Можно отсюда. Копируете, пока что вставляете в пустое место, потому что нам здесь нужно не всё. Нам здесь нужно вот отсюда сначала от названия до конца названия и закрытой скобки. Нужно посмотреть, где она закрывается. Фигурная скобка. Всё, что внутри, нам не надо, вернее, всё, что снаружи. Далее ставим, а запятую, вставляем. И нужно сюда свой IP ключ вставить. То же самое. Создаём новый IP ключ. Пишем, что это у нас э-элокод, допустим, да? Напишем. Также копируете весь этот APK, вставляете его сюда и всё. Также нам нужно будет здесь указать, что disabled, вот этот вот скопировать тоже disabled true. И в принципе всё, у нас всё будет работать. Всё, ошибка пропала. Всё, теперь у нас тест с Sprite и работает ещё и в килокоде. Ну и финально давайте добавим ещё и в clклод. То есть вам нужно обязательно перейти в папку, э- в которую вы будете тестировать свой проект. У меня это Jon Image Cleaner. Я перехожу далее, а нахожу, где у нас тут инсталляция, клод. И вот он, весь код, который необходимо ввести. Я это копирую, в терминал вставляю. И теперь мне нужно опиключ только здесь заменить на другой, то есть на тот, который мы сейчас создадим. Я вот это вот всё стираю. И нам теперь нужен ещё один ключик. Хотя можно было тем воспользоваться. Ну да ладно. А ввожу сюда клод, копирую ключ, возвращаюсь в терминал, вставляю его и ввожу. Теперь у нас появился ещё и MCP в клоде. Мы это можем узнать так. То есть клод сейчас вот набрать, ввести здесь MCP. Так, он говорит, что подключается. И вот он подключился. То есть он теперь работает. Подключение - это, конечно, всё здорово, но давайте посмотрим на деле, что из себя представляет тест Sprite. У меня есть проект, написанный совсем недавно Минимаксом M2. 7. И я хочу продемонстрировать вот для начала. Для этого я введу npm

run def, чтобы у меня открылся этот проект в браузере. Вот так вот он выглядит. В общем, это приложение решает проблему с битыми ссылками в Jсом сюда Jon файлы отправлять. Он будет проверять набитые ссылки, показывать, где биты, где не битые. также сортирует. Я хочу проверить, насколько здесь код написан хорошо и можно ли его как-либо оптимизировать. Для этого мы как раз и будем использовать тест Sprite. А мы проверим MCP, то, что он у нас подключен. Да, И мы можем попросить нейронку, в данном случае SNT 4. 6, чтобы он, а, при помощи MCP testsprite проверил наш проект. Но перед тем, как мы это сделаем, нам необходима документация этого проекта. Я вам сейчас покажу. такой момент, а, допустим, мы пишем, а, проверь, протестируй. Давайте по-русски напишем, протестируй проект при помощи MCP, а, тест Sprite называется. И отправляем. Я набрал протестирую, но я думаю, он всё равно поймёт. То есть он сейчас должен у нас подцепить наш MCP и пройтись по нашему проекту. Он прошёлся по нашему проекту, просит у нас какой-то процесс сделать, мы ему разрешаем, пускай дальше что-то изучает. Возможно, он изучает проект для того, чтобы понять вообще, что здесь тестировать. Итак, на каком-то моменте у нас открылась вот эта страница. Я также нажал процесс. То есть у меня появился процесс, я нажал yes, открылась вот эта страница. То есть sprite у нас спрашивает некоторые данные о нашем проекте. Что мы хотим тестировать? Backend или frontend? Я выбираю frontend. А я нажимаю, что всю кодовую базу пускай тестирует. А у меня нет никаких данных о входе. То есть у меня авторизации нет, поэтому я это заполнять не буду. А порт, на котором находится наше приложение, он 3. 000. Я также это оставляю. А здесь у нас требуется документация, которую нам сейчас необходимо будет сделать. Давайте я открою ещё один терминал, закину сюда этот проект, напишу SD, открою ещё один клод. Я бы мог, конечно, не клод открыть, что-то другое, но раз мы уже начали с клодом, а попрошу его просто создай документацию проекта. документацию проекта в файл, допустим, спек. Пускай он спекd создаст. И пускай наш как раз клод и создаст для нас документацию, по которой и будет работать наш тест Sprite. То есть и уже он поймёт, что так, что не так. уже и в самом нашем коде по этой документации. Наша документация создана, но это компромиссное решение. Почему она компромиссная? Потому что а в нормальных проектах, а в хороших Vipecд проектах документация должна создаваться автоматически при помощи нейросетей, там Skills, MCP, неважно. А в общем, документация уже должна быть в вашем проекте, но мы сейчас создали её сами, что тоже подойдёт. Раз у нас создана документация, то мы можем вот это вот всё закрыть и вот сюда эту документацию отправить. То есть мы заходим, вот он наш спек. MD, который только что создался, и всё, мы нажимаем продолжить. Теперь у нас документация есть, и здесь всё теперь продолжится. Итак, наше тестирование перешло на новый этап, когда у нас, во-первых, открылась дополнительная страница, в которых в котором он заполнил вот такие вот тикеты, это называется, то есть 15 проблем, которые он будет тестировать в приложении. Также у нас сразу же на сайте самого тестпрайта также создались эти тикеты, то есть они всё равно в памяти теперь останутся. И как я понял, сейчас пройдут тесты и определяться, какие у нас проблемы есть, каких у нас нет, и затем мы уже сможем эти проблемы решить, если они действительно существуют. Мы можем, в принципе, перевести это вот так вот на русский язык. И здесь написано, что, пожалуйста, оставьте ваше приложение локально. В общем-то, мы генерируем тестовый сценарий. Это может занять до 15 минут. То есть для оптимизации производительности и так далее. То есть, я так понимаю, у нас выполняются определённые тесты.

Итак, наше тестирование завершено, и он выявил всё-таки у нас проблемы, которые у нас существуют. То есть 15 тестов он создал и какие-то у нас удачно завершились, то есть у нас всё отлично отрабатывает, а в каких-то всё-таки у нас существуют ошибки, где написано вот а файл, то есть неудачно. Мы можем посмотреть даже, что он тут делал. У нас здесь даже есть ролики, как он что-то тут пытался делать. Он описал, какие проблемы существуют, как их решить. В общем-то, теперь мы можем вот это вот всё нейронке передать, все эти ошибки, и нейронка нам уже всё это поправит. Также у нас все эти тесты остались здесь тоже описаны, что у нас здесь случилось по нашему приложению. В общем, вот такая вот история, вот такая ситуация. Думаю, показывать не буду, как я эти ошибки исправляю, потому что и так понятно, как это всё происходит. То есть я нейронки скормлю все эти ошибки, она все их исправит. Затем я снова попробую протестировать это всё а тест спрайтом и уже так далее. То есть вводя новые какие-то фичи, новые функции, модули, я снова и снова буду прогонять этот тест, чтобы выявлять проблемы. Теперь нам бы посмотреть, сколько у нас кредитов съело. О, я вижу, что кредитов у нас нисколько не съело, по-моему. У нас как было здесь 150 кредитов, столько и осталось. То есть проект, скорее всего, у нас маленький, что даже особо и кредитов-то и не потратилось. Итак, какой у нас вывод из наших с вами сегодняшних тестов? Во-первых, а при помощи этого MCP мы можем улучшить свою разработку. Это как минимум. Ещё и можем сделать это бесплатно, так как нам дают 150 кредитов бесплатно, что очень даже щедро. Аа я, как видите, тестирование сделал, я могу ещё раз обновить, и у меня как было 150 кредитов, так и осталось. То есть у меня ещё этих кредитов навалом я могу ещё тестировать, тестировать и тестировать. Проект у меня, конечно, тоже был небольшой, но да ладно, суть-то не в этом. Суть в том, что, используя тест Sprite, мы вполне себе можем улучшать наши проекты, как минимум тестируя, ища в них дырки, ища плохой код, нерабочий код, то есть нерабочую какую-то логику, и тем самым как бы упрощать себе как минимум работу, как минимум это тестирование и так далее. Вот такое вот видео у нас получилось. На самом деле здесь есть ещё дополнительный функционал в виде, допустим, интеграции с Гитхабом, мониторингов, тест-листов. Можно самому создавать эти тесты. А я сегодня только обозрел MCP-тесты, что уже немало, я считаю, что показал достаточно неплохой функционал, который может помогать нам в разработке, решать наши какие-то насущные проблемы, экономить время. В общем-то, я с вами прощаюсь. Спасибо за просмотр. Ставьте лайки, подписывайтесь на канал, подписывайтесь на Telegram канал. До скорых встреч. Пока. M.