SlickPic Mobile Testing: QA Insights & Navigation Tips

1. SLICKPIC MOBILE TESTING Srividya Narayanan Madhuri Gurrala 08/03/11

2. AGENDA Ø Introduction Ø SlickPic App • Installation • Released Features • Features under development/testing Ø Summary Ø QA's Role in SlickPic • Mobile App • QA Process followed • Issues explained • Conclusion

3. INTRODUCTION ØWhat is an App? Ø Scope of SlickPic Mobile testing •O/S – Mac OS X •Browser – Safari 5.0 •Mobile devices - iPod Touch, iPhone, iPad

4. INSTALLATION Ø From App store • Search for SlickPic in iTunes • Enter your iTunes password to install the App on your mobile devices

5. ØFrom iTunes (.ipa file) •Connect mobile device to iTunes •Copy .ipa file to Apps folder

7. Sync iTunes and mobile device to complete installation

8. RELEASED FEATURES ØSlickPic Login • Create new account or use existing account

9. Home Screen          My Gallery

10. Add new albums      Share albums

11. FEATURES UNDER DEVELOPMENT/TESTING ØShare individual photos via email Ø Send photos for enhancement

12. SUMMARY ØInstalled multiple versions of SlickPic App • Released version • Development/Production version Ø Challenges while installing App – cannot have both versions of the App in the same mobile device at the same time

13. COMING UP NEXT.. QA's role in SlickPic presented by Madhuri Gurrala

14. THE SlickPic App .. .. An approach from QA perspective,                                                         by Madhuri Gurrala

15. MOBILE APP •  As of now, SlickPic is an iPhone app.  •  App : short for Application. •  A mobile App is essentially a software program that runs on a hand-held device (phone, tablet, iPod etc). •  A mobile app can be a native app or a web app. NATIVE APP MOBILE APP WEB APP

16. Native App •  When you say mobile app, people assume you mean native app. •  A native app is a program that runs on a hand-held device which has a "smart" operating system that supports standalone software and can connect to internet via wifi or a wireless carrier network. •  Native mobile apps can be downloaded from app stores such as the Apple app store (like the SlickPic app) or the Android market. •  Native mobile apps can be downloaded from app stores such as the Apple app store (like the SlickPic app) or the Android market. •  A native app is "native" to one type of mobile operating system like iOS, Android, Blackberry, Symbian, Windows Phone, etc. Hence an iPhone app works only on iOS devices and so on. •  So, building a native mobile app is a serious undertaking in terms of developer resources, time and money.

17. Web App •  A mobile web app is more or less like any other website, optimized for viewing on a mobile device's web browser. •  A mobile web app uses technologies such as JavaScript or HTML to provide interaction, navigation or customization. •  A mobile web app is delivered wholly on the go. •  Mobile web apps need no "approval process" from the App store. •  SlickPic was started as a web application, later decided to go mobile. •  Though at this point, SlickPic is available only on Apple app store, they plan to develop it for Android market too.

18. As a QA professional, make  sure to remember a few more things about mobile apps before taking the leap into testing , • Mobile is the platform that people can have with them everywhere and at anytime. This is an exciting concept for both businesses and users. • A well designed app helps companies to keep up with times and present with new ways to increase profits. • A positive first impression is essential to relationships. Initially, a lot depends on the impression an app makes on the user. • Though amazing visuals attract customers by making a great first impression, a long-lasting relationship depends on the quality of each encounter. • An app with stunning looks but poor performance can damage trust and integrity. • If the app is not fast and responsible, it yields bad reviews and poor ratings, thus low adoptions.

19. Navigation controls Now, let's get familiar with the navigation on iPhone/iPod. You need this to venture into mobiles. Here are a few scrolling tips: •When viewing pages within the browser(Safari), to scroll a page, place your finger on the screen and move it up or down quickly. •Tap once on the screen to stop the scrolling action. •Double tap towards the bottom of the screen to navigate to the end of the page you are viewing. •To navigate to the top, double tap the top of the screen below the time display. •To manually zoom in, put your thumb and forefinger on the screen and move them apart. •Pinch your fingers together to zoom out. •Certain apps allow you to change screen orientation from portrait to landscape, simply by turning your device on its side - known as mode shift

20. 1. Briefly hold the "Home" down and while it is still down,  press the Power button. 2. The screen flashes momentarily, indicating that the screenshot has been captured. 3.Open the Photos app on your device to see the saved screenshot in "Camera Roll" or photo album. And then if you have to take a screenshot, here's how you do it on iPhone/iPod/iPad :

21. Empowered with this basic knowledge, let's get into real QA. SlickPic App is developed using Agile methodology, therefore, QA has a profound role to play. This is evident from how we have tested the app. This is how the app looks after you login,

22. QA PROCESS FOLLOWED A word on the practices and the sequence of steps we follow in QA for SlickPic app: • The development team communicates with QA through bi-weekly meetings, Release Notes and Mantis. • When a new feature is released or changes are made to an existing feature, there is "Release Notes" which provides us with a list of latest changes with all the updates on development side. • The chronology of changes with all the details is recorded in Mantis. SlickPic is Agile. Hence, to QA, Release Notes and Mantis are like oases in a desert.The issues I discuss here are all taken from the Release Notes. Here is the screenshot that shows how the Release notes issues and our reports on each issue look.

24. ISSUES EXPLAINED Issue 1: iPhone  Zoom doesn't expect the rotation at the same time. (as appeared in Release notes) Description: When a photo is zoomed in/out, rotation is not allowed. Steps to test: 1. Confirm that appropriate version of SlickPic iPhone app is installed on your device. 2. Login to your account. 3. Tap MyPhotos button. 4. Make sure you are in MyGallery. 5. Tap an album to select. 6. Tap a single photo to open it. 7. Put your index finger together with your thumb and place them on the part of the photo that you want to zoom in on. Then, drag your fingers apart, sending each one towards the opposite edge of the screen. This zooms in on page. 8. Try to rotate the photo by rotating only the fingers and not the device.  9. See that the photo can only be zoomed in but cannot be rotated. 10. To zoom out of the page, put your fingers at opposite ends of the screen and drag them towards each other, meeting in the center of the screen. 11. Repeat step 8 when photo is zoomed out and expect the photo zoomed out but cannot be rotated. Result: Pass in iPhone/iPod/iPad.

25. Issue 2: iPhone application. Changes 1-2. "Back" button looks different on certain devices. Description: The built-in "Back" button doesn't look the same on all devices. QA needs to verify this and capture screenshots. Steps to Test: 1.When logged into SlickPic,  2.Tap "MyPhotos“ 3.Tap an album. 4.Locate "Back" button on the screen. 5.Take a screenshot. (Briefly hold down the "Home" button on the front of your device. While it's down, press the "Sleep/Wake" button on the top and a screenshot of the existing screen will get saved to your photos folder. The screen will flash momentarily to indicate that a screenshot has  been captured.)

26. Conclusion: Looks like it is an iOS  version 5 issue. Issue to be dealt with later.

27. Issue 3: "Share Photo/Album" Functionality Synopsis: SlickPic iPhone App share functionality is all about sharing a SlickPic photo/album and is one of the core features. It took quite a few iterations to evolve to this point as seen in the app now. The testing ranged from ad hoc to functional to regression and has influenced the app's design as well. Steps to test: 1.Log into SlickPic account 2.Tap MyPhotos. 3.Tap a public album. 4.Tap to open a photo. Make sure the controls are visible. 5.Press the icon in the top right corner (square with arrow coming out of it) and see that a menu pops up. Please note this in the screenshots below.                                              (Steps continued..)

29. 6.  Select email this photo. 7.  Enter a valid email.8.  Compare the text in Subject line and the body of the email  with the notes in Mantis.9.  Notice any mismatch.10. Capture the screenshot.11. Tap Send.

30. 12. Tap Back. 13. From MyGallery select an unlisted album. 14. Repeat steps 4-11. 15. Report any mismatch. 16. Tap Back button. 17. From MyGallery, select a private album.18. Repeat steps 4-6 for a private album. 19. Remember that private album can't be shared and hence note the error messages and check if they are appropriate.

31. In the recipient email, verify if the photo/album is shared as desired. Verify the look, text and links and functionality.

32. QA team's Report on Share functionality: 1. Sharing a single photo through "Email this photo" option works fine 2."Share this Album" option is available when an album is selected and also when an individual photo is selected. When shared, in the recipient's email, album doesn't open when clicked on the thumbnail.  3. Doesn't prompt for password for password protection enabled albums.  4. For private albums and photos, share options are still displayed and when tapped on the option, no message is displayed. Can we display message like in slickpic.com: "This is private album and cannot be shared.."? 5. When an error message is displayed, there are 2 buttons (Ok and Cancel). Isn't just "OK" enough? 6. Also, for sharing both the album and photo, the default subject line in the email says, "I'm sharing new iPhone photo..". This sentence could be different when sharing the album.

33. Issue 4: "Submit for Edit" Functionality Description: SlickPic app allows the user to submit photos for Enhancement. QA to test the functionality and UI. Steps to test:  1.Log into SlickPic account 2.Tap MyPhotos. 3.Tap a public album. 4.Tap to open a photo. Make sure the controls are visible. 5.Press the icon in the top right corner (square with arrow coming out of it) and see that a menu pops up.  6.Select(tap) "Send for Enhancement". 7.Notice the look, user-friendliness, consistency and the functionality. (If you are familiar with the web application SlickPic, you'll see that there is a difference in the screens. Guess why? )

34. Here are the screenshots that show how it looks after you submit for Enhancement.

35. CONCLUSION This is just a glimpse of the issues in testing SlickPic app. You may get a deeper understanding by looking at our Release notes and Mantis. Resources: http://www.ehow.com/info_8712790_iphone-navigation-tips.htmlRefer to standards for mobile web applications athttp://www.w3.org/TR/mwabp/