Manual testing of Windows Metro style apps built using HTML

1. TOOL-530T Manual testing of Windows Metro style apps built using HTML Mathew Aniyan Senior Program Manager Microsoft Corporation

2. Agenda • For Windows Metro style apps built using HTML • Manual testing • Exploratory testing • Building accessible & testable Windows Metro style apps You’ll leave with examples of how to • Make your manual testing of Metro style apps efficient • Build accessible & testable Metro style apps

3. Types of testing Generalist Specialist 70% of testing happens here Manual Testing Expert coding skills Strong scripting skills Some coding skills Some scripting Creates scripts to set up lab, create data Strong coding Develops fully automated testing procedures

5. Microsoft Test ManagerAn integrated test environment

6. Tools for manual testing • Microsoft Test Manager is installed as part of Visual Studio Ultimate which is on your thumb drive • Microsoft Test Tools Adapter is installed on your Windows Tablet • It is a Windows Service and you have to enable it before you start manual testing

7. Manual testing

8. No-repro bugs

9. Manual testing with Visual Studio • No more no repro with rich actionable bugs • Now enabled for Windows Metro style apps

10. Manual tin Windows Developer Preview • Connect from Microsoft Test Manager to Windows 8 devices • Collect diagnostic information from Windows 8 devices

11. Installation of Windows Metro style apps • Developer license • Certificate • App

12. demo Manual test of Windows Metro style apps Rich actionable bugs

13. What you saw in the demo • Seamless Windows Metro style app install experience • Rich actionable bugs

14. Exploratory testing

15. Exploratory testing • For Agile teams with lighter processes • Testing without any test cases • Explore the app with specific charters

16. Exploratory testing with Visual Studio • Lightweight explore model • Rich actionable bugs from an XT session • Test cases for reusing parts of XT session • Now enabled for Windows Metro style apps

17. demo Exploratory test of Windows Metro style apps Lightweight exploration with reusable sessions

18. What you saw in the demo • Exploratory testing enabled for Windows Metro style apps • Easy test case creation from an XT session

19. A look under the hood

20. Windows Developer Preview DeviceMicrosoft Test Tools Adapter(Installed with Remote Debugger) Windows 7/Windows Developer Preview DesktopMicrosoft Test Manager (Microsoft Visual Studio 11)

21. Microsoft test tools adapter • Windows Service which communicates with Microsoft Test Manager • Orchestrates the Metro style app installation • Manages the data diagnostic adapters

22. Data diagnostic adapters • Runs on the Windows 8 device • Collects information and attaches to bug & test results • Extensible for app specific data collection

23. Making Windows Metro style apps testable

24. UI automation • Standard Windows accessibility framework • Enables automated testing of user interfaces • Independent of underlying UI frameworks

25. UIA & accessible rich internet apps • ARIA – web accessibility standard • ARIA roles, labels and events mapped to UIA • Make Windows Metro style apps accessible by implementing ARIA

26. Making testable Windows Metro style apps • Make Windows Metro style apps built using HTML accessible by following ARIA (W3C standard). • NOTE: The default tags in IE such as <button> , <input type=‘text’> etc are already accessible. We have ensured that the new WinJS controls are also accessible by default. <div role=‘button’ onclick=‘doSearch()’>Search</div>

27. Making testable Windows Metro style apps • Give appropriate ARIA labels for your controls • Fire appropriate ARIA events for your controls • Generally you set attributes in your JavaScript • <input type=‘text’ aria-label=‘PostalAddress’/> • myListItem.setAttribute(‘aria-selected’, ‘true’);

28. demo Stocks app without ARIA -Impact on action log Actions not recorded in bug

29. demo Default project templates created in Windows Express are accessible Accessible & testable by default

30. Recap

31. Manual testing tools have been enhanced to work with Windows 8 devices. These tools enable seamless installation of Metro style apps.

32. Rich bugs can be created from a formal test case or an exploratory testing session.

33. By implementing accessibility using ARIA, the Metro style apps built using HTML become testable as well.

34. Related sessions • [TOOL-529T] Unit testing your metro style apps built using XAML • [TOOL-833T] What's new in Visual Studio 11 for Application Lifecycle Management • [TOOL-818T] Taking your Application Lifecycle Management to the cloud with the Team Foundation Service • [TOOL-793T] Working on an agile team with Visual Studio 11 and Team Foundation Server 11 • [APP-843T] Reaching more customers with accessible Metro style apps in HTML5 • [APP-189T] Build assistive technologies for Windows 8

35. Further reading and documentation • Further reading • W3C ARIA technical specification • UI Automation for Accessible Rich Internet Applications • MSDN articles • Manual Testing for Windows Metro style Apps • Unit Testing for Windows Metro style Apps • Windows Metro style App Accessibility Guide

36. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

37. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.