Integrating Team Foundation Server, Microsoft Test Manager and Coded UI Tests En este laboratorio aprenderás a utilizar un conjunto de herramientas de Visual Studio 2012 (VS), Microsoft Test Manager (MTM) y la combinación de estas herramientas con Visual Studio Team Foundation (TFS) con el fin de aplicarlas en la gestión del ciclo de vida de aplicaciones (ALM). Estas herramientas (TFS, MTM, VS) pueden ayudar a un equipo de desarrolladores, ingenieros de calidad, etc. a crear software con calidad y agilidad, el cual será valorado por un cliente final. Abreviaciones: - TFS Team Foundation Server. - MTM Microsoft Test Manager. - VS Visual Studio. Durante este laboratorio tú trabajarás en diferentes áreas que normalmente no son cubiertas por la misma persona: - Asumirás el rol de Developer. - Asumirás el rol de Tester. - Y por último trabajaras en el área de Automatización (Automation) -1-
1. VS and TFS [Developer] A. Revisar la solución Tailspin Toys. 1. Abre Visual Studio 2012. Lo puedes hacer desde el acceso directo ubicado en el Escritorio o desde Start All Programs Microsoft Visual Studio 2012 Visual Studio 2012. 2. En la página Start Page selecciona Connect to Team Foundation Server 3. En la ventana Team Explorer Connect y has dos clicks sobre el proyecto Tailspin Toys. 4. Abre el proyecto seleccionando File Open Project/Solution. Navega a la siguiente dirección c:\tailspintoyproject y abre al archivo con la extensión TailspinToys.sln. 5. Compila la solución presionando el botón F6. 6. Ejecuta la solución: presiona el botón F5 o el botón Internet Explorer. 7. Prueba la aplicación. Notarás que la aplicación aun no esta completa y que su funcionamiento es limitado. En el siguiente paso agregaremos algunas funcionalidades más. B. Agregar Add item to Cart feature. 1. Busca y abre la clase ShoppingCart y remplaza el siguiente código (empezando en la línea 71): public void AddItem(Product product) AddItem(product, 1); public void AddItem(Product product, int quantity) AddItem(product, quantity, DateTime.Now); public void AddItem(Product product, int quantity, DateTime dateadded) ShoppingCartItem item = FindItem(product); if (quantity!= 0) if (item!= null) if (quantity!= 0) AdjustQuantity(product, item.quantity); else if (quantity > 0) item = new ShoppingCartItem(product, quantity, dateadded); Items.Add(item); -2-
2. Busca y abre la clase CartController y remplaza el siguiente código (empezando en la línea 32): [AcceptVerbs(HttpVerbs.Post)] public ActionResult AddItem(string sku) Product p = _productrepository.getproduct(sku); if (p == null) throw new InvalidOperationException("invalid sku"); this.currentcart.additem(p); this.savecart(); return RedirectToAction("show"); 3. Compila la solución presionando el botón F6. Ejecuta y prueba los cambios realizados. C. Subir los cambios realizados a TFS desde VS. 1. En la ventana Team Explorer selecciona el link Pending Changes, puedes ver las clases (.cs) en donde hubieron cambios recientes, ahí deberían estar las clases ShoppingCart y CartController. 2. Selecciona la opción Check In. Los nuevos cambios estarán en Team Foundation. También puedes agregar un comentario de tus cambios antes de hacer Check In. D. Generar un nuevo build desde VS. 1. En la ventana Team Explorer presiona el icono Home. 2. En la ventana Team Explorer Home selecciona el link Builds. 3. En la ventana Team Explorer Builds selecciona la opción New Build Definition. 4. En la ventana Build Definition, en el tab General, en la sección Build Definition name ingresa MyBuildDefinition y para Queue processing selecciona la opción Enabled. 5. Selecciona el tab Trigger. 6. Selecciona la opción Manual Check-ins do not Trigger a new build. 7. Las opciones en el tab Source Settings se quedan por defecto. 8. Selecciona el tab Build Defaults. 9. En la sección Staging location selecciona la opción Copy build output to the following drop folder. 10. Desde Windows Explorer navega al disco C:\ y crea un nuevo folder. Renombra el folder recién creado a MyBuildFolder y luego has un click derecho, selecciona la opción Properties, selecciona el tab Sharing y luego selecciona la opción Share. 11. En la ventana File Sharing, en el combo box selecciona Everyone. 12. Presiona el botón Add. 13. Cambia el Permission Level de Read a Read/Write. -3-
14. Presiona el botón Share. 15. Si aparece la ventana Network discovery and file sharing, selecciona la opción Yes. 16. Finalmente en la ventana File Sharing selecciona el botón Done. 17. Cierra la ventana de propiedades de MyBuildFolder folder. 18. De vuelta en Visual Studio en el tab Build Defaults, en la sección Copy build output to the following drop folder ingresa \\vsalm\mybuildfolder 19. Guarda la configuración seleccionando el icono Save o Save All o Ctrl+S. 20. Cierra el tab MyBuildDefinition. 21. En la ventana Team Explorer Builds, en la sección All Build Definitions has un click derecho sobre MyBuildDefinition y selecciona la opción Queue New Build 22. En la ventana Queue Build presiona el botón Queue. 23. En la ventana Team Explorer Builds, en la sección My Builds has dos clicks sobre el build en proceso con el objetivo de revisar su estado. 24. Una vez que el proceso del build finalice, deberías ver el mensaje Build succeeded. Ya tenemos un nuevo build. -4-
2. MTM [Tester] A. Crear un nuevo Test Plan. 1. Abre Microsoft Test Manager. Lo puedes hacer desde el acceso directo ubicado en el Escritorio. O desde: Start All Programs Microsoft Visual Studio 2012 Microsoft Test Manager. 2. En la ventana Test Center presiona e botón Add con el fin de agregar un nuevo test plan. 3. En la ventana Add test plan tenemos que llenar Plan name, Area path e Iteration. 4. Para Plan name, ingresa Release 1.0. 5. Para Area path, selecciona Tailspin Toys. 6. Para Iteration, selecciona Tailspin Toys\Release 1\Sprint 1. 7. Presiona el botón Add. 8. En la ventana Testing Center, selecciona el nuevo test plan que acabamos de crear Release 1.0 y presiona el botón Select Plan. 9. Selecciona el link Properties con el fin de abrir las propiedades de este nuevo test plan. 10. La primera sección te permite definir la información básica de este test plan, por ejemplo, nombre, descripción, iteración, estado, encargado, etc. La sección Run Settings te permite definir como los test cases manuales y automatizados serán ejecutados, cual ambiente usar e incluso podemos especificar el build number que usaremos. 11. Para la descripción, ingresa Test plan for Tailspin Toys Web 1.0. 12. Selecciona el botón Save para guardar los cambios efectuados en el test plan. 13. En la sección Builds, selecciona el link Modify. Seleccionaremos un build con el fin de usarlo en nuestro testeo manual. 14. En la ventana Assign Build, selecciona el primer build cuyo nombre contiene el sufijo (Latest) y selecciona el botón Assign to Plan. 15. Selecciona el botón Close (x). 16. Finalmente selecciona el botón Save and Close. -5-
B. Agregar un nuevo requerimiento al Test Plan 1. En Microsoft Test Manager selecciona Plan tab y luego selecciona el link Contents. 2. En la ventana Plan \ Contents selecciona el nodo Release 1.0 y luego selecciona el botón Add requirements. 3. En la ventana Add existing requirements to this test plan selecciona el botón Run para listar los requerimientos existentes. 4. Selecciona el requerimiento Como cliente debería ser capaz de añadir dos elementos iguales al cart y persona el botón Add requirements to plan. Este cerrara la ventana Add existing requirements to this test plan y volveremos a la ventana Plan \ Contents. C. Agregar un nuevo TestCase (la idea es cubrir el nuevo requerimiento recién agregado en B) 1. Selecciona el requerimiento Como cliente debería ser capaz de añadir dos elementos iguales al cart y presiona el botón New. 2. Para el Title de este nuevo test case ingresa Al hacer click 2 veces en el botón Add to cart se ingresan dos artículos en el cart. 3. Dejamos la información encontrada en las secciones Status y Details por defecto. 4. Ingresa los siguientes Steps para el test case: 1. Abre Internet Explorer y navega a la siguiente dirección http://localhost:<port>. Por ejemplo: http://localhost:1178 2. Selecciona el botón Model Airplanes. 3. Selecciona el Fourth Coffee Flyer link. 4. Selecciona el botón Add To Cart. 5. Selecciona el botón Model Airplanes. 6. Selecciona el Fourth Coffee Flyer link. 7. Selecciona nuevamente el botón Add to Cart. 8. Verifica que la columna Quantity tenga 2 items. 8.1. En la columna Expected Result ingresa: La columna Quantity debería contener 2 items. 9. Vacía el cart seleccionando el botón (x) de la columna Remove. 10. Cierra la application. 5. Selecciona Save and Close. 6. En la ventana Plan \ Contents ahora deberías ver el nuevo test case que acabamos de agregar. D. Ejecutar Test Cases. 1. Selecciona el botón Test desde el menú principal superior. 2. En el panel izquierdo, expande el nodo principal Release 1.0 y luego selecciona el requerimiento Como cliente debería -6-
ser capaz de añadir dos elementos iguales al cart. 3. En el panel derecho, selecciona el test case Al hacer click 2 veces en el botón Add to cart se ingresan dos artículos en el cart y luego presiona el botón Run. 4. Microsoft Test Runner es ejecutado. 5. Selecciona el checkbox Create action recording. Luego presiona el botón Start Test. 1. Espera a que Test Runner se inicialice completamente, luego ejecuta Internet Explorer y navega a la siguiente dirección: http://localhost:<port>. Por ejemplo: http://localhost:1178 6. Después de que el sitio TailspinToys sea cargado, podremos marcar el primer paso de nuestro test case como Pass, para esto presiona el botón dropdown ubicado junto al primer paso del test case y selecciona Pass. Podrás ver que automáticamente se establece como activo el siguiente paso (el segundo) del test case. 7. Ejecuta los siguientes pasos del test case siguiendo la misma idea que el paso 1. Ejecuta los pasos hasta el paso 8 (Verifica que la columna Quantity tenga 2 items) 8. Podrás ver que el valor de la columna Quantity es 1, lo cual claramente no es lo esperado. Hemos encontrado un bug y tenemos que reportarlo. Marca este paso como Fail. 9. Ingresa un comentario en la caja de texto que apareció, por ejemplo: Solo un item es registrado en el cart. 10. Inserta un screenshot mostrando el área en la cual podemos ver el bug. Selecciona el botón Add screenshot ubicado en la parte superior del primer paso del test case. E. Reportar bugs. 1. Continuado con la tarea D. 2. Selecciona el botón Create bug el cual se encentra ubicado junto al botón Add screenshot. 3. En la ventana New Bug, ingresa un título para el bug, en Title ingresa por ejemplo: Agregar el mismo item dos veces al cart no funciona. Asigna el bug al usuario Administrator. 4. Selecciona el botón Save and close ubicado en la parte inferior de la ventana New Bug. 5. Vuelva a la ventana Test Runner y finaliza los dos pasos que aún nos quedan pendientes: Vacía el cart seleccionando el botón (x) de la columna Remove y Cierra la application. 6. Finalmente selecciona al botón Save and close ubicado en los más alto de la ventana Test Runner. 7. Selecciona el link Verify Bugs ubicado en la parte superior de la ventana de Test Manager. Aquí podemos ver el bug que acabamos de reportar. -7-
3. De vuelta a VS and TFS [Developer] A. Arreglar el bug reportado en la tarea 2-E. 1. Abre Visual Studio 2012. Lo puedes hacer desde el acceso directo ubicado en el Escritorio o desde Start All Programs Microsoft Visual Studio 2012 Visual Studio 2012. 2. Abre el proyecto seleccionando File Open Project/Solution. Navega a la siguiente dirección c:\tailspintoyproject y abre al archivo con la extensión TailspinToys.sln. 3. Busca y abre la clase ShoppingCart. 4. Navega hasta el método: public void AddItem(Product product, int quantity, DateTime dateadded) 5. Cambia el siguiente código: Por: if (quantity!= 0) AdjustQuantity(product, item.quantity); if (quantity!= 0) AdjustQuantity(product, item.quantity + quantity); 6. Compila la solución presionando el botón F6. B. Subir los cambios y arreglos realizados a TFS. 1. En la ventana Team Explorer selecciona el icono Home y selecciona el link Pending Changes, puedes ver la ShoppingCart en donde agregamos el arreglo para el bug recientemente. 2. Selecciona la opción Check In. C. Marcar el bug como Resolved. 1. En la ventana Team Explorer selecciona el icono Home y selecciona el link My Work. 2. En la sección Available Work Items selecciona el bug Agregar el mismo item dos veces al cart no funciona. 3. Hazle un click derecho y selecciona la opción Open. 4. En la sección Status, cambia el State de New a Done. 5. Guarda los cambios seleccionando el icono Save o Save All. D. Generar un nuevo build desde VS. 1. En la ventana Team Explorer presiona el icono Home. 2. En la ventana Team Explorer Home selecciona el link Builds. 3. En la ventana Team Explorer Builds, en la sección All Build Definitions has un click derecho sobre MyBuildDefinition y -8-
selecciona la opción Queue New Build 4. En la ventana Queue Build presiona el botón Queue. 5. En la ventana Team Explorer Builds, en la sección My Builds has dos clicks sobre el build en proceso con el objetivo de revisar su estado. 6. Una vez que el proceso del build finalice, deberías ver el mensaje Build succeeded. -9-
4. De vuelta a MTM [Tester] A. Validar si el issue fue arreglado ejecutando nuevamente los Test Cases relacionados. 1. Abre nuevamente Microsoft Test Manager. Lo puedes hacer desde el acceso directo ubicado en el Escritorio. O desde: Start All Programs Microsoft Visual Studio 2012 Microsoft Test Manager. 2. Selecciona el botón Test desde el menú principal superior. 3. En el panel izquierdo, expande el nodo principal Release 1.0 y luego selecciona el requerimiento Como cliente debería ser capaz de añadir dos elementos iguales al cart. 4. En el panel derecho, selecciona el test case Al hacer click 2 veces en el botón Add to cart se ingresan dos artículos en el cart y luego presiona el botón Run. 5. Microsoft Test Runner es ejecutado. 6. Selecciona el botón Start Test. 7. Espera a que Test Runner se inicialice completamente. 8. Selecciona los pasos del 1 al 7 (selecciona el primer paso, luego presiona el botón Shift y luego selecciona el paso 7) 9. Presiona el botón Play. Suelta el mouse, veras que el los pasos se ejecutan automáticamente. 10. Podrás ver que el valor de la columna Quantity es 2, el bug ya no se reproduce, el bug fue arreglado. Marca este paso como Pass 11. Finaliza los pasos: Vacía el cart seleccionando el botón (x) de la columna Remove y Cierra la application. 12. Presiona el botón End test. 13. Selecciona Save and Close. -10-
5. VS [Automation] A. Crear test cases automatizados usando test cases manuales existentes en MTM. 1. Abre Visual Studio 2012 (nueva instancia). Lo puedes hacer desde el acceso directo ubicado en el Escritorio o desde Start All Programs Microsoft Visual Studio 2012 Visual Studio 2012. 2. En la página Start Page selecciona Connect to Team Foundation Server... 3. Selecciona Team Explorer Connect y has dos clicks sobre el proyecto Tailspin Toys. Selecciona Yes si aparece el dialogo de confirmación de conexión. 4. Crea un nuevo proyecto, un Testing Project: File New Project 5. En la ventana New Project, selecciona: Templates Visual C# Test Coded UI Test Project y presiona el botón OK. Dejamos la información referente a: Name y Location por defecto. 6. Ahora, hay 2 maneras de generar el código para este nuestro nuevo CodedUI Project. La primera opción es usar Coded UI Test Builder (esta opción nos permite generar código manualmente). La segunda opción nos permite usar código ya existente en Microsoft Test Manager, selecciona la opción Use an existing action recording y presiona el botón OK. 7. Tenemos que buscar un test case, selecciona el Title contains: radio button e ingresa Al hacer click 2 veces. 8. Presiona el botón Find y selecciona el test case que aparece en la sección: Select items to add to the work item list. Presiona el botón OK 9. Busca el método llamado: CodedUITestMethod1 ubicado en la clase CodedUITest1.cs. Aquí cada línea representa una acción que fue creada durante el proceso de Test Generation con Microsoft Test Runner. 10. Abre clase UIMap.Designer.cs e inspecciona el código. Esta clase contiene el código Generado con MTM. 11. Cierra la clase UIMap.Designer.cs y vuelve a la clase CodedUITest1.cs. Compila la solución presionando el botón F6. 12. Has click derecho dentro el método CodedUITestMethod1 y selecciona la opción Run Tests. Suelta el mouse, el test se ejecutara solo y automáticamente. El test abrirá una nueva instancia del Internet Explorer. 13. Tan pronto el test termine, podemos verificar que el test fue marcado como passed revisando el contenido de la ventana Test Explorer. Ten en cuenta que no estamos realizando ninguna validación aun. -11-
B. Crear test cases automatizados desde cero usando Coded UI Test Builder. 2. Abre Internet Explorer y navega a la siguiente dirección: http://localhost:<port>. Por ejemplo: http://localhost:1178 3. Selecciona el botón Model Airplanes. 4. Selecciona el Fourth Coffee Flyer link. 5. Selecciona el botón Add To Cart. 6. Retorna al método CodedUITestMethod1 ubicado en la clase CodedUITest1.cs y agrega una línea en blanco antes de la línea referente a vaciar el cart. 7. Has un click derecho sobre la línea en blanco y selecciona: Generate Code for Coded UI Test Use Coded UI Test Builder Esto cargara la ventana Coded UI Test Builder. Coded UI Test Builder es usado para grabar acciones y agregar validaciones Asserts 8. Agrega una validación para verificar que el valor en la caja de texto Quantity es igual a 2. Para esto: Has un Drag and Drop del botón Assert ubicado en el Coded UI Test Builder panel hacia la caja de texto Quantity. Esta action cargara la ventana Coded UI Test Builder Properties. 9. Selecciona la propiedad Text y has click sobre el botón Add Assertion. 10. Esta action cargara la ventana Add Assertion for: Text. Verifica que el comparador que estemos usando sea AreEqual y que el Comparison Value sea 2. Luego presiona al botón OK. 11. Verifica que un icono check haya sido agregado junto a la propiedad Text. 12. Presiona el botón Generate Code en la consola del Coded UI Test Builder. 13. Esta acción cargara la ventana Generate Code, ingresa QuantityEqualsTwo como nombre del método y finalmente has click sobre el botón Add and Generate. 14. Cierra el Coded UI Test Builder. 15. Vuelve al Internet Explorer y remueve tu Fourth Coffee Flyer item de tu cart. 16. Cierra el Internet Explorer y vuelve a Visual Studio. 17. Verifica que el código para la validación haya sigo agregado (QuantityEqualsTwo). 18. Has click derecho dentro el método CodedUITestMethod1 y selecciona la opción Run Tests. Suelta el mouse. El test debería terminar satisfactoriamente esta vez incluyendo la validación. -12-