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

有没有办法用selenium RC检查布局

2 个答案: