{"draftJsState":{"blocks":[{"data":{"image":{"id":"61917efcbeb9ee14c18b0575"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ef5h"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"8v263"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иногда нужно посетить сайт программным путем. Это может понадобиться по разным причинам. Вот некоторые из них:","type":"unstyled","key":"69bi4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проведение быстрого и точного тестирования поведения сайта без его обновления и проверки вручную. Вы можете автоматизировать взаимодействие с ним, например нажатие кнопок, отправку форм, тестирование пользовательского интерфейса и т. д.","type":"ordered-list-item","key":"f56f9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сбор рендеринга на стороне сервера.","type":"ordered-list-item","key":"66qgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Генерирование скриншотов сайта.","type":"ordered-list-item","key":"k7sj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тестирование расширений Chrome.","type":"ordered-list-item","key":"k15q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Интеграция этого процесса в конвейер тестирования. Вы можете обойтись использованием фреймворков для тестирования, таких как Selenium и Cypress.","type":"ordered-list-item","key":"23pde"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получение более тщательного контроля над браузером программным путем, например принудительное использование GPU для графических вычислений, включение различных рендереров, черновых расширений и т. д.","type":"ordered-list-item","key":"4k07s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание своих инструментов на основе контента пользовательского интерфейса сайта.","type":"ordered-list-item","key":"1f2qq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вам понадобится настроить три основных компонента:","type":"unstyled","key":"fnhct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Puppeteer;","type":"unordered-list-item","key":"49tc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Docker-контейнер (не обязательно);","type":"unordered-list-item","key":"5m79j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"сайт, который вы хотите посетить.","type":"unordered-list-item","key":"bg025"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приведенный ниже код протестирован на Ubuntu 20.04 с графическим процессором Nvidia Tesla.","type":"unstyled","key":"f24ie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Puppeteer","type":"header-three","key":"o9r0"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":17,"offset":118},{"key":2,"length":19,"offset":182}],"inlineStyleRanges":[{"length":286,"offset":0,"style":"ITALIC"}],"text":"Puppeteer — это библиотека Node, которая предоставляет высокоуровневый API для управления Chrome или Chromium через DevTools Protocol. По умолчанию библиотека Puppeteer работает в “безголовом” режиме, но может быть настроена для запуска полного (не “безголового”) Chrome или Chromium.","type":"blockquote","key":"3uc5n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 1-й: подключение Puppeteer и определение необходимых аргументов","type":"header-three","key":"3988i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Убедитесь, что вы используете опцию headless (“безголовый” режим). Обратите внимание на то, что на Mac в настоящее время, даже в режиме headless, после запуска экземпляра происходит его быстрая блокировка, поэтому производительность на этой платформе не всегда высокая.","type":"unstyled","key":"495ha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--headless","type":"unstyled","key":"cc0jl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 2-й: выбор GL, который должен использовать процесс GPU","type":"header-three","key":"3sv8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Варианты следующие.","type":"unstyled","key":"8kica"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"desktop: любой OpenGL, установленный пользователем (Linux и Mac по умолчанию);","type":"unordered-list-item","key":"fgmmo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"egl: любой EGL/GLES2, установленный пользователем (по умолчанию в Windows — фактически ANGLE);","type":"unordered-list-item","key":"a3gpg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"swiftshader: программный рендерер SwiftShader.","type":"unordered-list-item","key":"b3i4l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--use-gl=egl","type":"unstyled","key":"4ohem"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":5,"offset":0}],"inlineStyleRanges":[],"text":"Здесь описаны все возможные опции.","type":"unstyled","key":"depnm"},{"data":{"image":{"id":"61917ed86b11986a42cdc9ca"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"21roh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 3-й: перенаправление журналов консоли из веб-приложения на стандартный вывод puppeteer","type":"header-three","key":"bu4pi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как показано ниже, объект страницы может выполнять перенаправление, подключаясь к консоли, потоку ошибок страницы и т. д.","type":"unstyled","key":"6cdql"},{"data":{"image":{"id":"61917ed89380933c073b3b9a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8kiic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание на наличие набора аргументов по умолчанию. К ним можно получить доступ с помощью следующей функции. Обязательно проверьте их и переопределите, если что-то не подходит для вашей настройки.","type":"unstyled","key":"elgaa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"puppeteer.defaultArgs()","type":"unstyled","key":"3s568"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 4-й: запуск Puppeteer","type":"header-three","key":"b4qv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":37,"style":"ITALIC"}],"text":"Запустите Puppeteer с помощью функции запуска (launch) и передайте аргументы. Возвращаемый объект — это дескриптор браузера.","type":"unstyled","key":"84hiv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используя дескриптор браузера, вы можете начать взаимодействие с сайтом. Сделайте несколько обычных шагов:","type":"unstyled","key":"fcf3c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":53,"style":"ITALIC"}],"text":"откройте новую страницу в браузере с помощью функции newpage;","type":"unordered-list-item","key":"44k6q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":49,"style":"ITALIC"}],"text":"получите новый объект page, который имеет функцию goto для посещения сайта.","type":"unordered-list-item","key":"6h6d1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":100,"style":"ITALIC"}],"text":"Можно осуществлять асинхронное взаимодействие, используя функции на дескрипторе страницы, такие как waitforNavigation, которые ждут, пока страница обновится.","type":"unstyled","key":"7e05e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 5-й: закрытие браузера","type":"header-three","key":"7l3nc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":69,"style":"ITALIC"}],"text":"После завершения работы в браузере не забудьте закрыть его с помощью browser.close().","type":"unstyled","key":"9ck8v"},{"data":{"image":{"id":"61917ed86b11986a42cdc9cb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fvsps"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Docker","type":"header-three","key":"b2ntd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Важным условием при установке Docker является передача драйверов Nvidia в контейнер Docker. Один из самых простых способов — это основать контейнер на Nvidia open GL image, например:","type":"unstyled","key":"bi3dr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"nvidia/opengl:1.2-glvnd-devel-ubuntu20.04","type":"unstyled","key":"4ec4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полный код приведен ниже. Обязательно установите все зависимости Chrome. Вам не нужно устанавливать Chrome отдельно, на всю систему, так как пакет puppeteer загружает совместимый двоичный файл Chrome. Однако проще получить все зависимости, установив Chrome. Кроме того, необходимо установить любые дополнительные зависимости, которые могут отличаться от приведенных ниже. Здесь установлены основные инструменты Unix, шрифты, node, npm и т. д.","type":"unstyled","key":"4gh4h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"FROM nvidia/opengl:1.2-glvnd-devel-ubuntu20.04\n\nRUN apt-get update\nRUN apt-get -y install curl gnupg wget\nRUN curl -sL https://deb.nodesource.com/setup_14.x | bash -\nRUN apt-get -y install nodejs\n\nARG DEBIAN_FRONTEND=noninteractive\nENV TZ=Europe/Moscow\nRUN apt-get install -y tzdata\n\nRUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -\nRUN sh -c 'echo \"deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main\" >> /etc/apt/sources.list.d/google.list'\nRUN apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 \\\n --no-install-recommends\nRUN apt-get install -y vim\n\nENV NVIDIA_VISIBLE_DEVICES all\nENV NVIDIA_DRIVER_CAPABILITIES all\n\nRUN apt-get install -y --no-install-recommends \\\n git \\\n ca-certificates \\\n build-essential \\\n g++ \\\n libxinerama-dev \\\n libxext-dev \\\n libxrandr-dev \\\n libxi-dev \\\n libxcursor-dev \\\n libxxf86vm-dev \\\n libvulkan-dev &&\n rm -rf /var/lib/apt/lists/*\n\nRUN apt-get update && apt-get install -y apt-utils && apt-get install -y curl\n\nRUN apt-get update &&\n apt-get install -y wget gnupg ca-certificates &&\n wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - &&\n sh -c 'echo \"deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main\" >> /etc/apt/sources.list.d/google.list' &&\n apt-get update &&\n apt-get install -y google-chrome-stable &&\n rm -rf /var/lib/apt/lists/* &&\n wget --quiet https://raw.githubusercontent.com/vishnubob/wait-for-it/master/wait-for-it.sh -O /usr/sbin/wait-for-it.sh &&\n chmod +x /usr/sbin/wait-for-it.sh\n\nRUN apt-get update &&\n apt-get -y --no-install-recommends install ca-certificates \\\n libcanberra-gtk-module libexif12 pulseaudio attr \\\n fonts-dejavu-core fonts-freefont-ttf fonts-guru-extra \\\n fonts-kacst fonts-kacst-one fonts-khmeros-core fonts-lao \\\n fonts-liberation fonts-lklug-sinhala fonts-lohit-guru \\\n fonts-nanum fonts-opensymbol fonts-sil-abyssinica \\\n fonts-sil-padauk fonts-symbola fonts-takao-pgothic \\\n fonts-tibetan-machine fonts-tlwg-garuda-ttf \\\n fonts-tlwg-kinnari-ttf fonts-tlwg-laksaman-ttf \\\n fonts-tlwg-loma-ttf fonts-tlwg-mono-ttf \\\n fonts-tlwg-norasi-ttf fonts-tlwg-purisa-ttf \\\n fonts-tlwg-sawasdee-ttf fonts-tlwg-typewriter-ttf \\\n fonts-tlwg-typist-ttf fonts-tlwg-typo-ttf \\\n fonts-tlwg-umpush-ttf fonts-tlwg-waree-ttf \\\n ttf-bitstream-vera ttf-dejavu-core ttf-ubuntu-font-family \\\n fonts-arphic-ukai fonts-arphic-uming \\\n fonts-ipafont-mincho fonts-ipafont-gothic \\\n fonts-unfonts-core &&\n rm -rf -- /var/lib/apt/lists /tmp/*.deb\n\nRUN echo 'kernel.unprivileged_userns_clone=1' >/etc/sysctl.d/userns.conf\n\nRUN adduser --disabled-password --gecos '' ubuntu\nUSER ubuntu\n\nCMD tail -f /dev/null","type":"unstyled","key":"jipg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фронтальный сервер","type":"header-three","key":"f65dt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После настройки Puppeteer и Docker, можно заходить на любой сайт. Это может быть ваш сайт с отображением каких-либо элементов пользовательского интерфейса. Теперь у вас есть возможность посетить сайт и сделать скриншот, не выходя из своего JavaScript-скрипта :)","type":"unstyled","key":"9emn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приведенный ниже HTML создает простую сцену с помощью Three JS и отображает некоторые шейдеры.","type":"unstyled","key":"56a3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n \n \n\n\n\n

\n \n\n \n\n \n \n\n\n","type":"unstyled","key":"bciob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код для посещения сайта после его обслуживания на локальном сервере очень прост:","type":"unstyled","key":"c072e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const page = await browser.newPage(); \nawait page.goto(pagePath); \nawait page.screenshot({path: outputName + '.png'}); \nawait page.pdf({path: outputName + '.pdf'})","type":"unstyled","key":"aunij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данном примере можно добиться хорошей производительности с 64 одновременными экземплярами puppeteer, работающими на GPU и захватывающими контент сайта. Возможно, есть дополнительные оптимизации в опциях docker и puppeteer для ускорения рендеринга, но они могут быть слишком специфичны для конкретного контента.","type":"unstyled","key":"9dq35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"cae3b"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":39,"offset":0}],"inlineStyleRanges":[],"text":"Мониторинг сайта: просто, но эффективно","type":"unordered-list-item","key":"5a00g"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":59,"offset":0}],"inlineStyleRanges":[],"text":"Три способа захвата скриншотов с помощью Selenium WebDriver","type":"unordered-list-item","key":"9t4ho"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":52,"offset":0}],"inlineStyleRanges":[],"text":"Веб-скрапинг для веб-разработчиков: краткие сведения","type":"unordered-list-item","key":"69fq9"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":8,"offset":14},{"key":8,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"7qa5p"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":8,"offset":15},{"key":10,"length":42,"offset":25}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Antriani: Visit Websites Without Opening The Browser","type":"unstyled","key":"adp3r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"NWm7AmZn1EjpNyfqM99J"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/14508/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://chromedevtools.github.io/devtools-protocol/","url":"https://chromedevtools.github.io/devtools-protocol/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://developers.google.com/web/updates/2017/04/headless-chrome","url":"https://developers.google.com/web/updates/2017/04/headless-chrome"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://peter.sh/experiments/chromium-command-line-switches/","url":"https://peter.sh/experiments/chromium-command-line-switches/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://nuancesprog.ru/p/13188/","url":"https://nuancesprog.ru/p/13188/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://nuancesprog.ru/p/11840/","url":"https://nuancesprog.ru/p/11840/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://nuancesprog.ru/p/3465/","url":"https://nuancesprog.ru/p/3465/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://medium.com/@antriani.s","url":"https://medium.com/@antriani.s"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://javascript.plainenglish.io/visit-websites-without-opening-the-browser-9ee3cf18abdd","url":"https://javascript.plainenglish.io/visit-websites-without-opening-the-browser-9ee3cf18abdd"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}