有沒有辦法用硒檢查佈局RC

Question

我想檢查一下頁面的佈局。一些非常簡單的東西 - 某個div顯示在另一個div的上方/下方/左側/右側

是否有可能做這種類型的東西？

Answer 1

使用紅寶石客戶端（@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