Compartilhar via

Demonstra Passo a passo: Reproduzir codificados testes de interface do usuário usando o Firefox

  • Artigo

Você pode criar testes automatizados da interface do usuário (UI) conhecido como testes de interface do usuário codificados. Esses testes fornecem testes funcionais da interface do usuário e a validação dos controles de interface do usuário. Testes codificados da interface do usuário permitem que você teste a funcionalidade de usuário interface usando o Microsoft Visual Studio 2010 recurso Pack 2, você pode gravar as ações de interface do usuário em um site ou em um aplicativo baseado na Web e criar testes codificados de UI. Você pode usar o Windows Internet Explorer para gravar as ações e reproduzir os testes usando o navegador Mozilla Firefox.

Para obter mais informações sobretestes codificados da interface do usuário, consulte Teste de Interface do usuário com testes automatizados de UI.

Aviso

Depois de concluir a instalação do Microsoft Visual Studio 2010 Pack 2 de recurso, se você quiser usar o pacote de teste para o Mozilla Firefox, deve instalar e configurar a extensão do auxiliar de teste para o Mozilla Firefox. Para obter mais informações, consulte Como: Instalar a extensão do auxiliar de teste para o Mozilla Firefox.

Aviso

Você pode usar apenas o navegador Firefox para reproduzir os testes codificados da interface do usuário. Gravação codificados testes de interface do usuário em sites e aplicativos da Web usando o Firefox, não há suporte para o navegador.

Pré-requisitos

Para esta explicação passo a passo, você precisará:

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

  • Mozilla Firefox versão 3.5 ou 3.6.

  • Verifique se você instalou Microsoft Visual Studio 2010 recurso Pack 2 e a extensão do auxiliar de teste para o Mozilla Firefox. Informações sobre a instalação estão incluídas na introdução.

Criando uma aplicação Web

Para criar o aplicativo da Web

  1. EmVisual Studio 2010diante do arquivo menu, clique em novo e, em seguida, clique em projeto.

    A caixa de diálogo New Project será exibida.

  2. Em os modelos instalados, expanda a linguagem de programação que você preferir e clique em Web.

  3. Na lista de tipos de projeto da Web, selecione ASP.Aplicativo de Web do NET vazio.

    ObservaçãoObservação

    Você irá escrever o código mínimo nesta explicação.

  4. No nome , digite ColorWebApp.

  5. No local caixa, especifique a pasta onde você deseja criar o seu aplicativo da Web.

  6. Selecione Create directory for solution (Criar diretório para a solução).

  7. Clique em OK.

  8. No Solution Explorer, verifique se o novo projeto de ColorWebApp está selecionado.

  9. No menu Project, escolha Add New Item.

    O Add New Item caixa de diálogo aparece.

  10. Na lista de itens, escolha Formulário da Web.

  11. No nome caixa de texto, digite default. aspx e, em seguida, clique em Add.

Adicionando controles para o aplicativo da Web

Para adicionar controles ao aplicativo Web

  1. Em Solution Explorer, o botão direito do mouse default. aspx e escolha View Designer.

    Uma página em branco é exibida.

  2. Se a caixa de ferramentas não estiver visível, clique em Exibir e, em seguida, clique em caixa de ferramentas.

  3. Do padrão de grupo, arraste um RadioButtonList até a página.

    A RadioButtonList controle é adicionado para a superfície de design.

  4. Sobre o RadioButtonList tarefas painel de marca de ação, clique no EditItems link.

    A listitem Collection Editor aparece.

    ObservaçãoObservação

    Você também pode exibir o listitem Collection Editor , editando o itens coleção na janela Propriedades.

  5. Clique em Add para adicionar um novo item.

  6. Em ListItem properties:

    1. Alterar o texto propriedade para Red.

    2. Definir o Selected propriedade para True.

      ListItem Collection Editor.

  7. Clique em Add para adicionar outro item.

  8. Em ListItem properties alterar o texto propriedade para azul.

  9. Clique em OK para fechar a listitem Collection Editor.

  10. Arraste um Button até a página. Na janela Properties, altere o texto propriedade para Submit.

    Design de ColorWebApp

  11. No menu File, clique em Save All.

Adicionando páginas ao aplicativo Web

Para adicionar páginas ao aplicativo Web

  1. No menu Project, clique em Add New Item.

  2. No Add New Item caixa de diálogo, selecione Formulário da Web da lista de modelos. Em nome tipo de Red.aspxe em seguida, clique em Add.

  3. Na parte inferior da janela do documento, clique na Design tab para alternar para modo design.

  4. Arraste um Label até a página. Na janela Properties, defina a texto propriedade para Red. Definir o ForeColor propriedade para Red.

  5. No menu Project, clique em Add New Item.

  6. No Add New Item caixa de diálogo, clique no Formulário da Web modelo e nomeie- Blue.aspx. Clique em Adicionar.

  7. Na parte inferior da janela do documento, clique na Design tab para alternar para modo design.

  8. Arraste um Label até a página. Na janela Properties, defina a texto propriedade para azul. Definir o ForeColor propriedade para azul.

  9. No menu File, clique em Save All.

Adicionar funcionalidade ao aplicativo Web

Para adicionar funcionalidade ao aplicativo Web

  1. Em Solution Explorer botão direito do mouse default. aspx e clique em View Designer.

  2. Clique duas vezes o Enviar Button. Visual StudioAlterna para o código de página e cria um manipulador de eventos de esqueleto para o Button do controle Click de evento.

  3. Adicione o seguinte código ao manipulador 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. No menu File, clique em Save All.

Verificar a execução de aplicativos da Web corretamente

Aviso

Este procedimento pressupõe que o Microsoft Internet Explorer está definido como o navegador da Web padrão.

Para executar o aplicativo da Web

  1. Em Solution Explorer, o botão direito do mouse default. aspx e, em seguida, clique em Set As Start Page.

  2. Pressione CTRL + F5 para executar o aplicativo da Web no navegador. Você verá a primeira página.

  3. Clique em Red e, em seguida, clique em Submit. Se o aplicativo está funcionando corretamente, você irá para a página com o Label que diz Red.

  4. Volte para a primeira página.

  5. Clique em azul e, em seguida, clique em Submit. Se o aplicativo está funcionando corretamente, você irá para a página com o Label que diz azul.

  6. Copie o endereço do seu aplicativo da Web para a área de transferência ou de um arquivo do bloco de notas. Por exemplo, o endereço teria esta aparência: https://localhost: <PortNumber> / Default. aspx

  7. Feche o navegador.

Criar e executar um teste codificado de interface do usuário para o aplicativo Web

Para criar e executar um teste codificado de UI

  1. No Solution Explorer, clique com o botão direito a solução, clique em Add e selecione Novo projeto.

    O Add New Project caixa de diálogo aparece.

  2. No Modelos instalados painel, expandir ou Visual C# ou Visual Basice selecione teste.

  3. No painel central, selecione o O projeto de teste modelo.

  4. Clique em OK.

    No Solution Explorer, o novo projeto de teste chamado TestProject1 é adicionado à sua solução e o arquivo UnitTest1. cs ou de UnitTest1.vb aparece no Editor de código. Porque ele não é usado neste passo a passo, você pode fechar o arquivo UnitTest1.

  5. No Solution Explorer, clique com o botão direito TestProject1, clique em Add e selecione UI codificados teste.

    O Gerar código para codificados teste da interface do usuário caixa de diálogo aparece.

  6. Selecione o ações de registro, editar o mapa da interface do usuário ou adicionar declarações opção e clique em OK.

    UIMap – Coded Builder de teste de interface do usuário é exibida.

    Para obter mais informações sobre as opções na caixa de diálogo, consulte Como: Criar um teste codificado de UI.

  7. Clique em Iniciar gravação em UIMap – codificado no construtor de teste de interface do usuário. Em poucos segundos, o construtor de teste de interface do usuário codificado estará pronto.

    Iniciar a gravação da interface do usuário

  8. Inicie o Internet Explorer.

  9. Na barra de endereços do Internet Explorer, digite o endereço do aplicativo da Web que você copiou um procedimento anterior. Por exemplo:

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

    (Opcional) navegar através do aplicativo da Web, pressionando o Red, azul e o botão Voltar do navegador.

  10. Feche o Internet Explorer.

  11. No UIMap - o construtor de teste de interface do usuário codificado, clique em Gerar código.

  12. O nome do método, digite SimpleWebAppTest e clique em Adicionar e gerar. Em poucos segundos, o teste codificado de interface do usuário aparece e é adicionado à solução.

    Gerar código

  13. Feche o UIMap – codificados construtor de teste de interface do usuário.

    O arquivo de CodedUITest1.cs aparece no Editor de código.

Confirmar o teste de interface do usuário codificado reproduz Back corretamente no Internet Explorer

  • No arquivo CodedUITest1.cs, localize o CodedUITestMethod1 método, com o botão direito e selecione Executar testes.

    Enquanto o teste codificado de interface do usuário é executada, o ColorWebApp está visível. Ele realiza as etapas que você fez no procedimento anterior.

Adicionar uma propriedade para a reprodução de SpecifyFirefox e execute novamente o teste codificado de UI

  1. No arquivo CodedUITest1.cs, localize o método MyTestInitialize() que usa a TestInitializeAttribute sem comentar o código e adicionar o CurrentBrowser propriedade com seu valor atribuído como "firefox", conforme mostrado no código a seguir:

    Dica

    Opcionalmente, em vez de adicionar a propriedade BrowserWindow, você pode criar uma variável de ambiente chamada CodedUITestCurrentBrowser possui um valor de "firefox" e então reinicie o 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 obter mais informações sobreusando o TestInitialze() de atributo, consulte Como: Gerar um teste codificado UI gravando o aplicativo em teste.

  2. Sobre o teste menu, selecione Windows e, em seguida, clique em Test View.No Test View, selecione CodedUITestMethod1 sob o Nome de teste coluna e clique Run Selection na barra de ferramentas.

    O teste codificado de interface do usuário deve executar usando o Mozilla Firefox.

Consulte também

Conceitos

Teste de Interface do usuário com testes automatizados de UI

Outros recursos

A gravação de testes usando o Windows Internet Explorer e reproduzir Back usando o Mozilla Firefox

Demonstra Passo a passo: Reprodução de testes manuais, usando o Firefox

Como: Reproduzir que um baseado na Web codificados teste da interface do usuário usando o Firefox