Открыть список
Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

JavaScript, Node, Puppeteer: автоматизация Chrome и веб-скрапинг

Блог компании RUVDS.comРазработка веб-сайтовJavaScriptGoogle ChromeNode.JS
Перевод
Библиотека puppeteer для Node.js позволяет автоматизировать работу с браузером Google Chrome. В частности, с помощью puppeteer можно создавать программы для автоматического сбора данных с веб-сайтов, так называемые веб-скраперы, имитирующие действия обычного пользователя. В подобных сценариях может применяться браузер без пользовательского интерфейса, так называемый «Headless Chrome». Используя puppeteer, можно управлять и браузером, который запущен в обычном режиме, что особенно полезно при отладке программ.

image

Сегодня мы поговорим о создании веб-скрапера на базе Node.js и puppeteer. Автор материала стремился к тому, чтобы статья была интересна как можно более широкой аудитории программистов, поэтому пользу из него извлекут как те веб-разработчики, которые уже имеют некоторый опыт работы с puppeteer, так и те, которые впервые сталкиваются с таким понятием, как «Headless Chrome».
Читать дальше →
Всего голосов 16: ↑16 и ↓0 +16
Просмотры75.7K
Комментарии 13

Jest и Puppeteer: автоматизация тестирования веб-интерфейсов

Блог компании RUVDS.comРазработка веб-сайтовJavaScriptNode.JSТестирование веб-сервисов
Перевод
Эту статью написал программист из Италии Валентино Гаглиарди. Он говорит, что сразу после выхода Puppeteer его заинтересовала автоматизация тестирования веб-интерфейсов с использованием данной библиотеки и Jest. После этого он приступил к экспериментам.



Здесь речь пойдёт об основах работы с Puppeteer и Jest на примере тестирования веб-формы. Также тут будут рассмотрены особенности использования Chromium с пользовательским интерфейсом и без него, и некоторые полезные мелочи, касающиеся различных аспектов тестирования веб-страниц и организации рабочей среды. Валентино полагает, что, хотя Puppeteer — инструмент сравнительно новый и его API вполне может подвергаться изменениям, у него есть шанс занять достойное место в арсенале веб-разработчиков.
Читать дальше →
Всего голосов 20: ↑20 и ↓0 +20
Просмотры34.9K
Комментарии 8

«Блендер на 28 докладов, каждый из которых равен десяти статьям» — интервью с Программным комитетом HolyJS 2017 Moscow

Блог компании JUG Ru GroupJavaScriptNode.JSAngularReactJS

Для обычного пользователя программы, которые мы пишем — это магия. Фронт, бэк — неважно. Человек нажимает на кнопку в браузере, и вдруг случается чудо. Но мы-то знаем, что это не чудо, а результат упорной работы.


Когда приходишь на конференцию, кажется, что всё работает само собой. Всегда есть интересный доклад. В нём есть конкретные места, которые можно использовать в работе прямо сейчас, которые стоит обсудить с друзьями и коллегами или которые просто почему-то цепляют тебя лично.


Это происходит само собой, просто по статистике? Если набрать достаточное количество докладов, всё получится автомагически? Как бы не так. Всё подстроено. Как программу на JS проектируют архитекторы, так и за каждой конференцией стоит команда отличных инженеров, которые проектируют её специальным образом. Они проектируют не только структуру, но и вместе с докладчиками «отлаживают» каждый доклад, строчка за строчкой, раз за разом. Проводят кросс-ревью, оценку, починку багов. Пишутся специальные инструменты и выкладываются на GitHub. И так до тех пор, пока не скомпилируется хорошо работающая, безбажная конференция.


Наверное, каждый иногда хотел пообщаться с разработчиками тех инструментов, которыми мы все пользуемся. К примеру, кто хотел бы сказать пару ласковых создателям React или Node.js? А кто хотел бы узнать от них парочку тайн о внутренней кухне проекта?


Это интервью — с разработчиками конференции HolyJS 2017 Moscow, с её Программным комитетом. Мы будем обсуждать:


  • какие сложности возникают при разработке программы конференции и как их побеждают;
  • кто допущен к сакральному процессу отбора докладов и нужно ли для этого быть богом JavaScript;
  • совместима ли работа в ПК с обычной жизнью;
  • какие доклады стоит послушать и на какие ни в коем случае не стоит приходить хипстерам;
  • кучу рандомных интересных фактов.

Читать дальше →
Всего голосов 19: ↑19 и ↓0 +19
Просмотры3.3K
Комментарии 3

Дуглас Крокфорд, Азат Мардан, Виталий Фридман и все-все-все: анонс бесплатной YouTube-трансляция HolyJS 2017 Moscow

Блог компании JUG Ru GroupРазработка веб-сайтовJavaScriptNode.JS
Коротко о событии
Конференция: HolyJS 2017 Moscow
Дата: 10-11 декабря 2017 года
Бесплатная трансляция (только первый зал): страница трансляции на официальном сайте.


Любой JavaScript-разработчик однажды задается вопросом: на какую конференцию по JavaScript сходить? Интересные доклады послушать, людей посмотреть, себя показать. В 2016 году мы пошли по тому же пути и обнаружили, что в России ничего подходящего на эту тему нет. Всевозможные митапы по фронту — пожалуйста. Но ведь JS давно уже не только фронт. Короче, мы решили исправить эту несправедливость и создали главную и единственную в России JavaScript-конференцию, HolyJS. На Холи бывает не только фронт, но и бэкенд, десктоп, и даже работа с железом. Теперь нам всем есть куда ходить, но это не конец истории.


В JavaScript-мире есть важнейшая особенность, которая отличает его от миров типа Java и .NET: технологии и фреймворки развиваются стремительно. Не попавшие на конференцию люди оказываются в невыгодном положении — мало кому хочется смотреть записи, устаревшие на 4 месяца. Обычно есть несколько фундаментальных докладов, которыми можно гордиться и пересматривать еще пару лет, но большая часть материала интересна и полезна в моменте: посмотрел, послушал, пошел использовать на работе. Всё это останется за пэйволлом? А как же комьюнити и чувство локтя? Нет ли в этом чего-то неправильного?


Теперь трансляцию первого зала можно смотреть бесплатно, с нашего сайта и на YouTube. Это позволяет всем желающим присоединиться к конференции и провести на ней все два дня. Прийти вживую было бы круче, но на этой полномасштабной трансляции можно по-настоящему погрузиться в тему и ощутить атмосферу происходящего.

Читать дальше →
Всего голосов 22: ↑20 и ↓2 +18
Просмотры4K
Комментарии 3

Тестирование компонентов с Puppeteer и Jest

Тестирование IT-системJavaScript
Tutorial

На Хабре есть публикация, описывающая написание тестов с использованием Puppeteer и Jest. Рекомендую к ознакомлению, если вы ещё не знаете, что такое Puppeteer. В данной статье, на примере React-компонента, будет описываться способ тестирования вызовов callback-функций. Например, есть компонент с props onChange, и необходимо протестировать, что при некоторых действия пользователя будет вызвана callback-функция с ожидаемыми переданными параметрами. Для этого будет использоваться библиотека Puppeteer-io. Но для начала рассмотрим небольшой примерчик на html и чистом javascript без привязки к библиотекам или фреймворкам…
Читать дальше →
Всего голосов 12: ↑11 и ↓1 +10
Просмотры6.2K
Комментарии 0

TOП-10: разбор лучших докладов HolyJS 2017 Moscow

Блог компании JUG Ru GroupВеб-дизайнJavaScriptNode.JSКонференции

Действуем по старой схеме: я для вас отсматриваю подряд 10 докладов (бесплатно доступных на YouTube), делаю короткое описание содержимого, чтобы неинтересное можно было выбросить. Кроме того, с сайтов собираю ссылки на слайды и описания. Полученное сортирую и выдаю в порядке увеличения рейтинга — то есть в самом низу будет самый крутой доклад. Оценки — это не лайки на YouTube, а собственная оценочная система, она круче лайков.


Предыдущие части:



На этот раз объектом изысканий будет HolyJS 2017 Moscow — известная JavaScript-конференция, четвёртая по счёту. Более 600 JS-разработчиков собрались под одной крышей для того, чтобы обсудить настоящее и будущее JavaScript-сообщества с мировыми экспертами: Douglas Crockford, Lea Verou, Martin Splitt и так далее.


Осторожно, трафик! В этом посте присутствует огромное количество картинок — слайдов и скриншотов с видео в формате 720p.

Disclaimer: Все описания являются моим личным мнением. Всё написанное — плод моего больного воображения, а не искажённые цитаты докладчиков (это предостережение написано для того, чтобы докладчики меня не побили).

Читать дальше →
Всего голосов 48: ↑46 и ↓2 +44
Просмотры16.1K
Комментарии 11

Unit-тестирование скриншотами: преодолеваем звуковой барьер. Расшифровка доклада

Блог компании АвитоРазработка веб-сайтовJavaScriptПрограммированиеТестирование веб-сервисов

Тестировать регресс верстки скриншотами модно, этим никого не удивишь. Мы давно хотели внедрить этот вид тестирования у себя. Всё время смущали вопросы простоты поддержки и применения, но в большей степени — пропускная способность решений. Хотелось, чтобы это было что-то простое в использовании и быстрое в работе. Готовые решения не подошли, и мы взялись делать свое.


Под катом расскажем, что из этого вышло, какие задачи решали, и как мы добились того, чтобы тестирование скриншотами практически не влияло на общее время прохождения тестов. Этот пост — расшифровка доклада, который прозвучал на HolyJS 2017 Moscow. Видео можно посмотреть по ссылке, а почитать и посмотреть слайды — далее.


Читать дальше →
Всего голосов 42: ↑40 и ↓2 +38
Просмотры21.8K
Комментарии 12

Модульное тестирование интерфейсов в Headless Chrome. Лекция Яндекса

Блог компании ЯндексJavaScriptИнтерфейсыТестирование веб-сервисов
Чтобы непрерывно улучшать большие клиентские интерфейсы, нужна мощная система автотестов. Разработчик Яндекса Дмитрий Андриянов dima117 кое-что про это знает — пару месяцев назад он поделился своим опытом на Я.Субботнике в Нижнем Новгороде.


— Сегодня я расскажу, как мы в Директе пишем модульные тесты на веб-интерфейс. Мы в целом посмотрим, чем тесты на интерфейс отличаются от других тестов. Рассмотрим два подхода к написанию тестов: с помощью Selenium и с помощью Headless-браузеров. И в конце покажу инструмент, который мы написали в Директе для запуска тестов в Headless Chrome.
Читать дальше →
Всего голосов 22: ↑22 и ↓0 +22
Просмотры12K
Комментарии 13

Опыт 2 миллионов headless-сессий

Браузеры
Перевод
Опубликовано 4 июня 2018 года в корпоративном блоге browserless

Рады сообщить, что недавно мы преодолели рубеж в два миллиона обслуженных сессий! Это миллионы сгенерированных скриншотов, напечатанных PDF и протестированных сайтов. Мы сделали почти всё, что вы можете придумать делать с headless-браузером.

Хотя приятно достичь такой вехи, но на пути оказалось явно много накладок и проблем. В связи с огромным объёмом полученного трафика хотелось бы сделать шаг назад и изложить общие рекомендации для запуска headless-браузеров (и puppeteer) в продакшне.

Вот некоторые советы.
Читать дальше →
Всего голосов 16: ↑15 и ↓1 +14
Просмотры14K
Комментарии 13

Кросс-браузерное веб-расширение для пользовательских скриптов Ч.1

FirefoxOperaGoogle ChromeРасширения для браузеров
В этом цикле статей я хочу рассказать о своём опыте написания веб-расширения для браузеров. У меня уже был опыт создания веб-расширения, которое установили около 100 000 пользователей Chrome, которое работало автономно, но в данном цикле статей я решил углубиться в процесс разработки веб-расширения тесно интегрировав его с серверной частью.

imageimageimageimageimage

Читать дальше →
Всего голосов 8: ↑6 и ↓2 +4
Просмотры3.8K
Комментарии 3

Кросс-браузерное веб-расширение для пользовательских скриптов Ч.2

FirefoxOperaGoogle ChromeРасширения для браузеров
В этой статье я продолжаю цикл публикаций, в котором я хочу рассказать о своём опыте написания веб-расширения для браузеров. У меня уже был опыт создания веб-расширения, которое установили около 100 000 пользователей Chrome, которое работало автономно, но в данном цикле статей я решил углубиться в процесс разработки веб-расширения тесно интегрировав его с серверной частью.

imageimageimageimageimage
Читать дальше →
Всего голосов 6: ↑5 и ↓1 +4
Просмотры2.2K
Комментарии 1

Кросс-браузерное веб-расширение для пользовательских скриптов Ч.3

FirefoxOperaGoogle ChromeРасширения для браузеров
В этой статье я продолжаю цикл публикаций, в котором я хочу рассказать о своём опыте написания веб-расширения для браузеров. У меня уже был опыт создания веб-расширения, которое установили около 100 000 пользователей Chrome, которое работало автономно, но в данном цикле статей я решил углубиться в процесс разработки веб-расширения тесно интегрировав его с серверной частью.

imageimageimageimageimage
Читать дальше →
Всего голосов 5: ↑5 и ↓0 +5
Просмотры1.8K
Комментарии 0

Кросс-браузерное веб-расширение для пользовательских скриптов Ч.4

FirefoxOperaGoogle ChromeРасширения для браузеров
В этой статье я завершаю цикл публикаций, в котором я хотел рассказать о своём опыте написания веб-расширения для браузеров. У меня уже был опыт создания веб-расширения, которое установили около 100 000 пользователей Chrome, которое работало автономно, но в данном цикле статей я решил углубиться в процесс разработки веб-расширения тесно интегрировав его с серверной частью.

imageimageimageimageimage
Читать дальше →
Всего голосов 4: ↑4 и ↓0 +4
Просмотры1.6K
Комментарии 0

Жадный гном: Как я писал аналитику рынка в Lineage 2

Node.JSKotlinМонетизация игрDevOpsИгры и игровые приставки

Вот и наступила осенне-зимняя пора. За окном дожди и желания проводить время на открытом воздухе все меньше и меньше. И вот приходит мне сообщение от товарища "А давай поиграем в Lineage 2?". И опять я, поддавшись ностальгии, согласился. Выбрали мы свеженький сервер на ру-офе и создали персонажей.



 
В отличии от World of Warcraft в Lineage 2 совершенно другая система добычи игровой валюты. Нужно круглыми сутками охотиться на монстров с целью получения наживы. Для меня было даже открытием, что для некоторых людей RMT (Real money trading) является чем то вроде работы. Также, в игре присутствует экономика, которую формируют игроки. Иными словами, можно заработать на купи-продай или же покупать дешевые ресурсы, из них делать вещи и продавать с наценкой. Так как для нас игра остается чем то вроде отдыха именно такой способ получения игровой валюты был выбран нами.


Чтобы покупать и продавать предметы игрок должен находиться online (Скриншот сверху). Соответсвенно, кто-то хочет побыстрее продать (дешевле) а кто-то побыстрее купить (дороже). А что если разница продать — купить положительная? Как раз этот пример и будет рассмотрен в статье как итог.


Однако, цены на рынке достаточно нестабильны и часто меняются. По этому существует вероятность купить что то "дешево" и потом еще дешевле продать с отрицательной прибылью. Этого мы и стараемся избежать. В общем было решено написать систему аналитики рынка и разобраться с парочкой интересных мне технологий.


Spoiler:
В статье будут использованы следующие технологии
Docker, DigitalOcean, NodeJs, Ktor, Prometheus, Grafana, Telegram bot notification

Читать дальше →
Всего голосов 53: ↑50 и ↓3 +47
Просмотры44.1K
Комментарии 58

VS Code — сниппеты Puppeteer

Блог компании MicrosoftПрограммированиеVisual Studio
Это расширение Visual Studio Code добавляет предопределенные полезные фрагменты кода для Puppeteer. Проверьте API для получения дополнительной информации о доступных возможностях.

Читать дальше →
Всего голосов 16: ↑12 и ↓4 +8
Просмотры3.1K
Комментарии 0

Как я переписывал поисковик авиабилетов с PHP на NodeJS

PHPNode.JS
Из песочницы

Привет. Меня зовут Андрей, я студент-магистрант в одном из технических ВУЗов Москвы и по совместительству очень скромный начинающий предприниматель и разработчик. В этой статье я решил поделиться своим опытом перехода от PHP (который когда-то мне нравился из-за своей простоты, но со временем стал ненавидим мною — под катом объясняю почему) к NodeJS. Здесь могут приводиться очень банальные и кажущиеся элементарными задачи, которые, тем не менее, лично мне было любопытно решать в ходе моего знакомства с NodeJS и особенностями серверной разработки на JavaScript. Я попытаюсь объяснить и наглядно доказать, что PHP уже окончательно ушёл в закат и уступил своё место NodeJS. Возможно, кому-то даже будет полезно узнать некоторые особенности рендеринга HTML-страниц в Node, который изначально не приспособлен к этому от слова совсем.

Читать дальше →
Всего голосов 67: ↑18 и ↓49 -31
Просмотры16K
Комментарии 88

Автоматическая авторизация на карте Strava Heatmap

Node.JSOpenStreetMap
Из песочницы
Tutorial


Данный пост является ответом на недавнюю аналогичную статью. Попробую рассказать, как можно автоматизировать описанные в ней действия. И как подключить эту тепловую карту к навигатору смартфона.
Читать дальше →
Всего голосов 14: ↑14 и ↓0 +14
Просмотры3.2K
Комментарии 3

Полный цикл тестирования React-приложений. Доклад Авто.ру

Блог компании ЯндексCSSJavaScriptТестирование веб-сервисовReactJS
Стремление уйти от ручного регрессионого тестирования — хороший повод внедрить автотесты. Вопрос, какие именно? Разработчики интерфейсов Наталья Стусь и Алексей Андросов вспомнили, как их команда прошла несколько итераций и построила тестирование фронтенда в Авто.ру на базе Jest и Puppeteer: юнит-тесты, тесты на отдельные React-компоненты, интеграционные тесты. Самое интересное из этого опыта — изолированное тестирование React-компонентов в браузере без Selenium Grid, Java и прочего.



Алексей:
— Для начала надо немного рассказать, что такое Авто.ру. Это сайт по продаже машинок. Там есть поиск, личный кабинет, автосервисы, запчасти, отзывы, кабинеты дилеров и многое другое. Авто.ру — очень большой проект, очень много кода. Весь код мы пишем в большой монорепе, потому что это все перемешивается. Одни и те же люди делают схожие задачи, например, для мобильных и десктопа. Получается много кода, и монорепа нам жизненно необходима. Вопрос — как ее тестировать?

Читать дальше →
Всего голосов 26: ↑21 и ↓5 +16
Просмотры17K
Комментарии 3

Подключаем онлайн-карты к навигатору на смартфоне. Часть 2 – векторные карты

Google ChromeNode.JSOpenStreetMapГеоинформационные сервисы
Tutorial

Пишем серверное приложение, которое будет генерировать растровые PNG тайлы на основе векторных онлайн-карт. Использование веб-срейпинга с помощью Puppeteer для получения картографических данных.

Читать дальше →
Всего голосов 10: ↑10 и ↓0 +10
Просмотры1.6K
Комментарии 4

Подключаем онлайн-карты к навигатору на смартфоне. Часть 3 — OverpassTurbo

Google ChromeNode.JSOpenStreetMapГеоинформационные сервисы
Tutorial

Превращаем созданный ранее скрипт в API для просмотра интерактивной карты с сайта OverpassTurbo.eu через навигационное приложение смартфона.

Читать дальше →
Всего голосов 16: ↑16 и ↓0 +16
Просмотры2.4K
Комментарии 3
1