Большой интерфейсный артефакт Кукловод Amway

Node.js внешний интерфейс контрольная работа Google Chrome

Puppeteer(китайский перевод «Марионетка») — это официальный безголовый инструмент Chrome команды Google Chrome.Nodeбиблиотека, предоставляющая высокоуровневый API для управленияБезголовая версия по протоколу DevToolsХром . Также можно настроить для использования полного (не безголового) Chrome.ChromeОн всегда был лидером в мире браузеров, поэтому Chrome Headless определенно станет веб-приложением.автоматизированный тестэталон отрасли. использоватьPuppeteer, что эквивалентно одновременному использованию операционных возможностей Linux и Chrome, и существует множество сценариев применения. Создание этого хранилища состоит в том, чтобы попробовать различные броски и использовать GoogleChrome Puppeteer, чтобы узнать больше интересных операций, развлекаясь.

大前端神器安利之 PuppeteerБольшой интерфейсный артефакт Кукловод Amway

Что может Кукловод

Большинство вещей, которые вы можете сделать вручную в браузере, можно использоватьPuppeteerЗаканчивать! Вот несколько примеров, с которых вы можете начать:

  • Создавайте скриншоты и PDF-файлы страниц.
  • Просканируйте SPA и сгенерируйте предварительно обработанный контент (также известный как «SSR»).
  • Возьмите нужный контент с веб-сайта.
  • Автоматическая отправка форм, тестирование пользовательского интерфейса, ввод с клавиатуры и т. д.
  • Создайте современную автоматизированную тестовую среду. Запускайте тесты непосредственно в последней версии Chrome, используя новейшие функции JavaScript и браузера.
  • Захватите временную шкалу вашего веб-сайта, чтобы помочь диагностировать проблемы с производительностью.

Начало работы с Кукловодом

хочу использовать в проектеPuppeteer, просто запустите следующую команду для установки, однако следует отметить, что:PuppeteerТребуется по крайней мере Node v6.4.0, чтобы использоватьasync / await, поддерживается только в Node v7.6.0 или выше; также установитеPuppeteer, будет загружена последняя версияChromium(~71 МБ Mac, ~ 90 МБ Linux, ~ 110 МБ Win), гарантированно работает с API.

yarn add puppeteer
# or "npm i puppeteer"

как использоватьPuppeteer, что очень просто; следующий простой пример делает это: переход кhttps://example.comи сохраните скриншот как example.png;

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

Дополнительные примеры могут относиться кGoogleChrome Puppeteer Usage; в слегка знакомомAPI-интерфейсы кукловодаПосле этого вы можете использовать ее для манипулирования браузером, чтобы он делал за вас то, что вы хотите, но стоит упомянуть, что она все еще находится в стадии разработки. Интерфейс также может незначительно измениться.Toss Puppeteer, который представляет собой репозиторий, созданный на Github для размещения всевозможных сообщений о попытках использовать GoogleChrome Puppeteer, а именно:

Микро Примечание:Ввиду неудобства отправки личной информации, отправка git была настроена на игнорирование личных файлов конфигурации; если вы хотите запустить следующие демонстрации, вам нужно вручнуюsrc/configкаталог, создатьsecret.js, в видеsecretSample.jsпоказано (🍀️).

Автоматически захватывать указанные статьи веб-сайта и делиться ими с указанным веб-сайтом.

Этот бросок основан наPuppeteerПросканируйте веб-ссылку (особенно вДжефф Джейд.com/categories/…Случайный из числа), нажмите его наТехнические заголовкиЦель: попрактиковаться в предварительном использованииPuppeteer.

Команда Run 

git clone https://github.com/nicejade/toss-puppeteer
npm i (更推荐 yarn)
yarn run shareBlogToBlogread

Подробные шаги

  • [Х] открытьЗаголовки технических новостей — Страница отправки, в то же время кWanqing Youcao Xuan-Front-EndСлучайным образом возьмите статью и получите заголовок, адрес и описание.
  • [X] Имитация действий человека, нажмите кнопку «Войти через Weibo» (она перейдет на страницу входа в Weibo);
  • [X] Имитация действий человека, введите имя пользователя и пароль и «нажмите» кнопку входа в систему, чтобы завершить вход (повторно перейдет кЗаголовки технических новостей — Страница отправки);
  • [X] Смоделируйте человеческую операцию, заполните заголовок, адрес и описание, полученные ранее, и «щелкните», чтобы отправить, и на этом закончите.
  • [ ] Разверните его на сервере, настройте задачи, выполняйте их через равные промежутки времени и выполняйте автоматический обмен вовремя.

Отправить 🈯️ фиксированную ссылку на указанный веб-сайт

В некоторых потребностях в обмене иногда возникает такая потребность: обмен указанной ссылкой (URL) на указанный веб-сайт; по сравнению с вышеуказанной функцией, для этого требуется пропустить некоторые шаги. Если вы готовы бросить, вы также можете отправить на несколько разных целевых веб-сайтов, просто добавьте настройку целевого адреса, метод входа и информацию для отправки формы. Конечно, для сайтов со сложной аутентификацией, включающих логины, требуется дополнительная обработка. только здесьТехнические заголовкиПосле настройки выполните следующую команду: (Update@17-12-17)

Url=https://jeffjade.com/2017/09/28/127-nice-front-end-tutorial/ yarn run shareUrlToTheSite
url=https://jeffjade.com/2017/09/28/127-nice-front-end-tutorial/ yarn run shareUrlToTheSite

Захватите указанные страницы веб-сайта и распечатайте их в формате PDF

Этот бросок основан наPuppeteerПросканировать указанную страницу веб-сайта (примерjeffjade.com/Все статьи) и распечатать в формате PDF; цель: дальнейшее ознакомление с приложениемPuppeteer.

Команда Run 

git clone https://github.com/nicejade/toss-puppeteer
npm i (更推荐 yarn)
npm run printWebsiteToPDF

Подробные шаги

  • [Х] открытьjeffjade.com/archivesстраницы, чтобы получить общее количество страниц в записи блога;
  • [Х] использоватьaxios & cheerioПросканируйте разбиение на страницы и проанализируйте его, чтобы получить все ссылки на статьи веб-сайта и сохранить их в данных;
  • [X] пройтись по всем ссылкам (с помощьюasyncуправление параллелизмом), после визуализации страницы распечатайте ее в формате PDF и сохраните.

使用 Puppeteer 抓取指定网站页面并将其打印成 PDFиспользовать Puppeteer сканирует указанные страницы веб-сайта и распечатывает их в формате PDF.

Инициализация в один кликGitmentСистема комментариев

справочная информация,

ранее вAbout MeЕсть такой вздох:

Шифу, это правда: независимость принадлежит самому себе. Блог с самого началаскажи больше, после закрытия службы 1.06.17 перешел на войнуОблачная ветка Netease; никогда не думал, что он тоже закрылся 1 августа. Просто переключитесь на другую странуDisqus, но эта стена так мощна, что хотя стена дома и опрокинута, все равно к ней нелегко добраться;Gitment;😂 Слишком много слов заставляет меня плакать, и я испытываю много эмоций - то, что независимо, это мое, и когда у меня позже появляется свободное время, я все равно делаю это сам 😪, Файтинг.

это упомянулGitmentЭто система комментариев, основанная на GitHub Issues; некоторые из ее собственных характеристик дают много преимуществ для ведения блогов по темам, связанным с «программой». Итак, личный блогВанцин Юкао СюаньПросто используйте эту систему комментариев, однако она также имеет некоторые проблемы, такие как необходимость активной инициализации комментариев,initialize-your-comments, конечно, вы также можете использовать некоторые инструменты, чтобы помочь выполнить ✅. для уже написанного из 140+ постов в блогеВанцин Юкао Сюань, что действительно необходимо, поэтому здесь речь идет именно об использованииPuppeteerОдин клик для инициализацииGitmentСистема комментариев (следует отметить, что структура каждой системы отличается, это только для справки, но не может быть использовано напрямую).

Команда Run 

git clone https://github.com/nicejade/toss-puppeteer
npm i (更推荐 yarn)
npm run initializeGitment

Подробные шаги

  • [Х] открытьjeffjade.com/archivesстраницы, чтобы получить общее количество страниц в записи блога;
  • [Х] использоватьaxios & cheerioПросканируйте разбиение на страницы и проанализируйте его, чтобы получить все ссылки на статьи веб-сайта и сохранить их в данных;
  • [X] Открыть адрес входа на Github:github.com/login, введите имя пользователя и пароль для завершения входа в систему;
  • [X] Перемещайтесь по сохраненным ссылкам и открывайте их в разных окнах (с помощьюasyncпараллелизм управления);
  • [X] Подождите, пока не отобразится и не будет нажата кнопка инициализации (на самом деле сначала нужно активировать ссылку для входа в Github на странице блога);

一键初始化 Gitment 评论系统Инициализация в один клик Система комментариев Gitment

Размещенные комментарии блога, доступные по адресуjadeblog-backups#issuesПосмотреть ;(На самом деле, используяGitmentВ это время срабатывает кнопка инициализации, а инициализация толком не завершается.Предполагается, что это может быть проблема с самим плагином, или что-то еще, что требует доработки) (Update@17-11- 23).

использоватьPuppeteer TraceДелайте анализ производительности

можно использоватьtracing.startиtracing.stopСоздайте файл трассировки, который можно открыть в Chrome Dev Tools или Timeline Viewer (каждый браузер может одновременно иметь только одну активную трассировку), см.Puppeteer Trace Api.

await page.tracing.start({path: 'trace.json'})
await page.goto('https://www.google.com')
await page.tracing.stop()

Команда Run 

git clone https://github.com/nicejade/toss-puppeteer
npm i (更推荐 yarn)
npm run performanceAnalysis

一键初始化 Gitment 评论系统Инициализация в один клик Система комментариев Gitment

Информацию о производительности/временной шкале Chrome и о том, как ее использовать, см.Инструменты разработчика Chrome, или перейти кChrome Tutorial, есть более подробные справочные материалы, которые постоянно дополняются и ремонтируются.

Как упоминалось ранее, использование Puppeteer эквивалентно одновременному использованию операционных возможностей Linux и Chrome, и существует множество сценариев применения; вышеперечисленное просто написано и воспроизводится в свободное время, а то, что вы действительно можете сделать, будет следовать вы. Воображение распространяется и увеличивается, такие как продвинутые поисковые роботы, внешний мониторинг и т. д., для внешнего мониторинга можно упомянуть, что его можно узнать иззахватить веб-страницу и сравнить изменение домена с помощью phantomjs ♨Подобное мышление в сочетании с Puppeteer, MongoDB и другими инструментами реализует набор фронтенд-мониторинга страниц фронтенда, осуществляет регулярную инспекцию, а также помогает в тестировании, в этом плане он может больше, чем Sentry, реализация которого необходимо продолжать изучать и практиковать.

Что нужно добавить, так это то, что название этой статьи; слово «большой» добавлено не просто так; это не совсем потому, что «front-end разработчики» берут на себя все более важную работу в смежных отраслях; и сама она должна продолжать учиться и обогащать базу знаний, также постепенно увеличивается сложность вступительного порога и так далее, вУчебное пособие по внешним ресурсам для продвижения в ногу со временемВ статье это видно; к сожалению, в цепи презрения того же рода всегда есть какие-то отдельные "коллаборационисты", которым не хватает должного уважения к людям только из-за разных ролей и разделения труда в их работе; я не думайте, что я фронтенд-разработчик, когда я сталкиваюсь с таким злом, я не могу не быть рыцарем в своих костях, что можно сказать: умна ли настройка персонажа или нет, соответствующие практики сами над собой посмеяться могут, а откуда посторонние легкие обязанности и болтовня? Г-н Ван Сяобо в своем эссеО стилеВ конце было написано: "Вы можете быть скептиком только в глупых вещах"; слово "большой", вот и все.

@2017-12-17 в Шэньчжэне, Наньшань Последнее изменение: 2017-12-17

Категории