Automating the responsive website testing
1 likeâ˘921 views
The document discusses the automation of responsive website testing, emphasizing the importance of responsive web design and how it can be achieved through flexible layouts, media queries, and relative units. It highlights the challenges of testing across multiple devices and introduces the Galen framework as a solution, which uses Selenium for interactions and allows for human-readable specification files. Key features of Galen include error reporting and image comparison, with additional resources provided for implementation.
Automating the responsive website testing
- 1. AUTOMATING THE RESPONSIVE WEBSITE TESTING Pranathi Birudugadda
- 2. Pranathi Birudugadda Quality Enthusiast Agile Practitioner Test Automation Engineer Occasional Blogger 2 ABOUT ME @Pranathi_B https://in.linkedin.com/in/pranathi pranathibirudugadda.wordpress.com ThoughtWorks TechnologiesIndia https://github.com/PranathiB
- 3. 3 WHAT IS RESPONSIVE WEB DESIGN
- 4. 4 ⢠Write once publish everywhere ⢠Design your development to meet userâs behavior and environment
- 5. HOW IS IT ACHIEVED 5 âŤď¸A ďŹexible grid based layout âŤď¸Page element sizing should be in relative units âŤď¸Enable ďŹexible media âŤď¸Flexible images are sized in relative units âŤď¸Addition of media queries âŤď¸Allow the page to use diďŹerent CSS style rules based on the width of the browser
- 8. How to Test multiple devices/platforms??
- 9. Pages should be readable on all resolutions Content deďŹned âimportantâ need to be visible in all breakpoints Text, controls, image alignment Color, shading, gradient consistency Typed text (data entry) scrolls and displays properly THINGS TO KEEP IN MIND
- 10. Selecting set of devices for test COMMON CHALLENGES Frequent change of requirements Manual testing on all the devices?
- 11. Responsive Web Design Tester Viewport resize Browserstack Applitools Galen Framework Online website checkers Google responsive checker AVAILABLE TOOLS IN THE MARKET
- 13. Open Sourced, distributed under Apache License 2 Developed by Ivan Shubin Designed with responsiveness in mind Uses Selenium for web page interactions GALEN FRAMEWORK
- 14. HOW GALEN WORKS âŤď¸DeďŹne a set of devices that needs testing âŤď¸Write a spec ďŹle that deďŹnes the layout on these devices âŤď¸Galen opens a browser, resizes to speciďŹed dimension and veriďŹes the spec ďŹle âŤď¸Can be used along with Selenium Grid
- 15. GALEN SPEC FILE â Language used to deďŹne the layout of the page on diďŹerent devices â Uses simple english words to describe the layout â Human readable â Minimal text to deďŹne the complete page
- 17. GALEN SPEC LANGUAGE â *.gspec â Object DeďŹnition â Tagging â Relative positions (near, below, inside) â Alignment â Height and Width â Color Scheme â Image Comparison â CSS properties
- 20. OTHER FEATURES â Error Reporting using HTML and JSON â Screenshot capture â Image Comparison â Warning levels â Custom errors