Автоматизация тестирования сайтов в разных браузерах

В поддержку А-Парсера довольно часто задают вопрос, возможно ли делать скриншоты сайтов? И пока такой функционал еще не появился в составе парсера, можно воспользоваться сторонними сервисами. Именно о парсинге такого сервиса и пойдет речь в этой статье.
Данный парсер будет полезен прежде всего веб-разработчикам, так как позволит увидеть как выглядит сайт на разных устройствах в разных браузерах, без установки и настройки дополнительного софта.
Для примера был выбран сервис от 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 - это идентификатор который состоит из набора цифр и букв.

Получается, наша задача получить этот id. Если проанализировать более детально все запросы и получаемые ответы, мы увидим нужный запрос.

Код:

https://developer.microsoft.com/en-us/microsoft-edge/api/tools/screenshots/

который отправляется методом POST и в теле запроса передаются в качестве параметра ссылка на сайт.


Исходя из этого, алгоритм работы такой:

• отправляем POST запрос чтобы получить id
• отправляем GET запрос с полученными id для получения скриншотов

Данную задачу мы будем решать с помощью JS-парсеров.

Код:

 *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;
    }

Второй этап (отправка GET запросов) вынесена в отдельный метод parseScreen. Рассмотрим его.
В качестве параметров он принимает ссылку, по которой будет отправляться запрос, массив результатов и номер запроса.

Код:

*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;
        }

Парсер доступен для загрузки в нашем каталоге: https://a-parser.com/resources/223/

Пример результата

P.S. По полученным ссылкам можно легко загрузить сами картинки. Как это сделать А-Парсером, рассмотрено здесь: https://a-parser.com/resources/79/ (2-й пресет)