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

Question

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

Можно ли делать такие вещи?

Answer 1

Вы можете сделать это с 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 для адаптивного дизайна

Answer 2

Использование клиента 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")