Есть ли способ проверить макет с селеном RC

Question

Я хочу проверить макет страницы. Что-то очень простое - что определенный div отображается выше/ниже/слева/справа от другого div

Возможно ли это сделать?

Answer 1

Использование клиента Ruby (@selenium мой SeleniumDriver объект):

Чтобы проверить, если некоторый элемент находится над другой DIV:

@selenium.get_element_position_top("firstdiv") < 
    @selenium.get_element_position_top("seconddiv") 

Чтобы проверить, является ли определенный элемент остается в другой DIV:

@selenium.get_element_position_left("firstdiv") < 
    @selenium.get_element_position_left("seconddiv") 

Если вы хотите, чтобы проверить, что элементы не перекрывают друг друга, сравнивают верхнюю часть элемента к нижней части другой:

@selenium.get_element_position_top("firstdiv") + 
    @selenium.get_element_height("firstdiv") < 
    @selenium.get_element_position_top("seconddiv") 

Answer 2

Вы можете сделать это с помощью Galen Framework. Это инструмент, основанный на Selenium, но с его собственным специальным языком. Идея состоит в том, что вы проверяете расположение элементов страницы относительно друг друга. Вот базовый пример того, как выглядит тестовый код.

@ all 
------------------------------------ 
header, menu, footer 
    width: 100% of screen/width 

header 
    height: 100px 
    above: menu 0px 

menu 
    height: 50px 
    above: content 0px 

footer 
    height: > 100px 

content 
    inside: screen 0px left 

@ desktop, tablet 
----------------------------------- 
side-panel 
    width: 300px 
    below: menu 0px 
    inside: screen 0px right 
    near: content 10px right 

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

side-panel 
    below: content 5px 

Для получения дополнительной информации вы можете прочитать эту статью TDD for Responsive Design