Layout Testing for Responsive Websites

Can YILDIRIM

QA Engineer

Twitter : @cyildirim_

Linkedin : https://tr.linkedin.com/in/cyildirim

Github : cyildirim

cyildirim@altayer.com

Galen Framework

• Tests layout of web application
• Responsive support
• https://github.com/galenframework/galen
• galenframework.com  | 2.3.2
• Human Readable Syntax
• Created By Ivan Shubin Software Engineer in Test @eBay

Galen Framework

Galen Framework

Galen Framework File Structure

Galen Framework | Aligned

share:
    below header-banner ~ 0px

first-item-search:
    aligned vertically all second-item-search

• Specs Reference

  • Near, Below and Above

  • Left of and Right of

  • Inside

  • Width and Height

  • Aligned, Text

  • CSS Properties

  • Centered

  • Absent, Visible

  • Contains

  • On

  • Component, Count

  • Color scheme

  • Image

• Object definition

• Ranges

• Tagging and Sections

• Variables

• Special Objects

• Importing
• Multiple objects with same specs
• for Loop
• forEach Loop
• Custom javascript functions in specs
• if statement
• Warning level for specs
• Custom rules
• Notes for specs

Galen Framework | Reporting

Execute Tests in Various Language

• Galen Spec Syntax
• Galen JavaScript Tests
• Galen Java API

Demo

Questions ?

• http://galenframework.com/

• https://www.smashingmagazine.com/2015/04/visual-test-driven-development-responsive-interface-design/