Автоматическое визуальное тестирование макета

Question

• Можно ли в модульном тесте визуализировать что-либо как требуется (для некоторого определения требуемого)?Специально для HTML и CSS визуализирует вашу страницу как «ожидаемую»

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

• Будут ли какие-либо другие способы провести машинное тестирование, скажем, файл HTML для визуального определения содержимого?последовательны.

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

• Последний вопрос: если этих инструментов не существует, стоит ли их писать?Будут ли инструменты такого характера действительно давать вам значимые результаты, которые не связаны с очень большим пределом погрешности.Т.е. они могли бы точно предсказать, не повлияло ли какое-либо изменение в коде ваш визуальный макет, не давая большого количества ложных негативов или пропущенных вещей, которые явно повреждены.

Answer 1

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

Есть способ проверить, что именно вы хотите, используя Galen Framework, инструмент, который я помог разработать.Это специальный инструмент со своим языком, который позволяет выразить, как должен выглядеть сайт.Он основан на Selenium и может быть запущен в Selenium Grid, если вам нужно проверить его в разных браузерах.На данный момент, что делает инструмент - это получение местоположения указанных элементов на странице и проверка их относительно друг друга.Так, например, если вы хотите проверить, что панель меню находится ниже заголовка и растягивается на ширину браузера и имеет высоту 50 пикселей, вы делаете это следующим образом:

menu
    below: header 5 px
    width: 100% of screen/width
    height: 50px

В случае, если вы не хотитечтобы утверждать точные значения, вы можете сделать это следующим образом:

menu
    below: header 0 to 5 px
    width: 90 to 100% of screen/width
    height: 45 to 55px

Инструмент полезен для тестирования адаптивного дизайна, так как вы можете использовать пользовательские теги для соответствия точным спецификациям для ваших нужд.Например, если мы хотим выразить, что «боковая панель» на рабочем столе должна быть на правой стороне экрана со статической шириной 300 пикселей, но на мобильном устройстве она должна опуститься ниже «содержимого» и растянуть до полной шириныбраузер, вы делаете это так:

@ desktop
---------------------
content
    inside: screen 0px left

side-panel
    inside: screen 0px right
    near: content 0px right
    width: 300px

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

side-panel
    below: content 0px 

Существует не так много информации об инструменте, так как он новый.На данный момент есть только одна статья, объясняющая, как протестировать адаптивную веб-страницу с помощью Galen Framework http://mindengine.net/post/2013-11-16-tdd-for-responsive-design-or-how-to-automate-testing-of-website-layout-for-different-devices/.

Вы также можете найти полную документацию на официальном сайте http://galenframework.com

Answer 2

Вы можете попробовать некоторые инструменты, подобные этому: Screenster , mogotest .Оба используют визуальное соответствие для тестирования макета.

Answer 3

Если вы заинтересованы в визуальном тестировании CSS HTML, diffcify сделает это за вас. Это библиотека nodejs, созданная поверх chrome headless

Answer 4

Что ж, если вы заинтересованы в рендеринге CSS и HTML в нескольких браузерах, вы можете автоматизировать тесты, сравнивающие скриншоты.

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

Вот небольшой тестовый проект CSS в NodeJS, который я создал как базовый: https://github.com/adcarabajal/generator-css-testing

Cheers

Answer 5

Я не думаю, что вам нужен сложный анализ изображений. Как уже упоминалось, между браузерами будут небольшие различия. Также очень важно то, что вы можете отклонить как слишком маленькое, например, изменение маленькой иконки.

Если вы хотите провести кросс-браузерное тестирование, автоматизировать его будет крайне сложно. Но вы можете создать инструмент для проверки неожиданных визуальных изменений. Сохранение требуемого состояния DOM, а затем сравнение его с измененной версией может помочь выделить проблемы. Если вы измените класс CSS, ожидая, что он будет действовать только на странице, то при выполнении ваших тестов будут обнаружены нежелательные эффекты удара на других страницах.

Answer 6

Последний вопрос: если эти инструменты не существуют, стоит ли их писать?

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