Compartir a través de

Tutorial: Reproducir pruebas de IU codificadas mediante Firefox

  • Artículo

Puede crear pruebas automatizadas de la interfaz de usuario (IU) conocidas como pruebas de IU codificadas. Estas pruebas proporcionan una comprobación funcional de la interfaz de usuario y la validación de los controles de la interfaz de usuario. Las pruebas de IU codificadas permiten probar la funcionalidad de la interfaz de usuario mediante Microsoft Visual Studio 2010 Feature Pack 2, grabar las acciones de la interfaz de usuario en un sitio web o en una aplicación basada en web y crear pruebas de IU codificadas. Puede utilizar Windows Internet Explorer para grabar las acciones y luego reproducir las pruebas con el explorador Mozilla Firefox.

Para obtener más información sobre las pruebas de interfaz de usuario codificadas, vea Probar la interfaz de usuario con pruebas de IU automatizadas.

Nota de precauciónPrecaución

Una vez completada la instalación de Microsoft Visual Studio 2010 Feature Pack 2, si desea utilizar el paquete de pruebas para Mozilla Firefox, debe instalar y configurar la extensión de aplicación auxiliar de pruebas para Mozilla Firefox. Para obtener más información, vea Cómo: Instalar la extensión Test Helper para Mozilla Firefox.
Nota de precauciónPrecaución

Solo puede utilizar el explorador Firefox para reproducir pruebas de IU codificadas. No se admite la grabación de pruebas de IU codificadas en sitios web y aplicaciones web mediante el explorador Firefox.

Requisitos previos

Para este tutorial, necesitará:

  • Visual Studio 2010 Ultimate, Visual Studio 2010 Premium o Test Professional 2010.

  • Versión 3.5 o 3.6 del explorador web Mozilla Firefox.

  • Compruebe que ha instalado Microsoft Visual Studio 2010 Feature Pack 2 y la extensión de aplicación auxiliar de pruebas para Mozilla Firefox. La información sobre la instalación se incluye en la introducción.

Crear una aplicación web

Para crear la aplicación Web

  1. En Visual Studio 2010, en el menú Archivo, haga clic en Nuevo y, a continuación, haga clic en Proyecto.

    Aparecerá el cuadro de diálogo Nuevo proyecto.

  2. En Plantillas instaladas, expanda el lenguaje de programación que desee y, a continuación, haga clic en Web.

  3. En la lista de tipos de proyectos web, seleccione Aplicación web vacía de ASP.NET.

    Nota

    Escribirá una cantidad mínima de código en este tutorial.

  4. En el cuadro Nombre, escriba ColorWebApp.

  5. En el cuadro Ubicación, especifique la carpeta donde desea crear la aplicación web.

  6. Seleccione Crear directorio para la solución.

  7. Haga clic en Aceptar.

  8. En Explorador de soluciones, compruebe que el nuevo proyecto ColorWebApp está seleccionado.

  9. En el menú Proyecto, elija Agregar nuevo elemento.

    Aparecerá el cuadro de diálogo Agregar nuevo elemento.

  10. En la lista de elementos, elija Web Forms.

  11. En el cuadro de texto Nombre, escriba Default.aspx y, a continuación, haga clic en Agregar.

Agregar controles a la aplicación Web

Para agregar controles a la aplicación Web

  1. En el Explorador de soluciones, haga clic con el botón secundario en Default.aspx y elija Ver diseñador.

    Se mostrará una página en blanco.

  2. Si el cuadro de herramientas no está visible haga clic en Ver y, a continuación, haga clic en Cuadro de herramientas.

  3. En el grupo Estándar, arrastre un control RadioButtonList a la página.

    Se agregará un control RadioButtonList a la superficie de diseño.

  4. En el recuadro de etiquetas de acciones Tareas de RadioButtonList, haga clic en el vínculo EditItems.

    Aparecerá el Editor de la colección ListItem.

    Nota

    Otra forma de mostrar el Editor de la colección ListItem es editando la colección Items en la ventana Propiedades.

  5. Haga clic en Agregar para agregar un nuevo elemento.

  6. En Propiedades ListItem:

    1. Cambie la propiedad Text a Red.

    2. Establezca la propiedad Selected en True.

      Editor de la colección ListItem

  7. Haga clic en Agregar para agregar otro elemento.

  8. En Propiedades ListItem, cambie la propiedad Text a Blue.

  9. Haga clic en Aceptar para cerrar el Editor de la colección ListItem.

  10. Arrastre un control Button a la página. En la ventana Propiedades, cambie la propiedad Texto por Enviar.

    Diseño de ColorWebApp

  11. En el menú Archivo, haga clic en Guardar todo.

Agregar páginas a la aplicación Web

Para agregar páginas a la aplicación Web

  1. En el menú Proyecto, haga clic en Agregar nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, seleccione Formulario web de la lista de plantillas. En el cuadro Nombre, escriba Red.aspx y haga clic en Agregar.

  3. En la parte inferior de la ventana de documento, haga clic en la pestaña Diseño para pasar a la Vista de diseño.

  4. Arrastre un control Label a la página. En la ventana Propiedades, establezca la propiedad Texto en Rojo. Establezca la propiedad ForeColor en Rojo.

  5. En el menú Proyecto, haga clic en Agregar nuevo elemento.

  6. En el cuadro de diálogo Agregar nuevo elemento, haga clic en la plantilla Web Forms y denomínela Blue.aspx. Haga clic en Agregar.

  7. En la parte inferior de la ventana de documento, haga clic en la pestaña Diseño para pasar a la Vista de diseño.

  8. Arrastre un control Label a la página. En la ventana Propiedades, establezca la propiedad Texto en Azul. Establezca la propiedad ForeColor en Azul.

  9. En el menú Archivo, haga clic en Guardar todo.

Agregar funcionalidad a la aplicación Web

Para agregar funcionalidad a la aplicación Web

  1. En el Explorador de soluciones, haga clic con el botón secundario en Default.aspx y haga clic en Ver diseñador.

  2. Haga doble clic en el control Button Submit. Visual Studio cambia al código de página y crea un esqueleto de controlador de eventos para el evento Click del control Button.

  3. Agregue el código siguiente al controlador de eventos:

    if (this.RadioButtonList1.SelectedValue == "Blue")
{
    Response.Redirect("Blue.aspx");
}
else
{
    Response.Redirect("Red.aspx");
}

    If RadioButtonList1.SelectedValue = "Blue" Then
    Response.Redirect("Blue.aspx")
Else
    Response.Redirect("Red.aspx")
End If

  4. En el menú Archivo, haga clic en Guardar todo.

Comprobar que la aplicación web se ejecuta correctamente

Nota de precauciónPrecaución

En este procedimiento se supone que Microsoft Internet Explorer está establecido como el explorador web predeterminado.

Para ejecutar la aplicación web

  1. En el Explorador de soluciones, haga clic con el botón secundario en Default.aspx y, a continuación, haga clic en Establecer como página principal.

  2. Presione CTRL+F5 para ejecutar la aplicación Web en el explorador. Verá la primera página.

  3. Haga clic en Red y, a continuación, haga clic en Submit. Si la aplicación funciona correctamente, irá a la página con el control Label que indica Rojo.

  4. Vuelva a la primera página.

  5. Haga clic en Blue y, a continuación, haga clic en Submit. Si la aplicación funciona correctamente, irá a la página con el control Label que indica Azul.

  6. Copie la dirección de la aplicación Web en el portapapeles o en un archivo del Bloc de notas. Por ejemplo, la dirección tendrá el siguiente aspecto: https://localhost:<númeroDePuerto>/ Default.aspx

  7. Cierre el explorador.

Crear y ejecutar una prueba de IU codificada para la aplicación web

Para crear y ejecutar una prueba de IU codificada

  1. En el Explorador de soluciones, haga clic con el botón secundario en la solución, haga clic en Agregar y, a continuación, seleccione Nuevo proyecto.

    Aparecerá el cuadro de diálogo Agregar nuevo proyecto.

  2. En el recuadro Plantillas instaladas, expanda Visual Basic o Visual C# y, a continuación, seleccione Prueba.

  3. En el recuadro central, seleccione la plantilla Proyecto de prueba.

  4. Haga clic en Aceptar.

    En el Explorador de soluciones, se agrega a la solución el nuevo proyecto de prueba denominado TestProject1 y el archivo UnitTest1.cs o UnitTest1.vb aparece en el Editor de código. Puede cerrar el archivo UnitTest1 porque no se utiliza en este tutorial.

  5. En el Explorador de soluciones, haga clic con el botón secundario en TestProject1, haga clic en Agregar y, a continuación, seleccione Prueba de IU codificada.

    Aparece el cuadro de diálogo Generar código para prueba de IU codificada.

  6. Seleccione la opción Grabar acciones, editar asignación de IU o agregar aserciones y haga clic en Aceptar.

    Aparece UIMap – Generador de pruebas de IU codificadas.

    Para obtener más información acerca de las opciones del cuadro de diálogo, vea Cómo: Crear una prueba de IU codificada.

  7. Haga clic en Iniciar grabación en UIMap – Generador de pruebas de IU codificadas. En unos segundos, el Generador de pruebas de IU codificadas estará listo.

    Iniciar grabación de IU

  8. Inicie Internet Explorer.

  9. En la barra de direcciones de Internet Explorer, escriba la dirección de la aplicación web que copió en un procedimiento anterior. Por ejemplo:

    https://localhost:<númeroDePuerto>/ Default.aspx

    (Opcional) navegue por la aplicación web presionando el botón Rojo, Azul y el botón atrás del explorador.

  10. Cierre Internet Explorer.

  11. En UIMap - Generador de pruebas de IU codificadas, haga clic en Generar código.

  12. En el nombre del método, escriba SimpleWebAppTest y haga clic en Agregar y generar. En unos segundos, aparece la prueba de IU codificada y se agrega a la Solución.

    Generar código

  13. Cierre UIMap – Generador de pruebas de IU codificadas.

    El archivo CodedUITest1.cs aparece en el Editor de código.

Confirmar que la prueba de IU codificada se reproduce correctamente en Internet Explorer

  • En el archivo CodedUITest1.cs, busque el método CodedUITestMethod1, haga clic con el botón secundario y seleccione Ejecutar pruebas.

    Mientras se ejecuta la prueba de IU codificada, la aplicación ColorWebApp está visible. Realiza los pasos que realizó en el procedimiento anterior.

Agregar una propiedad a la reproducción de SpecifyFirefox y volver a ejecutar la prueba de IU codificada

  1. En el archivo CodedUITest1.cs, busque el método MyTestInitialize () que utiliza TestInitializeAttribute, quite los comentarios del código y agregue la propiedad CurrentBrowser con su valor asignado como "FireFox" tal y como se muestra en el código siguiente:

    SugerenciaSugerencia

    Opcionalmente, en lugar de agregar la propiedad BrowserWindow, puede crear una variable de entorno denominada CodedUITestCurrentBrowser con un valor de "Firefox" y, a continuación, reiniciar Visual Studio.

    		 
    ////Use TestInitialize to run code before running each test 
        [TestInitialize()]
        public void MyTestInitialize()
        {        
        //    // To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
        //    // For more information on generated code, see https://go.microsoft.com/fwlink/?LinkId=179463
            BrowserWindow.CurrentBrowser = "Firefox";
        }

    ' Use TestInitialize to run code before running each test
    <TestInitialize()> Public Sub MyTestInitialize()
        '
        ' To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
        ' For more information on generated code, see https://go.microsoft.com/fwlink/?LinkId=179463
        '
        BrowserWindow.CurrentBrowser = "Firefox"


    End Sub

    Para obtener más información sobre el uso del atributo TestInitialze(), vea Cómo: Generar una prueba de IU codificada mediante la grabación de la aplicación que se prueba.

  2. En el menú Prueba, seleccione Windows y haga clic en Vista de pruebas. En Vista de pruebas, seleccione CodedUITestMethod1 bajo la columna Nombre de la prueba y, a continuación, haga clic en Ejecutar selección en la barra de herramientas.

    La prueba de IU codificada debe ejecutarse con Mozilla Firefox.

Vea también

Conceptos

Probar la interfaz de usuario con pruebas de IU automatizadas

Otros recursos

Grabar pruebas con Windows Internet Explorer y reproducirlas mediante Mozilla Firefox

Tutorial: Reproducir pruebas manuales mediante Firefox

Cómo: Reproducir una prueba de IU codificada basada en web mediante Firefox