00:00:00То,
00:00:00как наша команда разрабатывает приложения,
00:00:02значительно улучшилось.
00:00:03В чём же дело?
00:00:03Claude Code недавно запустил свой расширение для Chrome.
00:00:06Вы можете подумать,
00:00:07что это уже было возможно с Playwright или Puppeteer MCP.
00:00:09Но эти инструменты имели серьёзные проблемы: раздутое контекстное окно,
00:00:13заполненная случайными скриншотами папка проекта и в большинстве случаев они вообще не могли выполнить действия в приложении.
00:00:20Именно поэтому я никогда не был большим сторонником автоматизированного тестирования с помощью ИИ.
00:00:24Но это также причина,
00:00:25по которой я был очень рад видеть это новое расширение Claude.
00:00:28Если вы следите за каналом,
00:00:29вы можете знать,
00:00:30что мы делали видео об этом раньше.
00:00:32Забавно то,
00:00:33что оно изначально не предназначалось для Claude Code,
00:00:35но мы ясно сказали,
00:00:36что это расширение имеет гораздо больший потенциал,
00:00:38если будет.
00:00:39И вот мы здесь.
00:00:39Теперь оно наконец выпущено как интегрированный MCP и даёт Claude Code все необходимые пользовательские инструменты.
00:00:45Сразу же из коробки он имеет серьёзные проблемы,
00:00:47которые нам нужно исправить.
00:00:48Но прежде чем мы на них остановимся,
00:00:49давайте быстро сделаем перерыв,
00:00:50чтобы поговорить об Automata.
00:00:52После обучения миллионов людей тому,
00:00:53как разрабатывать с помощью ИИ,
00:00:55мы начали внедрять эти рабочие процессы сами.
00:00:57Мы обнаружили,
00:00:58что можем создавать лучшие продукты быстрее,
00:01:00чем когда-либо.
00:01:01Мы помогаем воплотить ваши идеи в жизнь,
00:01:02будь то приложения или веб-сайты.
00:01:04Возможно,
00:01:05вы смотрели наши видео и думали: «У меня есть отличная идея,
00:01:07но у меня нет технической команды,
00:01:08чтобы её реализовать.» Именно для этого мы здесь.
00:01:11Думайте о нас как о вашем техническом соратнике.
00:01:13Мы применяем те же рабочие процессы,
00:01:15которым обучили миллионы людей,
00:01:16прямо к вашему проекту,
00:01:17превращая концепции в реальные,
00:01:19работающие решения без всех забот с наймом или управлением командой разработчиков.
00:01:23Готовы воплотить свою идею в действительность?
00:01:25Свяжитесь с нами по адресу hello@automata.dev Вернёмся к проблемам.
00:01:29Самая большая проблема,
00:01:30с которой я столкнулся,
00:01:31заключалась в том,
00:01:31что требовалось слишком много последовательных шагов для проверки чего-то действительно простого.
00:01:34Вы могли заметить,
00:01:35что когда вы просите Claude визуально протестировать целевую страницу сайта,
00:01:39она выполняет операцию прокрутки для каждого раздела и делает скриншот на каждом этапе.
00:01:43Затем она объединяет все скриншоты вместе,
00:01:44чтобы проанализировать пользовательский интерфейс раздел за разделом.
00:01:47Вы можете подумать, что это хороший подход, но это не так.
00:01:49Вместо этого мы можем сделать полноэкранный скриншот и сэкономить все эти токены.
00:01:53Чтобы решить эту проблему,
00:01:54я использовал скрипт,
00:01:55который использует различные веб-инструменты для создания полных скриншотов.
00:01:57Я также добавил инструкции по использованию этого скрипта в пользовательскую команду с косой чертой в моём проекте.
00:02:02Теперь,
00:02:02когда я использую эту команду для тестирования целевой страницы,
00:02:05она распознаёт,
00:02:06что это полноэкранный тест на основе включённых мной инструкций,
00:02:09и использует скрипт напрямую вместо обычного пошагового метода.
00:02:13Благодаря этому тест происходит значительно быстрее и имеет такую же точность.
00:02:17Вторая проблема,
00:02:18с которой я столкнулся,
00:02:19возникала,
00:02:19когда эти инструменты MCP пытались загрузить огромное количество контента сразу для простой задачи.
00:02:24Вместо загрузки определённых блоков он часто загружает весь HTML в главном теге,
00:02:28что содержит огромное количество токенов даже когда это не необходимо.
00:02:32Это потребляет большую часть контекстного окна,
00:02:34и даже самые простые задачи могут существенно его раздуть.
00:02:37Чтобы решить это,
00:02:38я добавил инструкции в файл Claude.md о правильном управлении контекстом при использовании расширения Claude для Chrome.
00:02:44Таким образом,
00:02:45любое извлечение данных строго ограничено и не раздувает контекст ненужной информацией.
00:02:50Ещё одна проблема в том,
00:02:51что Claude теряет много времени,
00:02:52когда встречает веб-сайты с нежелательными всплывающими окнами,
00:02:55такими как уведомления о файлах cookie и подобные подсказки.
00:02:58Чтобы избавиться от них,
00:02:59он использует те же последовательности скриншотов и прокрутки.
00:03:01Но это неправильно.
00:03:02Вместо того чтобы позволить Claude потреблять ненужные токены и время,
00:03:05мы можем использовать другие способы для обработки этих всплывающих окон.
00:03:08В качестве альтернативы я создал скрипт,
00:03:10который включает наиболее распространённые селекторы кнопок и паттерны для закрытия баннеров с файлами cookie.
00:03:15Он находит эти селекторы в коде и выполняет функции для автоматического закрытия всплывающих окон.
00:03:19Я также добавил инструкции в файл Claude.md,
00:03:21чтобы она запускала этот скрипт первым делом перед переходом к основному контенту.
00:03:25Теперь,
00:03:26когда я прошу Claude перейти на веб-сайт,
00:03:28она сначала следует инструкциям в Claude.md и выполняет этот JavaScript.
00:03:32Это автоматически закрывает баннеры с файлами cookie,
00:03:35позволяя Claude продолжить работу с основным контентом без потери токенов и выполнения ненужных действий.
00:03:40По соображениям безопасности Claude не может выполнять захват или проходить аутентификацию от вашего имени.
00:03:46Поэтому,
00:03:47если вы столкнётесь с веб-сайтом,
00:03:48на котором она есть,
00:03:49Claude не может завершить этот процесс за вас.
00:03:51Это нужно решать самостоятельно.
00:03:53Когда вы работаете с веб-сайтом,
00:03:54требующим входа или проверки CAPTCHA,
00:03:56убедитесь,
00:03:57что вы уже прошли аутентификацию перед тем,
00:03:59как дать Claude задачу.
00:04:00Так она не будет заблокирована и не потратит время впустую.
00:04:02Итак, это были основные проблемы, которые я смог решить.
00:04:05Но чтобы правильно использовать её для тестирования,
00:04:07вам на самом деле нужен правильный рабочий процесс для проверки любого приложения.
00:04:10Но прежде чем мы к этому приступим,
00:04:11я хочу немного поговорить о том,
00:04:13почему я предпочитаю интеграцию Claude с Chrome Puppeteer.
00:04:16Это в основном потому,
00:04:17что это собственный инструмент,
00:04:18разработанный самими разработчиками Claude Code,
00:04:20и он предоставляет гораздо лучшую интеграцию с улучшенным управлением и функциями.
00:04:23Эти MCP ориентированы на тестирование в отдельной специализированной среде,
00:04:27которая не сохраняет сессии.
00:04:29Их часто сложно устанавливать,
00:04:30и они загромождают папку вашего проекта всеми скриншотами.
00:04:33С другой стороны,
00:04:34с этой новой интеграцией Chrome,
00:04:35Claude может взаимодействовать с вашими авторизованными учётными записями.
00:04:38Она может взаимодействовать со сервисами вроде Google Docs и Google Sheets.
00:04:42Она даже может сохранять всю информацию о сессии и использовать её для выполнения задач ещё лучше.
00:04:46Прежде чем переходить к рабочему процессу,
00:04:48я хочу отметить,
00:04:49что интеграция с браузером требует много контекста,
00:04:51потому что это более ресурсоёмко,
00:04:53чем обычные вызовы инструментов.
00:04:54Они даже упомянули об этом в одном из своих блогов.
00:04:56Поэтому вам нужно следить за автоматической компактизацией при работе с Claude Code.
00:05:00Кроме того,
00:05:01так как это расширение Chrome,
00:05:02оно работает только с Chrome.
00:05:04Я ожидал,
00:05:04что оно будет работать с любым браузером на основе Chromium,
00:05:06но этого не происходит.
00:05:07И мы не можем с этим ничего поделать.
00:05:08А для тех из нас,
00:05:09кто использует несколько профилей Chrome,
00:05:11это будет немного более раздражающим,
00:05:12потому что он постоянно открывает неправильные профили.
00:05:15И я действительно надеюсь,
00:05:16что они скоро исправят эту ошибку.
00:05:17Со всеми исправлениями,
00:05:18которые я упомянул ранее,
00:05:19и интеграцией Claude с Chrome,
00:05:21мой рабочий процесс разработки значительно улучшился.
00:05:24Однако расширения Chrome имеют ограничение в Manifest V3.
00:05:27Они могут быть заблокированы, если работают слишком долго.
00:05:29Многие люди просят разработчиков Claude Code исправить это также в их репозитории.
00:05:33Если вы выполняете сквозное тестирование вашего веб-приложения от начала до конца,
00:05:37это может привести к блокировке сессии Chrome,
00:05:40и Claude неожиданно остановится.
00:05:41Затем вам пришлось бы пересказать задачу,
00:05:43чтобы перезапустить выполнение.
00:05:44Это может быть особенно проблематично,
00:05:46если вы назначаете Claude длительную задачу и отходите от компьютера,
00:05:49только чтобы вернуться и обнаружить,
00:05:51что задача выполнена только частично.
00:05:53Именно по этой причине вместо сквозного тестирования я создал несколько файлов тестов,
00:05:57охватывающих различные аспекты приложения.
00:06:00Каждый файл содержит подробную информацию об уровнях приоритета,
00:06:03предусловиях,
00:06:04этапах тестирования и ожидаемых результатах.
00:06:06Есть также руководство по тестированию о том,
00:06:08как проводить эти тесты,
00:06:09а также справка по документации тестов.
00:06:11Как известно,
00:06:11Claude имеет ограниченное контекстное окно,
00:06:13и когда это ограничение достигается,
00:06:15инструкции и прогресс могут быть потеряны.
00:06:16По этой причине я добавил инструкции в файл Claude.md,
00:06:19которые говорят Claude создавать подробный отчёт о результатах тестирования после проверки каждого файла.
00:06:24Таким образом,
00:06:25даже если вам нужно компактировать из-за того,
00:06:26что инструменты браузера потребляют много контекста,
00:06:28Claude может сохранять осведомлённость о том,
00:06:30что уже было протестировано и что ещё нужно протестировать,
00:06:32обращаясь к этим файлам прогресса.
00:06:34Перед началом тестирования рекомендуется выполнить компактизацию,
00:06:37так как тестирование приложения в Chrome значительно потребляет контекстное окно.
00:06:42Чтобы оптимизировать процесс тестирования,
00:06:44я создал дополнительную пользовательскую команду слэша.
00:06:46Эта команда проводит тестирование пошагово и создаёт документацию в правильной структуре после тестирования согласно инструкциям Claude.md.
00:06:54Я также добавил инструкции для контроля контекста перед началом любой задачи,
00:06:57чтобы во время тестирования не потерять контекст на середине процесса и выполнить компактизацию во время работы.
00:07:02Таким образом,
00:07:03когда вы начинаете процесс тестирования,
00:07:05вы просто используете команду слэша и указываете файл,
00:07:07с которого хотите начать,
00:07:08а Claude начинает тестирование,
00:07:10следуя точным инструкциям.
00:07:11Он самостоятельно определяет проблемы и использует браузер и все необходимые инструменты для тестирования.
00:07:16Он автоматически взаимодействует с элементами и способен обнаруживать ошибки,
00:07:19которые обычно не видны,
00:07:21но могут быть выявлены при анализе вывода консоли.
00:07:23Он также документирует результаты тестирования в конце согласно инструкциям.
00:07:26Таким образом,
00:07:26весь процесс тестирования значительно улучшается,
00:07:29так как Claude имеет доступ к логам консоли и может выполнять автоматизированное тестирование в браузере намного эффективнее,
00:07:34чем когда-либо.
00:07:35На этом мы завершаем видео.
00:07:37Если вы хотите поддержать канал и помочь нам продолжать создавать подобные видео,
00:07:41вы можете сделать это,
00:07:42используя кнопку Super Thanks ниже.
00:07:43Как всегда,
00:07:44спасибо за просмотр,
00:07:45и до встречи в следующем видео.