Есть ли способ проверить отзывчивый CSS с Selenium?

Ответ 1

Я могу представить два способа сделать это.

Один - для каждого веб-элемента вы можете проверить его размер, местоположение, видимость и т.д. После каждого изменения размера вы можете сравнить эти параметры с некоторыми ранее заданными значениями, чтобы проверить, изменился ли макет.

Второе - сравнение изображений. После каждого изменения размера вы можете сделать снимок экрана и сравнить его с ранее сохраненным рисунком. Для достижения этой цели существуют различные библиотеки сравнения изображений. В нашей компании мы используем ImageMagick. Однако сравнение изображений не подходит для разрабатываемых страниц или для тех, у кого меняется контент. Вы можете обойти эту проблему, сокрыв части страницы, которые подвержены изменениям с помощью javascript (это можно сделать с помощью WebDriver).

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

ИЗМЕНИТЬ

К сожалению, я не знаю Ruby. Ниже приведен пример Java. Надеюсь, вы сможете это понять и каким-то образом перевести на Ruby. Код просто печатает размер и расположение каждого элемента из списка.

org.openqa.selenium.Point point;
org.openqa.selenium.Dimension dimension;

List<WebElement> elementsList = driver.findElements(By.xpath("//some/xpath"));

for (WebElement element : elementsList)
{
    point = element.getLocation();
    dimension = element.getSize();
    System.out.println("Element name: " + element.getTagName());
    System.out.println("Element size: " + dimension.height + "x" + dimension.width);
    System.out.println("Element location: " + point.x + ":" + point.y);
}

Обратите внимание, что каждый вызов getLocation() и getSize() вызывает выполнение js (для получения значений), и это требует времени. Вот почему вы должны сделать только один вызов на элемент, не используйте что-то вроде element.getSize(). Height + "x" + element.getSize(). Width - это займет в два раза больше времени по сравнению с приведенным выше примером.

В Ruby вышеупомянутые методы называются element.location и element.size

Ответ 2

В настоящее время существует решение для автоматического тестирования адаптивного дизайна Galen Framework. Я работаю над инструментом, который позволит протестировать отзывчивый дизайн веб-страницы, а также просто компоновку веб-сайта для кросс-браузерной совместимости. Инструмент доступен здесь http://galenframework.com

Он использует Selenium, чтобы открыть веб-страницу в браузере, изменить размер окна браузера на необходимый размер, а затем получить местоположение элементов на странице. Он имеет специальный синтаксис для описания просмотра страницы на разных устройствах (размеры браузера)

Вот небольшой пример тестирования базового скелета веб-страницы:

# Objects definition
=====================================
header                  id  header
menu                    css #menu
content                 id  content
side-panel              id  side-panel
footer                  id  footer
=====================================


@ all
-------------------------------
header
    inside: screen 0px top left right

menu
    centered horizontally inside: screen
    below: header 0px

content
    below: menu 0px
    inside:screen 0px left

@ desktop
--------------------------------
side-panel
    below: menu 0px
    inside: screen 0px right
    width: 300px
    near: content 0px right
    aligned horizontally top: content

@ mobile
--------------------------------
content, side-panel
    width: 100% of screen/width


side-panel
    below: content 0px

Позже вы можете запускать тесты либо в одной команде, либо вы можете создать отдельный набор тестов, в котором у вас есть больше действий для выполнения (например, встраивание пользовательского javascript или что-то делать с помощью WebDriver и т.д.). Чтобы запустить приведенный выше пример с помощью одной команды, выполните следующее:

galen check homepage.spec --url "http://example.com" --size "400x600" --include "mobile,all" --htmlreport "reports"

Это были только основы. На официальном сайте есть больше примеров.

Также есть статья, в которой объясняется, как использовать TDD-подход (Test Driven Development) при разработке веб-страницы http://mindengine.net/post/2013-11-16-tdd-for-responsive-design-or-how-to-automate-testing-of-website-layout-for-different-devices/

Ответ 3

Если ваша основная цель - проверить изменения в пользовательском интерфейсе, а селен не является абсолютным требованием, вы можете использовать BBC Wraith - https://github.com/BBC-News/wraith очень легко для настройки и использования.

Ответ 4

Мы можем добиться этого несколькими способами.

1. Сравнение скриншотов. Используя selenium webdriver, перейдите на указанный URL-адрес веб-сайта и измените браузер на разные размеры и сравните скриншоты. Если оба скриншота одинаковы, то данный веб-сайт не реагирует. Если оба скриншота отличаются друг от друга, отзывчивый. Этот метод не является хорошим, потому что, если предположить, что слайд-шоу присутствуют на данном веб-сайте при съемке снимков этого веб-сайта, изображения слайд-шоу, представленные на данном веб-сайте, могут измениться, и мы получим разные скриншоты, поэтому, если мы сравним скриншоты, мы получим результат как оба скриншота различны, и мы можем получить ответ, поскольку данный сайт является отзывчивым

2. Ширина документа:. Использование selenium webdriver перейдите на указанный URL-адрес веб-сайта и измените браузер на размер мобильного устройства и выполните javascript, чтобы получить ширину документа. Если ширина меньше максимальной ширины мобильных устройств, мы можем предположить, что данный веб-сайт является отзывчивым.

3. Ширина экрана:. Используя selenium webdriver, перейдите на указанный URL-адрес веб-сайта и измените размер браузера на размер мобильного устройства и сделайте снимок экрана и получите ширину снимка экрана. Если ширина меньше максимальной ширины мобильных устройств, мы можем предположить, что данный веб-сайт является отзывчивым. Я тестировал несколько сайтов с таким подходом и получил ожидаемый результат. Шаги для проверки данного сайта реагируют или нет.

Подробнее о кодировании см.: http://jagadeeshmanne.blogspot.in/2014/03/checking-website-is-responsive-or-not.html