Condividi tramite

Procedura dettagliata: riproduzione di test codificati dell'interfaccia utente utilizzando Firefox

  • Articolo

È possibile creare test automatizzati dell'interfaccia utente, noti come test codificati dell'interfaccia utente. Questi consentono di eseguire test funzionali dell'interfaccia utente e di convalidarne i controlli. I test codificati dell'interfaccia utente consentono di verificare la funzionalità dell'interfaccia utente. Utilizzando Microsoft Visual Studio 2010 Feature Pack 2, è possibile registrare le azioni dell'interfaccia utente in un sito Web o in un'applicazione basata su Web e creare i test codificati dell'interfaccia utente. È possibile utilizzare Windows Internet Explorer per registrare le azioni e riprodurre i test tramite il browser Mozilla Firefox.

Per ulteriori informazioni sui test codificati dell'interfaccia utente, vedere Test dell'interfaccia utente con test automatizzati dell'interfaccia utente.

Nota di avvisoAttenzione

Dopo avere completato l'installazione di Microsoft Visual Studio 2010 Feature Pack 2, se si desidera utilizzare il pacchetto di test per Mozilla Firefox, è necessario installare e configurare l'estensione del supporto test per Mozilla Firefox. Per ulteriori informazioni, vedere Procedura: installare l'estensione di supporto test per Mozilla Firefox.
Nota di avvisoAttenzione

È possibile utilizzare il browser Firefox solo per riprodurre i test codificati dell'interfaccia utente. La registrazione dei test codificati dell'interfaccia utente nei siti Web e nelle applicazioni Web tramite il browser Firefox non è supportata.

Prerequisiti

Per la procedura dettagliata è necessario il seguente componente:

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

  • Web browser Mozilla Firefox versione 3.5 o 3.6.

  • Verificare di avere installato Microsoft Visual Studio 2010 Feature Pack 2 e l'estensione del supporto test per Mozilla Firefox. Le informazioni relative all'installazione sono incluse nell'introduzione.

Creazione di un'applicazione Web

Per creare l'applicazione Web

  1. In Visual Studio 2010 scegliere Nuovo dal menu File, quindi fare clic su Progetto.

    Verrà visualizzata la finestra di dialogo Nuovo progetto.

  2. In Modelli installati espandere il linguaggio di programmazione preferito, quindi fare clic su Web.

  3. Nell'elenco di tipi di progetto Web selezionare Applicazione Web ASP.NET vuota.

    Nota

    In questa procedura dettagliata verrà scritta una quantità minima di codice.

  4. Nella casella Nome digitare ColorWebApp.

  5. Nella casella Percorso specificare il nome della cartella in cui si desidera creare l'applicazione Web.

  6. Selezionare Crea directory per soluzione.

  7. Fare clic su OK.

  8. In Esplora soluzioni verificare che sia selezionato il nuovo progetto ColorWebApp.

  9. Scegliere Aggiungi nuovo elemento dal menu Progetto.

    Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.

  10. Nell'elenco di elementi scegliere Web Form.

  11. Nella casella di testo Nome digitare Default.aspx, quindi scegliere Aggiungi.

Aggiunta di controlli all'applicazione Web

Per aggiungere controlli all'applicazione Web

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse su Default.aspx, quindi scegliere Visualizza finestra di progettazione.

    Verrà visualizzata una pagina vuota.

  2. Se la casella degli strumenti non è visibile, fare clic su Visualizza e quindi su Casella degli strumenti.

  3. Dal gruppo Standard trascinare un controllo RadioButtonList sulla pagina.

    Nell'area di progettazione verrà aggiunto un controllo RadioButtonList.

  4. Nel riquadro tag azioni Attività di RadioButtonList fare clic sul collegamento EditItems.

    Verrà visualizzato l'Editor dell'insieme ListItem.

    Nota

    È inoltre possibile visualizzare l'Editor dell'insieme ListItem modificando l'insieme Elementi nella finestra Proprietà.

  5. Scegliere il pulsante Aggiungi per aggiungere un nuovo elemento.

  6. In Proprietà ListItem:

    1. Modificare la proprietà Text in Red.

    2. Impostare la proprietà Selected su True.

      Editor dell'insieme ListItem

  7. Scegliere Aggiungi per aggiungere un altro elemento.

  8. In Proprietà ListItem modificare la proprietà Text in Blue.

  9. Scegliere OK per chiudere l'Editor dell'insieme ListItem.

  10. Trascinare un controllo Button sulla pagina. Nella finestra Proprietà modificare la proprietà Text in Submit.

    Progettazione di ColorWebApp

  11. Scegliere Salva tutto dal menu File.

Aggiunta di pagine all'applicazione Web

Per aggiungere pagine all'applicazione Web

  1. Scegliere Aggiungi nuovo elemento dal menu Progetto.

  2. Nella finestra di dialogo Aggiungi nuovo elemento selezionare Web Form nell'elenco dei modelli. In Nome digitare Red.aspx e quindi scegliere Aggiungi.

  3. Nella parte inferiore della finestra del documento fare clic sulla scheda Progettazione per passare alla visualizzazione Progettazione.

  4. Trascinare un controllo Label sulla pagina. Nella finestra Proprietà impostare la proprietà Text su Red. Impostare la proprietà ForeColor su Red.

  5. Scegliere Aggiungi nuovo elemento dal menu Progetto.

  6. Nella finestra di dialogo Aggiungi nuovo elemento fare clic sul modello Web Form e denominarlo Blue.aspx. Fare clic su Aggiungi.

  7. Nella parte inferiore della finestra del documento fare clic sulla scheda Progettazione per passare alla visualizzazione Progettazione.

  8. Trascinare un controllo Label sulla pagina. Nella finestra Proprietà, impostare la proprietà Text su Blue. Impostare la proprietà ForeColor su Blue.

  9. Scegliere Salva tutto dal menu File.

Aggiunta di funzionalità all'applicazione Web

Per aggiungere funzionalità all'applicazione Web

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse su Default.aspx, quindi scegliere Visualizza finestra di progettazione.

  2. Fare doppio clic su Submit Button. Visual Studio consente di passare alla pagina di codice e di creare uno scheletro di gestore eventi per l'evento Click del controllo Button.

  3. Aggiungere il codice seguente al gestore eventi:

    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. Scegliere Salva tutto dal menu File.

Verificare che l'applicazione Web venga eseguita correttamente

Nota di avvisoAttenzione

In questa procedura si presuppone che Microsoft Internet Explorer sia impostato come il browser Web predefinito.

Per eseguire l'applicazione Web

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse su Default.aspx, quindi scegliere Imposta come pagina iniziale.

  2. Premere CTRL+F5 per eseguire l'applicazione Web nel browser. Verrà visualizzata la prima pagina.

  3. Fare clic su Red e quindi su Submit. Se l'applicazione funziona correttamente, si andrà alla pagina con il controllo Label denominato Red.

  4. Tornare nella prima pagina.

  5. Fare clic su Blue e quindi su Submit. Se l'applicazione funziona correttamente, si andrà alla pagina con il controllo Label denominato Blue.

  6. Copiare l'indirizzo dell'applicazione Web negli Appunti o in un file del Blocco note. Ad esempio, l'indirizzo potrebbe essere simile al seguente: il https://localhost:<NumeroPorta>/ Default.aspx

  7. Chiudere il browser.

Creare ed eseguire un test codificato dell'interfaccia utente per l'applicazione Web

Per creare ed eseguire un test codificato dell'interfaccia utente

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla soluzione, scegliere Aggiungi, quindi Nuovo progetto.

    Verrà visualizzata la finestra di dialogo Aggiungi nuovo progetto.

  2. Nel riquadro Modelli installati espandere Visual C# o Visual Basic, quindi selezionare Test.

  3. Nel riquadro centrale selezionare il modello Progetto di test.

  4. Fare clic su OK.

    In Esplora soluzioni il nuovo progetto di test denominato TestProject1 viene aggiunto alla soluzione e il file UnitTest1.cs o UnitTest1.vb viene visualizzato nell'Editor di codice. È possibile chiudere il file UnitTest1 in quanto non viene utilizzato in questa procedura dettagliata.

  5. In Esplora soluzioni fare clic con il pulsante destro del mouse su TestProject1, scegliere Aggiungi, quindi selezionare Test codificato dell'interfaccia utente.

    Verrà visualizzata la finestra di dialogo Genera codice per test codificato dell'interfaccia utente.

  6. Selezionare l'opzione Registra azioni, modifica mappa dell'interfaccia utente o aggiungi asserzioni e fare clic su OK.

    Verrà visualizzato UIMap - Generatore di test codificati dell'interfaccia utente.

    Per ulteriori informazioni sulle opzioni di questa finestra di dialogo, vedere Procedura: creare un test codificato dell'interfaccia utente.

  7. Fare clic su Avvia registrazione in UIMap - Generatore di test codificati dell'interfaccia utente. Il Generatore di test codificati dell'interfaccia utente sarà pronto in pochi secondi.

    Interfaccia utente di avvio della registrazione

  8. Avviare Internet Explorer.

  9. Nella barra dell'indirizzo di Internet Explorer, immettere l'indirizzo dell'applicazione Web copiata in un passo precedente. Ad esempio:

    https://localhost:<NumeroPorta>/ Default.aspx

    (Facoltativo) passare all'applicazione Web premendo Red, Blue e il pulsante indietro del browser.

  10. Chiudere Internet Explorer.

  11. In UIMap - Generatore di test codificati dell'interfaccia utente fare clic su Genera codice.

  12. In Nome metodo digitare SimpleWebAppTest e fare clic su Aggiungi e genera. Entro pochi secondi il test codificato dell'interfaccia utente verrà visualizzato e aggiunto alla soluzione.

    Generazione di codice

  13. Chiudere UIMap - Generatore di test codificati dell'interfaccia utente.

    Il file CodedUITest1.cs verrà visualizzato nell'Editor di codice.

Confermare che il test codificato dell'interfaccia utente viene riprodotto correttamente in Internet Explorer

  • Nel file CodedUITest1.cs individuare il metodo CodedUITestMethod1, fare clic con il pulsante destro del mouse e scegliere Esegui test.

    Durante l'esecuzione del test codificato dell'interfaccia utente, ColorWebApp rimane visibile. Vengono eseguiti i passaggi effettuati nella procedura precedente.

Aggiungere una proprietà alla riproduzione di SpecifyFirefox e rieseguire il test codificato dell'interfaccia utente

  1. Nel file CodedUITest1.cs, individuare il metodo MyTestInitialize() che utilizza TestInitializeAttribute, rimuovere il commento dal codice e aggiungere la proprietà CurrentBrowser con il valore "Firefox" come illustrato nel codice seguente:

    SuggerimentoSuggerimento

    Facoltativamente, invece di aggiungere la proprietà BrowserWindow, è possibile creare una variabile di ambiente denominata CodedUITestCurrentBrowser con il valore "Firefox" e riavviare 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

    Per ulteriori informazioni sull'utilizzo dell'attributo TestInitialze(), vedere Procedura: generare un test codificato dell'interfaccia utente registrando l'applicazione sottoposta a test.

  2. Nel menu Test, selezionare Windows e fare clic su Visualizzazione test. In Visualizzazione test selezionare CodedUITestMethod1 nella colonna Nome test, quindi fare clic su Esegui selezione sulla barra degli strumenti.

    Il test codificato dell'interfaccia utente deve essere eseguito utilizzando Mozilla Firefox.

Vedere anche

Concetti

Test dell'interfaccia utente con test automatizzati dell'interfaccia utente

Altre risorse

Procedura: eseguire test mediante Windows Internet Explorer e riprodurli mediante Mozilla Firefox

Procedura dettagliata: riproduzione di test manuali utilizzando Firefox

Procedura: riprodurre un test codificato dell'interfaccia utente basato sul Web utilizzando Firefox