как называется программный код для автоматизации какой то операции пользователя веб сайта
JavaScript, Node, Puppeteer: автоматизация Chrome и веб-скрапинг
Предварительная подготовка
Перед началом работы вам понадобится Node 8+. Найти и загрузить его можно здесь, выбрав текущую (Current) версию. Если вы никогда раньше не работали с Node, взгляните на эти учебные курсы или поищите другие материалы, благо, их в Сети предостаточно.
Пример №1: создание копий экрана
После установки puppeteer разберём простой пример. Он, с небольшими изменениями, повторяет документацию к библиотеке. Код, который мы сейчас рассмотрим, делает скриншот заданной веб-страницы.
Для начала создадим файл test.js и поместим в него следующее:
Построчно разберём этот код. Сначала покажем общую картину.
В этой строке мы подключаем ранее установленную библиотеку puppeteer в качестве зависимости.
Функция getPic() завершает работу и мы закрываем браузер.
Запуск примера
Вот что получится после того, как он успешно отработает:
Замечательно! А теперь, чтобы было веселей (и чтобы облегчить отладку), мы можем выполнить те же действия, запустив Chrome в обычном режиме.
Что бы это значило? Попробуйте и увидите сами. Для этого нужно заменить эту строку кода:
Сохраним файл и снова его запустим с помощью Node:
Здорово, правда? Передавая объект
Прежде чем идти дальше, сделаем ещё кое-что. Вы заметили, что скриншот, который делает программа, включает в себя лишь часть страницы? Так происходит из-за того, что окно браузера немного меньше размера веб-страницы. Исправить это можно с помощью следующей строчки, меняющей размер окна:
Её надо добавить в код сразу после команды перехода по URL. Это приведёт к тому, что программа сделает скриншот, который выглядит гораздо лучше:
Вот как будет выглядеть итоговый вариант кода:
Пример №2: веб-скрапинг
Мы будем собирать данные с сайта Books To Scrape. Это — имитация электронного книжного магазина, созданная для экспериментов по веб-скрапингу.
В идеале, после разбора первого примера, вы уже должны понять то, как устроен этот код. Но если это не так — ничего страшного.
Проверим этот код, добавив в функцию scrape() возврат строки:
▍Шаг 1: настройка
Сначала надо создать экземпляр браузера, открыть новую страницу и перейти по URL. Вот как мы всё это сделаем:
Здесь создаём новую страницу в браузере.
Тут добавляем задержку в 1000 миллисекунд для того, чтобы дать браузеру время на полную загрузку страницы, но обычно этот шаг можно опустить.
Здесь закрываем браузер и возвращаем результат.
Предварительная подготовка завершена, теперь займёмся скрапингом.
▍Шаг 2: скрапинг
Как вы уже, наверное, поняли, на сайте Books To Scrape имеется большой каталог настоящих книг, снабжённых условными данными. Мы собираемся взять первую книгу, расположенную на странице, и вернуть её название и цену. Вот домашняя страница сайта. Щёлкнем по первой книге (она выделена красной рамкой).
В документации по puppeteer можно найти метод, который позволяет имитировать щелчки мышью по странице:
Конструкция вида selector представляет собой селектор для поиска элемента, по которому нужно щёлкнуть. Если обнаружено несколько элементов, удовлетворяющих селектору, то щелчок будет сделан по первому из них.
Очень хорошо то, что инструменты разработчика Google Chrome позволяют, без особых сложностей, определить селектор конкретного элемента. Для того, чтобы это сделать, достаточно щёлкнуть правой кнопкой мыши по изображению и выбрать команду Inspect (Просмотреть код).
Эта команда откроет панель Elements (Элементы), в которой будет представлен код страницы, фрагмент которого, соответствующий интересующему нас элементу, будет выделен. После этого можно щёлкнуть по кнопке с тремя точками слева и в появившемся меню выбрать команду Copy → Copy selector (Копировать → Копировать селектор).
Отлично! Теперь у нас имеется селектор и всё готово для того, чтобы сформировать метод click и вставить его в программу. Вот как это будет выглядеть:
Теперь программа имитирует щелчок по первому изображению товара, что приводит к открытию страницы этого товара.
На этой новой странице нас интересует название книги и её цена. Они выделены на нижеприведённом рисунке.
Для начала вызовем метод page.evaluate() и присвоим возвращённое им значение константе result :
В этой функции мы можем выбирать необходимые элементы. Для того, чтобы понять, как описать то, что нам нужно, снова воспользуемся инструментами разработчика Chrome. Для этого щёлкнем правой кнопкой по названию книги и выберем команду Inspect (Просмотреть код).
Такой же подход поможет нам выяснить то, как взять со страницы цену книги.
Теперь, когда мы вытащили со страницы название книги и её цену, мы можем возвратить всё это из функции в виде объекта:
В результате получается следующий код:
Теперь осталось лишь вернуть константу result и вывести её содержимое в консоль.
Полный код этого примера будет выглядеть так:
Теперь можно запустить программу с помощью Node:
Если всё сделано правильно, в консоль будет выведено название книги и её цена:
Собственно говоря, всё это и есть веб-скрапинг и вы только что сделали первые шаги в этом занятии.
Пример №3: улучшаем программу
Тут у вас могут появиться вполне резонные вопросы: «Зачем щёлкать по ссылке, ведущей к странице книги, если и её название, и цена, отображаются на домашней странице? Почему бы не взять их прямо оттуда? И, если мы смогли это сделать, почему бы не прочитать названия и цены всех книг?».
Ответ на эти вопросы заключается в том, что существует множество подходов к веб-скрапингу! К тому же, если ограничиться данными, выводимыми на домашней странице, можно столкнуться с тем, что названия книг будут укорочены. Однако, все эти размышления дают вам отличную возможность попрактиковаться.
▍Задача
Ваша цель — считать все заголовки книг и их цены с домашней страницы и вернуть их в виде массива объектов. Вот какой массив получился у меня:
Можете приступать. Не читайте пока дальше, попробуйте сделать всё сами. Надо сказать, что эта задача очень похожа на ту, которую мы только что решили.
Получилось? Если нет — тогда вот подсказка.
▍Подсказка
Главное отличие этой задачи от предыдущего примера заключается в том, что тут нам надо пройтись по списку данных. Вот как это можно сделать:
Если и сейчас вам не удаётся решить задачу, в этом нет ничего страшного. Это — вопрос практики. Вот один из возможных вариантов её решения.
▍Решение задачи
Итоги
Из этого материала вы узнали о том как пользоваться браузером Google Chrome и библиотекой Puppeteer для создания системы веб-скрапинга. А именно, мы рассмотрели структуру кода, способы программного управления браузером, методику создания копий экрана, методы имитации работы пользователя со страницей и подходы к чтению и сохранению данных, размещаемых на веб-страницах. Если это было ваше первое знакомство с веб-скрапингом, надеемся, теперь у вас есть всё необходимое для того, чтобы вытащить из интернета всё, что вам нужно.
Уважаемые читатели! Пользуетесь ли вы библиотекой Puppeteer и браузером Google Chrome без пользовательского интерфейса?
Автоматизируем работу с сайтом за 5 минут на примере Yandex.Почты с помощью NetExport
Иногда, бывает нужно автоматизировать некоторые процессы на чужом сайте. Залогиниться на сайт, скачать какой нибудь файл, открыть страничку. Часто приходится разбираться в коде сайта, чтобы найти, как правильно написать запрос curl.
Предлагаю Вашему вниманию способ, которым я сам пользуюсь, чтобы значительно облегчить себе жизнь и автоматизировать все и вся, от проверки почты, до загрузки данных в телебанке. Я постараюсь, на примере Yandex.почты показать, как можно очень быстро и почти без программирования сгенерить curl php скрипт для захода на любой сайт и загрузки контента в автоматическом режиме.
Для начала, нам необходимо установить Firebug расширение для браузера Firefox. После чего, установить расширение для FireBug NetExport
Последние версии netExport позволяют автоматически собирать сетевые логи ваших действий в формате HTTP Archive
Теперь переходим на интересующий нас сайт, в данном случае это будет mail.yandex.ru. После чего, лучше очистить все кукисы и кеш браузера. Теперь включаем FireBug нажатием на значок жучка на статусной строке браузера. После чего включаем Сеть, отключаем на всякий случай кеш.
Если плагин NetExport установился, вы увидите кнопку «Export» в панели Firebug и желтый кружок рядом с ней. Для того, чтобы плагин записывал все ваши действия в автоматическом режиме необходимо установить директорию по умолчанию для записи логов и нажать на желтый кружок (он станет зеленым, как на картинке).
Теперь просто заходите под своим аккаунтом и делаете нужное вам действие. В моем случае мне нужно просто сделать логин и перейти на страницу с письмами. Сделали, останавливаем NetExport нажатием на зеленый кружок. В папке, которую мы выбрали по-умолчанию появилось несколько файлов. Их можно проанализировать с помощью онлайн вьюера и написать код для автоматизации.
Однако, я написал маленький сервис, который позволяет это сделать автоматически. Зайдя по ссылке har2php.sharecoder.com вы можете просто загрузить Ваш лог файл в сервис и он напишет для Вас код на PHP. В моем случае, мне нужно загрузить туда файл «passport-ckicheck.yandex.ru+2010-02-18+10-15-21.har» и вуаля 🙂 Сервис сделал для себя, поэтому не очень хорошо переваривает большие лог файлы, но дело свое знает хорошо. Сервис не хранит отправленных данных и держит их только в текущей сессии. Однако, для пущей безопасности, рекомендуется предварительно, перед отправкой HAR файла на сервис, заменить настоящие логины и пароли какими-нибудь символами.
Код, после нескольких косметических изменений можно использовать по назначению 🙂
Урок 5
§6. Веб-сайты
Содержание урока
Веб-программирование
Веб-программирование
Веб-программирование — это программирование динамических сайтов в Интернете.
Результат работы веб-программиста — это веб-приложение, т. е. программа, обеспечивающая работу сайта.
Веб-программисты разрабатывают два типа программ:
• серверные, которые работают на веб-сервере;
• клиентские, которые выполняются в браузере на компьютере пользователя.
Для создания серверных программ используют языки РНР, Python, ASP, Perl. Их изучение выходит за рамки школьного курса.
Клиентские программы, которые внедрены в веб-страницы, пишут на языке JavaScript. Такой подход часто называют динамическим HTML (англ. DHTML: Dynamic HTML). Его основная цель — обеспечить интерактивность, т. е. сделать так, чтобы веб-страница реагировала на действия пользователя.
Программа на языке JavaScript называется сценарием или скриптом.
Скрипт, или сценарий (англ. script), — это программный код для автоматизации какой-то операции пользователя.
С помощью скрипта можно изменять содержимое и оформление веб-страницы в ответ на действия пользователя, например:
• заменять текст, оформление, рисунки;
• строить многоуровневые выпадающие меню;
• скрывать и открывать части страницы;
• проверять данные, введённые пользователем;
• выполнять вычисления и т. д.
Используя дополнительные источники, выясните, на каком ещё языке кроме Javascript можно писать скрипты на веб-страницах. В чём недостаток этого языка?
Следующая страница 
Системы управления сайтом
Cкачать материалы урока
Урок 5
§6. Веб-сайты
Содержание урока
Веб-программирование
Веб-программирование
Веб-программирование — это программирование динамических сайтов в Интернете.
Результат работы веб-программиста — это веб-приложение, т. е. программа, обеспечивающая работу сайта.
Веб-программисты разрабатывают два типа программ:
• серверные, которые работают на веб-сервере;
• клиентские, которые выполняются в браузере на компьютере пользователя.
Для создания серверных программ используют языки РНР, Python, ASP, Perl. Их изучение выходит за рамки школьного курса.
Клиентские программы, которые внедрены в веб-страницы, пишут на языке JavaScript. Такой подход часто называют динамическим HTML (англ. DHTML: Dynamic HTML). Его основная цель — обеспечить интерактивность, т. е. сделать так, чтобы веб-страница реагировала на действия пользователя.
Программа на языке JavaScript называется сценарием или скриптом.
Скрипт, или сценарий (англ. script), — это программный код для автоматизации какой-то операции пользователя.
С помощью скрипта можно изменять содержимое и оформление веб-страницы в ответ на действия пользователя, например:
• заменять текст, оформление, рисунки;
• строить многоуровневые выпадающие меню;
• скрывать и открывать части страницы;
• проверять данные, введённые пользователем;
• выполнять вычисления и т. д.
Используя дополнительные источники, выясните, на каком ещё языке кроме Javascript можно писать скрипты на веб-страницах. В чём недостаток этого языка?
Следующая страница Системы управления сайтом
Cкачать материалы урока
Тест «Веб-сайты и веб-страницы»
Тест «Веб-сайты и веб-страницы»
для 11 класса углубленного уровня к УМК Полякова К. Ю. и Еремина Е. А.
(рекомендуемое время выполнения – 1 урок)
Указание: в заданиях 1, 3-7, 9, 10, 16, 27 впишите ответ; в задании 23 установите соответствие; в остальных заданиях выберите один или несколько ответов.
За каждый верный ответ в заданиях 1, 3-7, 9, 10, 16, 27 добавляется по 1 баллу; в остальных заданиях – за каждый правильно выбранный ответ добавляется по 0,5 балла. Максимальная сумма баллов равна 31.
Оценка «5» соответствует 27-31 баллам;
Оценка «4» соответствует 21-26 баллам;
Оценка «3» соответствует 12-20 баллам;
Оценка «2» соответствует 0-11 баллам.
а)хранятся на сервере в готовом виде;
б)создаются сервером в момент запроса;
д)могут выбирать информацию из баз данных.
а)служба мгновенных сообщений;
в)система управления содержимым динамического сайта;
г)система управления содержимым статического сайта;
е)каскадные таблицы стилей;
ж)язык разметки веб-страниц.
а)в заголовке веб-страницы;
б)в заголовке окна браузера;
в)нигде не выведется.
а)элемент маркированного списка;
б)переход на новую строку;
г)для создания гиперссылки.
а)служба мгновенных сообщений;
б)система управления содержимым динамического сайта;
в)система управления содержимым статического сайта;
д)каскадные таблицы стилей;
е)язык разметки веб-стран
а)для горизонтального и вертикального отступа фотографии от текста;
б)для вертикального и горизонтального отступа фотографии от текста;
в)для указания браузеру размеров рисунка.
а)для воспроизведения видеофайлов;
б)для воспроизведения аудиофайлов;
в)для воспроизведения флэш-роликов;
г)для добавления на веб-страницу «нестандартных» данных;
д)для добавления на веб-страницу баз данных.
а)технология создания интерактивных сайтов;
б)расширенный язык разметки;
в)язык подключения «плавающих» блоков;
г)язык автоматического подключения плагинов.
а)сложно описать структуры данных, отличающиеся от иерархии;
б)не различаются типы данных;
в)неудобен для представления многоуровневых списков;