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

Получения скриншотов сайта в разных браузерах

Метки:
  1. Support Денис
    В поддержку А-Парсера довольно часто задают вопрос, возможно ли делать скриншоты сайтов? И пока такой функционал еще не появился в составе парсера, можно воспользоваться сторонними сервисами. Именно о парсинге такого сервиса и пойдет речь в этой статье.
    Данный парсер будет полезен прежде всего веб-разработчикам, так как позволит увидеть как выглядит сайт на разных устройствах в разных браузерах, без установки и настройки дополнительного софта.
    Для примера был выбран сервис от Microsoft: https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/, который в свою очередь использует технологии BrowserStack. Рассмотрим несколько упрощенный вариант парсинга: получим ссылки на скриншоты и информацию о том, в каких браузерах и ОС они были сделаны. Итак, начнем!

    Для начала проанализируем сайт. Чтобы получить скриншоты, необходимо ввести в поле ссылку и нажать кнопку с лупой.
    [​IMG]

    После чего получаем результат такого вида
    [​IMG]

    Теперь давайте разберёмся как получить эти данные в парсере.

    Если посмотреть исходный код этой страницы, то увидим, что в теле этой страницы таких данных нет, значит они подгружаются AJAX-запросами. Поэтому нам нужно найти тот самый запрос, с помощью которого мы сможем получать скриншоты.
    Открываем в браузере Инструменты разработчика и переходим на вкладку Network.
    Для примера используется браузер Chrome, но и в других современных браузерах также есть аналогичный функционал.
    Итак, мы перешли на вкладку Network и теперь давайте обновим страницу. Затем ищем запросы, в которых приходит необходимый результат:
    [​IMG]
    Как видим, данные приходят в 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 и в теле запроса передаются в качестве параметра ссылка на сайт.
    [​IMG]

    Исходя из этого, алгоритм работы такой:
    • отправляем 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-й пресет)