Whitepaper: Responsive Test - A test framework to cover it all
1 like192 views
The count of applications that are being developed every day is overwhelming. These applications span across various platforms and devices. Adding to this, there are Operating Systems and in some cases even hardware to consider. To deliver a completely tested product becomes a challenge with all these combinations. In this paper, we discuss issues that may arise in applications across Desktop, Web and Mobile platforms and how best to test them to ensure quality.
Ad
More Related Content
Similar to Whitepaper: Responsive Test - A test framework to cover it all (20)
More from Indium Software (20)
Ad
Recently uploaded (20)
Ad
Whitepaper: Responsive Test - A test framework to cover it all
- 1. Responsive Test - A test framework to cover it all
- 2. Responsive Test - A test framework to cover it all 2016 Indium Software | www.indiumsoft.com 1 Table of Contents 1 ABSTRACT.....................................................................................2 2 INTRODUCTION TO RWD...............................................................2 3 PLUS AND MINUS OF RWD............................................................3 3.1 PLUS BEING:.....................................................................................................................................................3 3.2 MINUS BEING:..................................................................................................................................................3 4 GENERAL ISSUES IN TESTING RWD ................................................4 5 OUR FRAMEWORK........................................................................5 5.1 GOING BY SOFTWARE TEST LIFE CYCLE: .................................................................................................................5 5.1.1 Analyse: .................................................................................................................................6 5.1.2 Plan:.......................................................................................................................................6 5.1.3 Design:...................................................................................................................................6 5.1.4 Execute: .................................................................................................................................6 5.1.5 Report:...................................................................................................................................6 6 CASE STUDY..................................................................................7 6.1 HERE ARE A FEW METRICS FOR THE SUPPORTING DATA:.............................................................................................7 6.2 COMMON ISSUES FOUND:...................................................................................................................................8 6.2.1 Web .......................................................................................................................................8 6.2.2 Mobile....................................................................................................................................8 6.3 VALUE ADDITIONS: ............................................................................................................................................9 7 CONCLUSION ................................................................................9 8 REFERENCES & APPENDIX .............................................................9
- 3. Responsive Test - A test framework to cover it all 2016 Indium Software | www.indiumsoft.com 2 1 Abstract The count of applications that are being developed every day is overwhelming. These applications span across various platforms and devices. Adding to this, there are Operating Systems and in some cases even hardware to consider. To deliver a completely tested product becomes a challenge with all these combinations. In this paper, we discuss issues that may arise in applications across Desktop, Web and Mobile platforms and how best to test them to ensure quality. 2 Introduction to RWD As the definition goes - Responsive web design is to provide the user with good viewing experience, easy reading and navigation with a minimum of resizing, panning, and scrolling across various devices. An application designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries in many ways. Surveys say – Majority of users are still with Windows and the popular browser is Chrome and iOS and Android are almost equal. Desktop applications, ready for access on your device anytime does not have to worry most of the time about internet or hot spots - unless of course there is a need to sync up with the data stored somewhere on a cloud. Even before the awe of this died, the world was turning to web applications which can be access by all at the same time. Not just being economical, these web applications are increasingly becoming more feature rich. This helps in catering to large number of end users. The deployment of the web applications (once the infrastructure is in place) is fairly easy. Before the handy touch devices entered the market, a website did not have to worry about anything beyond a computer screen and its resolution – maybe a 1024px or a 1800px. Source: http://gs.statcounter.com
- 4. Responsive Test - A test framework to cover it all 2016 Indium Software | www.indiumsoft.com 3 Now however, we have much more to this with smaller screens. So a standard website viewed on a typical PC screen will need to be shrunk down for a mobile. 3 Plus and minus of RWD This section talks about the advantages and a few drawbacks in this style of development: 3.1 Plus being: Easy maintenance – This is because there is only one set of content using CSS code applied across different platforms and devices. In RWD, web designers use CSS code. CSS code helps to swap views to fit various screen resolutions. With a central code base, adjustments can be made easily. This saves both time and money. Enhanced user experience – Responsive web design helps increase user experience on different platforms and devices. Consistent performance – A link shared by one through the web browser cannot be accessed by another on hand held device. These can be totally eliminated using responsive web design. Upcoming platforms and devices – Adaptability being the success of responsive web design, it is easy accommodate new platforms and devices’ sizes and resolutions. Gives good SEO – With just one URL for all kinds of platforms and devices, search engine optimization will not get diluted thereby improving the ranking. 3.2 Minus being: × Loading time – Responsive web design because of its unnecessary HTML / CSS code increases loading time. × Design – Wire framing can be difficult. × Development – The initial development of responsive web design takes longer. Generally, it is much easier to create RWD from scratch than to convert an existing site. × Implementation – Implementation of responsive web design usually takes longer than anticipated.
- 5. Responsive Test - A test framework to cover it all 2016 Indium Software | www.indiumsoft.com 4 4 General issues in testing RWD As you can see in this chart, a survey found online says, many people use their mobile phones / tablets to access websites, so testing a responsive web design is important because the user experience on mobile devices is quite different from desktops. Testers start testing responsive web design by resizing the browser’s window to fit the resolutions or breakpoints sizes of mobile, tablet and desktop. This technique is just for quick visual checks of the website in different resolutions and to help identify major rendering issues as we shrink or enlarge the browser windows. On the other hand, testing on real mobile devices is a total different experience with its various gestures like finger swipes, tapping, pinch-to-zoom, portrait or landscape. Just like how one has to test hovering, right-clicking, mouse scrolls, etc. on desktop and web applications. Therefore responsive design should be taken into consideration all these variances. As we have been discussing, with more and more people moving towards mobile phones or tablets to access websites, testing this can get cumbersome. Testing this on the trillions of combinations is a huge task. When we look at it broadly: •The designer may build clickable links but forget the touch •Most touch screen devices have gestures Design •A Desktop monitor will render different resolutions when scaled down to other devices •Mobile website will not work correctly on all types of devices Test Environment •Frequent changes can make automation across multiple platforms difficult •Scripts written not for responsive web design •Gap between real device and emulator testing Automation Desktop 7% Web 37% Mobile 56% Device Usage
- 6. Responsive Test - A test framework to cover it all 2016 Indium Software | www.indiumsoft.com 5 Some of the items one should consider while testing a website developed using responsive web design are: Alignment Content Hovers and selections Clicks User interface Page orientation Shrink and expand 5 Our framework In this section, we have sketched out a framework that will help a tester get organised when the scope of testing is across the various platforms. 5.1 Going by Software Test Life Cycle:
- 7. Responsive Test - A test framework to cover it all 2016 Indium Software | www.indiumsoft.com 6 5.1.1 Analyse: Create Use Cases - Understand the various modules that are common across the three applications - Desktop, Web and Mobile - and create use cases Define Automation Testing - Identify scope for automation - common features across platforms, stable functionality, regression of existing modules 5.1.2 Plan: Identify Breakpoints - Categorize devices based on screen resolution and pick the top for functional testing and the a second list for regression User Interphase Testing - Study the screen layouts and group them into categories Plan Your Devices - Plan if it going to be a device or an emulator 5.1.3 Design: User Interaction Testing - Keep in mind basic user interactions such as clicks / selections and touches / gestures Hotkey Testing - Understand shortcuts and create a list of these Write Tests - Based on the category and functionality, get the test cases / test scripts ready 5.1.4 Execute: Build Acceptance Testing - Maintain checklists for every device for build acceptance Document Verification - Support with Test Evidence samples - one per category Run Tests - Execute test cases / test scripts 5.1.5 Report: Monitor and Track - Use online spread sheets that can be used / viewed by all so no test is repeated Consolidate Reports - Maintain folders for execution reports for easy consolidation
- 8. Responsive Test - A test framework to cover it all 2016 Indium Software | www.indiumsoft.com 7 6 Case study Our framework was tried in the following project: Project Type – Life Science Team Size – 5 Iteration cycles – 3 weeks 6.1 Here are a few metrics for the supporting data: By implementing streamlining test cases in our Framework increased test coverage by ~ 20% This helped ensure product quality and assured on time delivery with maximum test coverage By introducing automation for common features across platforms, stable functionality, regression of existing modules several combination testing was possible wit parameterization which increased the defect count by ~ 35% By planned implementation of tools and enhancing the regression process in our Framework increased the defect capture rate by ~ 30% By implementing breakpoints checklists and introducing various testing types like User Interphase Testing / User Interaction Testing our Framework increased the defect trends About 50% increase was noted in Critical defects found
- 9. Responsive Test - A test framework to cover it all 2016 Indium Software | www.indiumsoft.com 8 By implementing use case and categorising in to types of platforms in our Framework test execution was reduced by ~ 50% This not only applied to execution phase but was proportionality reduces in all phases starting from design 6.2 Common issues found: 6.2.1 Web - Internet Explorer Input boxes / tabular columns are not aligned properly Search keywords not highlighted Tool Tip is not displayed - Firefox Improper alignment Bullet outline border does not properly fitted on hover - Chrome Page number is not active while hovering URL is not displayed on the print documents - Safari Unwanted underlines Extra white space in windows 6.2.2 Mobile - Android Misalignment issues Fields label alignment issue - IOS Overlapping issues Abstract/Text exceeding issues
- 10. Responsive Test - A test framework to cover it all 2016 Indium Software | www.indiumsoft.com 9 6.3 Value additions: 7 Conclusion Responsive testing is not really that complicated. All it needs is proper planning. Using our framework delivery cycle will reduce, execution and test coverage will increase. We would like to encourage you to try these few process changes / enhancements for better quality product. 8 References & Appendix https://www.netmarketshare.com/operating-system-market- share.aspx?qprid=8&qpsp=2014&qpnp=2&qptimeframe=Y&qpcustomd=&qpcustomc= http://www.seguetech.com/blog/2014/01/21/challenges-when-testing-responsive- websites http://blog.bangalorewebdesigncompany.com/advantages-and-disadvantages-of- responsive-web-design/
- 11. Responsive Test - A test framework to cover it all 2016 Indium Software | www.indiumsoft.com 10 Contact Us: USA . United Kingdom . India . MALAYSIA . Sunnyvale Suite 210, 1250 Oakmead Parkway Sunnyvale, CA – 94085. Phone: +1(408) 501-8844 Fax: +1(408) 501-8808 Atlanta Crown Office Suites 1870 The Exchange Suite 100 Atlanta, GA – 30339. Phone: +1 (770) 989-7302 Bengaluru Salarpuria Adonis, 2nd Floor Binnamangala 3/1, Old Madras Road Kadiranapalya, Indira Nagar Bengaluru – 560 038. Phone: +91-80-6784 7500 Chennai No.64, Ganesh Chambers, Eldams Road, Teynampet, Chennai – 600 018. Phone: +91-44-6606 9100 Kaula Lumpur Suite 8-1 & 8-2, Level 8, Menara CIMB No.1, Jalan Stesen Sentral 2 Kuala Lumpur – 50470. Phone: +60 (3) 2298 8465 Fax: +60 (3) 2298 8201 Sales Inquiries [email protected] [email protected] [email protected] [email protected] [email protected] General Enquiries [email protected] [email protected] Princeton Carnegie Center Suite 150, 300 Carnegie Center Princeton, NJ – 08540. Phone: +1 (609) 786-2423 London Indium Software 71-75 Shelton Street London, WC2H 9JQ.