В поддержку А-Парсера довольно часто задают вопрос, возможно ли делать скриншоты сайтов? И пока такой функционал еще не появился в составе парсера, можно воспользоваться сторонними сервисами. Именно о парсинге такого сервиса и пойдет речь в этой статье.
Данный парсер будет полезен прежде всего веб-разработчикам, так как позволит увидеть как выглядит сайт на разных устройствах в разных браузерах, без установки и настройки дополнительного софта.
Для примера был выбран сервис от Microsoft: https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/, который в свою очередь использует технологии BrowserStack. Рассмотрим несколько упрощенный вариант парсинга: получим ссылки на скриншоты и информацию о том, в каких браузерах и ОС они были сделаны. Итак, начнем!
Для начала проанализируем сайт. Чтобы получить скриншоты, необходимо ввести в поле ссылку и нажать кнопку с лупой.
После чего получаем результат такого вида
Теперь давайте разберёмся как получить эти данные в парсере.
Если посмотреть исходный код этой страницы, то увидим, что в теле этой страницы таких данных нет, значит они подгружаются AJAX-запросами. Поэтому нам нужно найти тот самый запрос, с помощью которого мы сможем получать скриншоты.
Открываем в браузере Инструменты разработчика и переходим на вкладку Network.
Для примера используется браузер Chrome, но и в других современных браузерах также есть аналогичный функционал.
Итак, мы перешли на вкладку Network и теперь давайте обновим страницу. Затем ищем запросы, в которых приходит необходимый результат:
Как видим, данные приходят в JSON, поэтому нам не составит труда его разобрать.
Теперь посмотрим как выглядит запрос для получения такого JSON. Видим
где ID - это идентификатор который состоит из набора цифр и букв.
Получается, наша задача получить этот id. Если проанализировать более детально все запросы и получаемые ответы, мы увидим нужный запрос.
который отправляется методом POST и в теле запроса передаются в качестве параметра ссылка на сайт.
Исходя из этого, алгоритм работы такой:
Второй этап (отправка GET запросов) вынесена в отдельный метод parseScreen. Рассмотрим его.
В качестве параметров он принимает ссылку, по которой будет отправляться запрос, массив результатов и номер запроса.
Парсер доступен для загрузки в нашем каталоге: https://a-parser.com/resources/223/
Пример результата
P.S. По полученным ссылкам можно легко загрузить сами картинки. Как это сделать А-Парсером, рассмотрено здесь: https://a-parser.com/resources/79/ (2-й пресет)
Данный парсер будет полезен прежде всего веб-разработчикам, так как позволит увидеть как выглядит сайт на разных устройствах в разных браузерах, без установки и настройки дополнительного софта.
Для примера был выбран сервис от Microsoft: https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/, который в свою очередь использует технологии BrowserStack. Рассмотрим несколько упрощенный вариант парсинга: получим ссылки на скриншоты и информацию о том, в каких браузерах и ОС они были сделаны. Итак, начнем!
Для начала проанализируем сайт. Чтобы получить скриншоты, необходимо ввести в поле ссылку и нажать кнопку с лупой.
После чего получаем результат такого вида
Теперь давайте разберёмся как получить эти данные в парсере.
Если посмотреть исходный код этой страницы, то увидим, что в теле этой страницы таких данных нет, значит они подгружаются AJAX-запросами. Поэтому нам нужно найти тот самый запрос, с помощью которого мы сможем получать скриншоты.
Открываем в браузере Инструменты разработчика и переходим на вкладку Network.
Для примера используется браузер Chrome, но и в других современных браузерах также есть аналогичный функционал.
Итак, мы перешли на вкладку Network и теперь давайте обновим страницу. Затем ищем запросы, в которых приходит необходимый результат:
Как видим, данные приходят в JSON, поэтому нам не составит труда его разобрать.
Теперь посмотрим как выглядит запрос для получения такого JSON. Видим
Код:
https://developer.microsoft.com/en-us/microsoft-edge/api/tools/screenshots/IDПолучается, наша задача получить этот id. Если проанализировать более детально все запросы и получаемые ответы, мы увидим нужный запрос.
Код:
https://developer.microsoft.com/en-us/microsoft-edge/api/tools/screenshots/Исходя из этого, алгоритм работы такой:
- отправляем POST запрос чтобы получить id
- отправляем GET запрос с полученными id для получения скриншотов
Код:
*parse(set, results) {
this.logger.put("Start scraping query: " + set.query);
let response = yield this.request('POST','https://developer.microsoft.com/en-us/microsoft-edge/api/tools/screenshots/',{url:set.query}, {
decode: 'auto-html'
});
if (response.success) {
let id = JSON.parse(response.data);
results = yield* this.parseScreen('https://developer.microsoft.com/en-us/microsoft-edge/api/tools/screenshots/' + id.job_id,results,0);
}
results.success = response.success;
return results;
}В качестве параметров он принимает ссылку, по которой будет отправляться запрос, массив результатов и номер запроса.
Код:
*parseScreen(url, results, count_attempt) {
results.browserscreen = [];
let response = yield this.request('GET', url, {}, {});
if (response.success) {
let json = JSON.parse(response.data);
this.logger.put("Attempt " + count_attempt);
for (let i in json.screenshots) {
if (json.screenshots[i].image_url == null && count_attempt < this.conf.CountRetries) {
yield this.sleep(this.conf.TimeoutRetries);
let response = yield* this.parseScreen(url,results,++count_attempt);
}
if (json.screenshots[i].image_url != null){
let img = json.screenshots[i].image_url;
let brows = json.screenshots[i].browser + ' ' + json.screenshots[i].browser_version;
let opers = json.screenshots[i].os + ' ' + json.screenshots[i].os_version;
let date = json.screenshots[i].created_at;
results.browserscreen.push(brows,opers,img,date);
}
}
}
return results;
}Пример результата
P.S. По полученным ссылкам можно легко загрузить сами картинки. Как это сделать А-Парсером, рассмотрено здесь: https://a-parser.com/resources/79/ (2-й пресет)
