This document discusses responsive web design testing across different devices. It introduces responsive web design and the concept of viewports. It then discusses tools for testing responsive designs visually, including PhantomCSS, Galen, Wraith and Backstopjs. It focuses on Galen, an open source layout testing tool, describing its key features and how to define tests using Galen specs. Examples are provided of defining page objects, tags and test instructions in Galen specs. The document also shows how to parameterize and run Galen tests across different device sizes and tags.

1. Responsive Design Testing across Devices
- Bharathan/Mari

2. Responsive Web Design
?

3. Responsive Web Design…
Means that a web site works optimally well for
users regardless of the device they are using.

4. Responsive Web Design Testing

5. Viewports

6. Testing Responsive Web Design
● Basic Rules
– Pages should be readable/user interactable on all
resolutions.
– Never visualize the horizontal scroll bar in the page.
– Text and images that fit proportionately in relation to
the width of the page
– Use of less image and more design structure
– At the end of the day its all about utilizing the user
view port for best user experience

7. Content

8. Menu bar

9. Listing

10. Listing

11. Carousel

12. Why we need Visual Testing
1.CSS unit testing is not possible
2.Slight change in values affect the DOM
randomly
3.Refactoring/Cleaning up of CSS code might
break at various level,After all, the C in CSS
does stand for cascading... order absolutely
matters.

13. What are the visual testing tools
available for automation?
1.PhantomCSS
2.Galen
3.Wraith
4.Backstopjs

14. Galen is a open source layout testing tool
created by Ivan Shubin developer at ebay,
Netherland
1. Easy to learn
2. Readable and Understandable syntax definition - Galen Spec
3. No need to verify entire page, Supports component level
validation
4. Style and font validation is also supported
5. Inbuilt test framework with good reporting options
6. Easy to integrate with selenium
7. Good Documentation
Why Galen

16. Galen Specs
Language

17. 1. *.spec
2. Page object definition
3. @tags (desktop, mobile)
4. Spec instructions

18. Object definition
======================
header id header
logo-box css .logo-box
logo id title
menu css .primary-nav
mobile-menu id mobile-
menu
facebook css .facebook_url
======================

19. @@ Parameterized
|device |size |tags|
|desktop |1600x800 |all,desktop|
|tablet |768x1024 |all,tablet|
|mobile |350x568 |all,mobile|
Homepage in ${device} device
http://localhost:4000 ${size}
check spec/responsive.spec --include "${tags}"

20. Run tests
galen test test-suite.test --htmlreport reports

22. References
https://github.com/devishree90/
Galen_demo
http://galenframework.com/

23. Thanks
https://github.com/reachbharathan/Sample-Galen-Test