1. Detect Layout Bugs By Simulating Human Eye
Surendran Ethiraj - Project Lead - SDET
Xpanxion International Pvt Ltd

2. Abstract
A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries so testing them becomes a priority. Similarly Localization (L10n) testing deals with multiple languages and multiple builds. UI testing of localized builds requires a large investment of resources however with automation we could achieve the validation on various supported languages easily.
While automating these testing efforts, the biggest questions we would encounter are
Are the Text, controls and images are aligned properly?
Are Text, images, controls, and frames run into the edges of the screen?
Are typed text (data entry) scrolls and displays properly?
Are the padding is as expected?
The problem with automation is that, we could not assure that these are as expected, what we maximum do is to verify whether the functionality works as expected.
What if we have tool which goes in hand with any test automation framework and validate our layouts and screen edges are as expected and ensure there are no overlapping or truncation in the application?
Below in this paper we would cover a tool which would do that and provide us graphical reporting with screenshots.

3. Text Truncated

4. Text Overlapping

5. Layout Bug Detector
Layout Bug Detector is a tool developed for validating the layout bugs for a given application. Let’s first understand what layout bugs are and then see how Layout Bug Detect addresses the Layout validation requirement within the Test Automation Framework.

6. Automatically detect layout bugs
We need to know, which pixels belong to text.
We need to know, which pixels belong to a vertical or horizontal edge.
If text pixels and edge pixels overlap, we have found a layout bug.
We need to somehow report a found layout bug.

7. Simple Text Detector in Action

8. Simple Text Detector in Action

9. Simple Text Detector in Action

10. Layout Bug Detected!!!

11. How it Works?

12. Page Wise HTML Reporting

13. References & Appendix

14. Author Biography
Surendran Ethiraj: With 9+ years of Test automation experience I have worked on various projects on different domains with different tools like Selenium RC, Webdriver, Coded UI, REST Client, Sahi Pro, QEngine, Appium, Selendroid, JMeter, Neo Load and Sikuli. I admire to work on challenging environments and on challenging requirements, as it provides opportunity to learn new trades in the test automation industry. As a Project lead and with experience on Web Services, Web Application, Mobile Web and Native Applications I aid to provide solutions to QA friends within my company on any clarifications/Issues apart being responsible on leading a dedicated team.
My exposure on NFR’s (Non-Functional Requirements) has urged me to explore the open source tools and leverage them in functional automation. Also with hands on experience on Java and C# technologies makes me create tools and approaches generic to both technologies

15. Question and Answers

16. Thank You!!!