Есть отличная удаленная работа для php+codeception+jenkins+allure+docker спецов. 100% remote! Присоединиться к проекту

Посоветуйте и поделитесь опытом в тестировании веб-верстки


(Garik) #1

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

Протестил, промерял, верстальщики поправили, все пиксель в пиксель!
Потом в другом месте или здесь же, что-то вставили или задели - верстка "поплыла". Заказчик в истерике, я снова промеряю все сделанные ранее страницы.

Нет гарантии, что снова разработчики или верстальщики не заденут верстку.

Вопрос:
Есть ли возможность (инструмент) как-то проверять верстку веб-страниц без линейки по какому-то шаблону, где указаны элементы страницы и их координаты или еще каким-то интересным способом?!

спасибо за советы!


(Сергей Блохин) #2

Разве что https://addons.mozilla.org/en-US/firefox/addon/pixel-perfect/


(Mykhailo Poliarush) #3

могу посоветовать http://mogotest.com/


(re1ax) #4

Вас может спасти попиксельное сравнение.

Шаг 1 - делаете эталонные скриншоты страниц.

Шаг 2 - делаете навигационный тест на Селениуме и на каждой странице делаете скриншот.

Шаг 3 - попиксельно сравниваете эталонные скриншоты с теми, что были получены во время навигационного теста.

 

У меня это всё крутится на связке Jenkins+Selenium. Скрипт написан на Питоне. Если интересно, то могу более подробно расписать.


(Alexander Petrovich) #5

Можно, если не тяжело. Хотя бы кусочек кода


(re1ax) #6

И хоть это код на Питоне, но думаю он будет понятен.

 

# coding=utf-8

from PIL import Image, ImageChops

etalon_scr = [‘D:\etalon\1.png’, ‘D:\etalon\2.png’, ‘D:\etalon\3.png’]
test_scr = []
test_pages = [‘http://abra-kadabra/page1.html’, ‘http://abra-kadabra/page2.html’, ‘http://abra-kadabra/page3.html’]

#Собсно, само сравнение картинок.
#Cначала при помощи ImageChops.difference сравним списки пикселей двух картинов и найдём их разность. На входе ему необходимы две последовательности из пикселей, на выходе он выдаёт один список из последовательностей, где показано отклонение двух пикселей.
#То есть difference((100, 100, 100), (100, 100, 100)) --> (0, 0, 0)
#difference((100, 100, 100), (50, 75, 100)) --> (50, 25, 0)
#Потом посчитаем количество “нулевых” последовательностей
#Сравним общее количество пикселей с количеством нулевых последовательностей. Очевидно, что если эти числа не равны, то картинки отличаются.
def compare_img(path_to_etalon, path_to_test):
img_1 = Image.open(path_to_etalon).load()
img_2 = Image.open(path_to_test).load()

dif_pixels = ImageChops.difference(img_1, img_2)
all_pixels = len(dif_pixels)
null_pixels = dif_pixels.count((0, 0, 0))  # Посчитаем, что у нас RGB-картинка.

if all_pixels != null_pixels:
    print 'Беда-беда, картинки отличаются. 

Ходим по страницам, делаем скриншоты и добавляем путь к скриншотам в список

for x in range(len(test_pages)):
driver.get(test_pages[x])
scr_name = ‘D:\test\test-’ + str(x + 1) + ‘.png’
driver.get_screenshot_as_file(scr_name)
test_scr.append(scr_name)

#Сравниваем скриншоты
for x in range(len(etalon_scr)):
compare_img(etalon_scr[x], test_scr[x])

 

По идее скрипт должен быть рабочим :) Команды писал по памяти и где-то мог промахнуться. Если что, то обращайтесь к доке по Питону 2.7 (http://docs.python.org/library/) и Python Image Library (http://www.pythonware.com/products/pil/).

Если что-то непонятно в логике работы скрипта, то задавайте вопросы - отвечу по возможности.

P.S. Для красоты сюда ещё можно добавить функционал по обведению в кружочки отличающихся пикселей, но эту часть кода  уже сами пишите :)


(Garik) #7

Всем огромное спасибо! За код и альтернативные решения!

Кому интересно решения этой проблемы - всё что я насобирал (начал копать благодаря наводке TIT-а и polusok)
 


(Garik) #8

Если локально тестить или верстать, то подходит.

А если тестить живой сайт, то не очень.


(ArtemIljin) #9

а вот недавно на хабре обуждали: http://habrahabr.ru/post/152115/#habracut