Y at-il un moyen de vérifier la mise en page avec du sélénium RC

Question

Je veux vérifier la disposition de la page. Quelque chose de très simple - qu'un certain div est affiché ci-dessus/dessous/gauche/droite d'un autre div

Est-il possible de faire ce genre de choses?

Answer 1

Utilisation du client Ruby (@selenium est mon objet SeleniumDriver):

Pour vérifier si un certain élément est au-dessus une autre div:

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

Pour vérifier si un élément est laissé à un autre div:

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

Si vous voulez également vérifier que les éléments ne se chevauchent pas, comparer la partie supérieure de l'élément au fond de l'autre:

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

Answer 2

Vous pouvez le faire avec Galen Framework. C'est un outil basé sur Selenium mais avec son propre langage spécial. L'idée est de tester les emplacements des éléments de page les uns par rapport aux autres. Voici un exemple basique de l'apparence du code de test.

@ 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 

Pour plus d'informations, vous pouvez lire cet article TDD for Responsive Design