Автоматизация задач браузера
Протокол связи - это система правил, которая позволяет двум или более объектам системы связи передавать информацию через любые вариации физической величины. Протокол определяет правила, синтаксис, семантику и синхронизацию связи, а также возможные методы устранения ошибок.
Что это ?
Инструменты разработчика Chrome (CDP) позволяют нам взаимодействовать с браузерами Chromium и Chrome и помогают выполнять
- Автоматизация тестирования
- Отслеживание и устранение неполадок
- Профилирование и инструменты
Многие библиотеки и расширения браузера используют протокол для управления различными действиями в браузере. Например, Puppeteer предоставляет API более высокого уровня поверх CDP.
Начиная
В вашем проекте узла или глобально давайте установим chrome-remote-interface один из множества доступных сторонних клиентов.
npm i chrome-remote-interface
Эта библиотека помогает нам взаимодействовать с Chrome или одним из поддерживаемых браузеров, работающих с известным портом отладки. По умолчанию: localhost: 9222.
Чтобы запустить Chrome с портом отладки на Mac с профилем удаленного пользователя,
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=remote-profile
Как только вы это сделаете, вы должны увидеть, что открылся новый экземпляр chrome, а в оболочке вы увидите следующее
Давай сделаем трассировку
Предположим, вы хотите сбросить все запросы, которые выполняются при переходе по URL-адресу.
Когда вы выполняете этот код на запущенном Chrome, вы должны увидеть, что страница загружается.
и на консоли вы должны увидеть, что все URL-адреса запросов печатаются
Теперь, чтобы понять, что здесь происходит
- Сначала мы устанавливаем соединение с хромом, используя порт отладки.
- Протокол определяет ряд доменов, таких как Сеть, Страница, Отладчик и т. Д., И каждый из них предоставляет набор методов, которые можно использовать для отслеживания действий, относящихся к этому домену.
- Мы включаем каждый из этих доменов и обеспечиваем возможность отслеживания действий.
- Зарегистрируйте обратный звонок на интересующее нас событие
Network.requestWillBeSent((params) => {
console.log(params.request.url);
});
- Затем мы переходим к URL-адресу, по которому хотим провести трассировку.
Чтобы сделать его немного интереснее, предположим, что вы хотите создать служебную программу, которая будет подсчитывать все изображения, загружаемые как часть главной страницы вашего веб-сайта. Возможно, вы хотите ограничить количество изображений, которые отображаются как часть вашей домашней страницы, и хотите отслеживать их во время процесса CI. Если количество изображений превышает количество, вы хотите уведомить разработчиков.
Теперь, когда вы запустите этот код, вы увидите следующий результат в консоли.
Здесь мы получаем количество ответов, сгруппированных по их типу, а затем их подсчитываем. Вы можете интегрировать этот сценарий в свой конвейер интеграционного тестирования, чтобы гарантировать, что количество изображений находится в пределах вашего бюджета.
Такие инструменты, как lighthouse и Tracerbench, используют CDP для сбора большинства своих показателей, таких как время пользователя, размер ответа и т. Д., И позволяют делать следующее:
- Выполнить аудит
- Тесты производительности
- Лучшие практики и отчеты
