Автоматизация скриншотов приложения Cordova (casperJS?)

Question

Я пытаюсь автоматизировать создание скриншотов приложения Cordova на сервере. Моя мысль заключалась в том, что я мог бы сфотографировать исходный HTML-код с помощью WebKit и наложить строку состояния для получения достаточно точного снимка экрана автоматически.

Я использую casperJS, чтобы сделать это, и это почти работает. Вот мой (урезана) код:

page.viewportSize = { width: 480, height: 640 }; 
page.clipRect = { width: 480, height: 640 }; 
page.open(siteURL, function (status) { 

    setTimeout(function() { 
     page.render('phone.png'); 
     page.close(); 
     callback.apply(); 
    }, 4000); 
}); 

Это создает скриншот по назначению но главный экран приложения использует гибкую форму, чтобы расширить набор кнопок, чтобы занять всю высоту. Эти кнопки отображаются с минимальным размером и не «согнуты», как должны быть.

Я считаю, что casperJS эквивалентен старой версии WebKit, поэтому, возможно, flexbox не реализован или, возможно, casperJS не устанавливает правильность высоты браузера, так как это не совсем правильно.

Может ли кто-нибудь предложить способ, которым это может быть достигнуто? Предпочтительно локально, но услуга также будет достаточной, если это необходимо.

Answer 1

У меня также возникли проблемы с использованием PhantomJS для создания скриншотов. Вещи в основном выглядят нормально, но здесь и там возникают странные проблемы с рендерингом.

Если вам нужна более высокая точность, я бы предложил использовать встроенную функцию скриншота Selenium WebDriver для захвата изображений с помощью Chrome (или какого-либо другого браузера, не поддерживающего PhantomJS). Например, с помощью привязок WebDriver Python, вы можете использовать эту функцию:

http://selenium-python.readthedocs.org/en/latest/api.html#selenium.webdriver.remote.webdriver.WebDriver.get_screenshot_as_file

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

Документация Бока-ча находится по адрес: http://bok-choy.readthedocs.org/en/latest/

и документов для его особенностей скрина находятся по адресу: http://bok-choy.readthedocs.org/en/latest/visual_diff.html