Я хочу сравнить сайт до и после развертывания кода для любого изменения элементов пользовательского интерфейса. Есть ли какой-либо инструмент онлайн, который позволяет проводить такие сравнения?Как сравнить элементы пользовательского интерфейса веб-сайта после развертывания кода?
Я считаю, что вы не хотите сравнивать изменения вручную, но хотите автоматизировать процесс. Вы можете использовать веб-драйвер селена, чтобы найти элементы на веб-странице, а затем проверить, присутствуют ли они на измененном. Applitools обеспечивает структуру, которая позволяет протестировать изменения изображения в сочетании с кодом селена.
Спасибо, Евгений, это была очень полезная идея –
В соответствии с вашим комментарием по вопросу Яна, я думаю, вы ищете способ автоматизации макетирования на своем веб-сайте.
Если да, вот способ автоматизации тестирования макета веб-приложения с использованием Galen Framework. Решение с открытым исходным кодом для тестирования макета.
Этот инструмент имеет свой собственный язык и очень прост в освоении и понимании. Это Selenium based, и вы можете запустить тест в Selenium Grid, Sauce Labs, если вы хотите протестировать свое приложение в разных браузерах. даже вы можете использовать хром-драйвер или IEDriver для его локального использования без использования селеновой сетки или Sauce Labs
Этот инструмент получает местоположение указанного элемента на странице и проверяет их относительно друг друга.
Пример: Если вы хотите, чтобы проверить размеры значков и его размещение на веб-странице (предположим, он находится внутри заголовка), вы можете сделать это следующим образом:
Сначала определите объект, используя любой из доступных локаторы (CSS путь, ID, XPath)
=======================================
header css #header
icon id icon
=======================================
Теперь состояние, где именно ваш значок должен существовать внутри заголовка и что должно быть его высота и ширина. (Я принимал все значения здесь)
icon
inside: header 5px top, 10px right
width: 20px
height: 25px
Этот инструмент также может быть использован для тестирования адаптивных конструкций.
Вы можете найти полную документацию на официальном сайте http://galenframework.com
Самая лучшая часть вы можете даже создавать JAVA тесты. Гален JavaScript API также доступен вместе с примерами проектов в github.
На моем месте HTML-дизайнеры пишут спецификации (в Галена языке) на веб-страницах и на более поздних стадиях жизненного цикла приложения те же характеристики, которые используются для разработчиков/тестеров
Как вы сказали, что вы хотите сравнить веб-сайт до и после развертывания кода для любого изменения элементов пользовательского интерфейса, вы можете использовать html-отчеты, созданные Galen после каждого запуска/теста.
Что вы подразумеваете под элементами пользовательского интерфейса? Только части вашего HTML или все это? Нужно ли сравнивать элементы, которые также создаются JS после загрузки страницы? ... –
Я бы скорее сказал визуальные элементы, видимые конечным пользователем, например размер шрифта, цвет и выравнивание, расстояние между кнопками, размеры значков и их размещение на веб-странице, размеры изображения, наклейки на кнопках и т. д. –