Gibt es eine Möglichkeit, das Layout mit Selenium RC zu überprüfen?

Question

Ich möchte das Layout der Seite überprüfen. Etwas ziemlich einfaches - dass ein bestimmtes div über/unter/links/rechts von einem anderen div angezeigt wird

Ist es möglich, solche Dinge zu tun?

Answer 1

Verwenden des Ruby-Clients (@selenium ist mein SeleniumDriver Objekt):

Um zu überprüfen, ob ein bestimmtes Element über einem anderen div liegt:

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

Um zu überprüfen, ob ein bestimmtes Element links von einem anderen div liegt:

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

Wenn Sie auch überprüfen möchten, dass sich die Elemente nicht überlappen, vergleichen Sie die Oberseite des Elements mit der Unterseite des anderen:

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

Answer 2

Du kannst es mit Galen Framework machen. Es ist ein Tool, das auf Selenium basiert, aber mit seiner eigenen speziellen Sprache. Die Idee ist, dass du die Positionen der Seitenelemente relativ zueinander testest. Hier ist ein grundlegendes Beispiel, wie der Testcode aussieht.

@ all
------------------------------------
header, menu, footer
    width: 100% vom Bildschirm/Breite

header
    height: 100px
    oben: menu 0px

menu
    height: 50px
    oben: content 0px

footer
    height: > 100px

content
    innerhalb: Bildschirm 0px links

@ desktop, tablet
-----------------------------------
side-panel
    width: 300px
    unter: menu 0px
    innerhalb: Bildschirm 0px rechts
    in der Nähe von: content 10px rechts

@ mobile
-----------------------------------
side-panel, content
    width: 100% vom Bildschirm/Breite

side-panel
    unter: content 5px

Für weitere Informationen kannst du diesen Artikel lesen TDD für Responsive Design