Demonstra Passo a passo: Criação, edição e a manutenção de um teste codificado de UI

Artigo
08/04/2011

Esta explicação passo a passo, você criará um aplicativo simples do Windows Presentation Foundation (WPF) para demonstrar como criar, editar e manter um teste codificado de interface do usuário. Explicação passo a passo fornece soluções para a correção de testes que foram divididos por vários problemas de tempo e refatoração de controle.

Pré-requisitos

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

Visual Studio 2010 Ultimate ou Visual Studio 2010 Premium.

Criar um aplicativo simples do WPF

No menu File, aponte para New e clique Project.

A caixa de diálogo New Project será exibida.
No Modelos instalados painel, expanda **Visual C#**e selecione Windows.
Acima do painel central, verificar se a lista drop-down de framework de destino está definida como .NET Framework 4.
No painel central, selecione o Aplicativo WPF modelo.
No nome caixa de texto, digite SimpleWPFApp.
Escolha uma pasta onde você salvará o projeto. No local texto, digite o nome da pasta.
Clique em OK.

O WPF Designer para Visual Studio abre e exibe o MainWindow do projeto.
Se a caixa de ferramentas não estiver aberta, abra-o. Clique o Exibir menu e clique caixa de ferramentas.
Sob o Todos os controles do WPF seção, arraste um botão, caixa de seleção e ProgressBar controle MainWindow na superfície de design.
Selecione o controle de botão. Na janela Properties, altere o valor para o conteúdo a propriedade de botão para iniciar.
Selecione o controle ProgressBar. Na janela Properties, altere o valor de máximo a propriedade de 100 para 1000.
Selecione o controle de caixa de seleção. Na janela Propriedades, desmarque o IsEnabled propriedade.
Clique duas vezes no controle button para adicionar um evento Click.

O MainWindow.xmal.cs é exibido no Editor de código com o cursor no evento button1_Click novo.
Na parte superior da classe MainWindow, adicione um delegate. O representante será usado para a barra de progresso. Para adicionar o delegado, adicione o seguinte código:
```
        private delegate void ProgressBarDelegate(
        System.Windows.DependencyProperty dp, Object value);
```

No método button1_Click, adicione o seguinte código:

            double progress = 0;

            ProgressBarDelegate updatePbDelegate =
        new ProgressBarDelegate(progressBar1.SetValue);

            do
            {
                progress ++;

                Dispatcher.Invoke(updatePbDelegate,
                    System.Windows.Threading.DispatcherPriority.Background,
                    new object[] { ProgressBar.ValueProperty, progress });
                progressBar1.Value = progress;
            }
            while (progressBar1.Value != progressBar1.Maximum);

            checkBox1.IsEnabled = true;

Verificar as execuções do aplicativo WPF corretamente

Sobre o Debug menu, selecione Start Debugging ou pressione F5.
Clique em Iniciar.

Em poucos segundos, a barra de progresso deve ser 100% concluída. O controle de caixa de seleção está ativado.
Feche o SimpleWPFApp.

Criar e executar um teste codificado de interface do usuário para SimpleWPFApp

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.
No Modelos instalados painel, expanda **Visual C#**e selecione teste.
No painel central, selecione o O projeto de teste modelo.
Clique em OK.

No Solution Explorer, o novo projeto de teste chamado TestProject1 é adicionado à sua solução e UnitTest1. cs que arquivo aparece no Editor de código. Você pode fechar o arquivo UnitTest1. cs, porque ele não é usado nesta explicação.
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.
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.
Localize e execute o aplicativo de SimpleWPFApp que você criou anteriormente. Por padrão, o aplicativo será localizado em 2010\Projects\SimpleWPFApp\SimpleWPFApp\bin\Debug\SimpleWPFApp.exe do C:\Users\ <username> \Documents\Visual Studio
Crie um atalho para o aplicativo SimpleWPFApp. SimpleWPFApp.exe com o botão direito e escolha Copy. Na área de trabalho, o botão direito do mouse e escolha Colar atalho.

Dica

Um atalho para o aplicativo torna mais fácil adicionar ou modificar a testes codificados da interface do usuário para seu aplicativo, porque permite que você iniciar o aplicativo rapidamente. Não é necessário navegar até ele. Você terá de executar o aplicativo novamente, esta explicação passo a passo.
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.
Execute SimpleWPFApp.exe usando o atalho da área de trabalho.
No SimpleWPFApp, clique em Iniciar.

Em poucos segundos, a barra de progresso deve ser completa de 100. O controle de caixa de seleção está ativado.
Marque a caixa para o controle de caixa de seleção.
Feche o aplicativo SimpleWPFApp.
No UIMap - o construtor de teste de interface do usuário codificado, clique em Gerar código.
O nome do método, digite SimpleAppTest e clique em Adicionar e gerar. Em poucos segundos, o teste codificado de interface do usuário aparece e é adicionado à solução.
Feche o UIMap – codificados construtor de teste de interface do usuário.

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

Execute o teste codificado de UI

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

Enquanto o teste codificado de interface do usuário é executada, o SimpleWPFApp está visível. Ele realiza as etapas que você fez no procedimento anterior. No entanto, quando o teste tenta selecionar a caixa de seleção para o controle de caixa de seleção, a janela Test Results mostra que o teste falhou. Isso é porque o teste tenta selecionar a caixa de seleção, mas não está ciente de que o controle de caixa de seleção estiver desativado até que a barra de progresso é 100% concluída. Você pode corrigir isso e problemas semelhantes, usando as várias UITestControl.WaitForControlXXX() codificado de métodos que estão disponíveis para teste de interface do usuário. O próximo procedimento demonstrará usando o WaitForControlEnabled() método para corrigir o problema que causou este teste a falhar. Para obter mais informações, consulte Tornar codificado espera de testes de interface do usuário para eventos específicos durante a reprodução.

Edite e execute novamente o teste codificado de UI

Na janela Test Results, clique com o botão direito no teste de falha e selecione View Test Results Details.

O CodedUITestMethod1 [resultados] é exibida.
No Error Stack Trace seção, clique no primeiro link ao lado de TestProject1.UIMap.SimpleAppTest().

O arquivo de UIMap.Designer.cs é aberto com o ponto de destacadas no código de erro:
```
// Select 'CheckBox' check box
uICheckBoxCheckBox.Checked = this.SimpleAppTestParams.UICheckBoxCheckBoxChecked;
```
Para corrigir esse problema, você pode fazer o teste de interface do usuário codificado aguardar o controle CheckBox ser ativado antes de continuar com esta linha usando o WaitForControlEnabled() método.

Aviso

Não modifique o arquivo UIMap.Designer.cs. As alterações de código feitas no arquivo UIMapDesigner.cs serão sobrescritas sempre que você gerar o código usando o UIMap - codificados Builder de teste de interface do usuário. Caso você precise modificar um método gravado, você deve copiá-lo para o arquivo de UIMap.cs e renomeá-lo. O arquivo de UIMap.cs pode ser usado para substituir os métodos e propriedades no arquivo UIMapDesigner.cs. Você deve remover a referência para o método original no arquivo codificado UITest.cs e substituí-lo com o nome do método renomeado.
No arquivo UIMapDesinger.cs, selecione todo o código para todo o método SimpleAppTest e copiá-lo.
No Solution Explorer, abra o arquivo UIMap.cs.
Cole o código do método de SimpleAppTest a classe parcial do UIMap.
Renomear o método de SimpleAppTest() para ModifiedSimpleAppTest()

Adicione o seguinte usando a instrução para o arquivo:

using Microsoft.VisualStudio.TestTools.UITesting.WpfControls;

Adicione o seguinte WaitForControlEnabled() método antes da linha incorreta do código identificado anteriormente:

uICheckBoxCheckBox.WaitForControlEnabled();

// Select 'CheckBox' check box
uICheckBoxCheckBox.Checked = this.SimpleAppTestParams.UICheckBoxCheckBoxChecked;

No arquivo CodedUITest1.cs, localize o CodedUITestMethod método ou comentar ou renomeie a referência para o método SimpleAppTest() original e substitua-o com o novo ModifiedSimpleAppTest():

[TestMethod]
        public void CodedUITestMethod1()
        {
            // 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
            //this.UIMap.SimpleAppTest();
            this.UIMap.ModifiedSimpleAppTest();
        }

Sobre o Build menu, clique em Build Solution.
Com o botão direito do CodedUITestMethod método e selecione Executar testes.
Desta vez o teste de interface do usuário codificado conclui com êxito todas as etapas do teste e Passed é exibido na janela Test Results.

Refatorar um controle em que o SimpleWPFApp

No arquivo de MainWindow. XAML no Designer, selecione o controle de botão.
Na parte superior da janela Propriedades, selecione o valor button1 ao lado de botão e altere o valor para buttonA.
Sobre o Build menu, clique em Build Solution.
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 falhará porque o teste codificado de interface do usuário não puder localizar o controle de botão que foi mapeado originalmente o UIMap como button1. Refatoração pode afetar os testes codificados da interface do usuário dessa maneira.
Na janela Test Results, clique com o botão direito no teste de falha e selecione View Test Results Details.

O CodedUITestMethod1 [resultados] é exibida.
No Error Stack Trace seção, clique no primeiro link ao lado de TestProject1.UIMpa.SimpleAppTest().

O arquivo UIMap.Designer.cs abre. O ponto de erro é realçado no código:
```
// Click 'Start' button
Mouse.Click(uIStartButton, new Point(27, 10));
```
Observe que a linha de código anterior deste procedimento é usando UiStartButton, que é o nome de UIMap antes que ele foi refatorado.

Para corrigir o problema, você pode adicionar o controle refatorado para o UIMap usando o criador de teste de interface do usuário codificado. Você pode atualizar o código do teste para usar o código, como demonstrado no próximo procedimento.

Mapear a edição e controle refatorado e execute novamente o teste codificado de UI

No arquivo CodedUITest1.cs, na CodedUITestMethod1() método, com o botão direito, selecione Gerar código para codificados teste da interface do usuário e, em seguida, clique em Construtor de teste de interface do usuário codificado uso.

UIMap – Coded Builder de teste de interface do usuário é exibida.
Usando o atalho da área de trabalho que você criou anteriormente, execute o aplicativo de SimpleWPFApp que você criou anteriormente.
Em UIMap – o Coded Builder de teste de interface do usuário, arraste a ferramenta de cruz para o Iniciar o botão sobre o SimpleWPFApp.

O Iniciar botão está contido em uma caixa azul e o construtor de teste de interface do usuário codificado leva alguns segundos para processar os dados para o controle selecionado e exibe as propriedades de controles. Observe que o AutomationUId chamado buttonA.
Nas propriedades do controle, clique na seta no canto superior esquerdo para expandir o mapa de controle da interface do usuário. Observe que UIStartButton1 está selecionada.
Na barra de ferramentas, clique na Adicionar o controle para o mapa de UI de controle.

O status na parte inferior da janela verifica a ação exibindo Selected controle foi adicionado ao mapa de controle da interface do usuário.
No UIMap – o Coded Builder de teste de interface do usuário, clique em Gerar código.

O construtor de teste de interface do usuário do Coded – gerar código aparece com uma observação indicando que nenhum método new é necessário e que o código só será gerado para que as alterações para o mapa de controle da interface do usuário.
Clique em Generate.
Feche o SimpleWPFApp.exe.
Feche o UIMap – o construtor de teste UI codificado.

UIMap – o construtor de teste de interface do usuário do Coded leva alguns segundos para processar as alterações de mapa de controle da interface do usuário.
No Solution Explorer, abra o arquivo UIMap.Designer.cs.
No arquivo UIMap.Designer.cs, abaixo do construtor da classe do código gerado UIMainWindow, expanda o Propriedades região. Observe que o public WpfButton UIStartButton1 propriedade foi adicionada.

Na propriedade UIStartButton1, expanda a região de critérios de pesquisa. Observe o SearchProperties é definida como "buttonA":

public WpfButton UIStartButton1
        {
            get
            {
                if ((this.mUIStartButton1 == null))
                {
                    this.mUIStartButton1 = new WpfButton(this);
                    #region Search Criteria
                    this.mUIStartButton1.SearchProperties[WpfButton.PropertyNames.AutomationId] = "buttonA";
                    this.mUIStartButton1.WindowTitles.Add("MainWindow");
                    #endregion
                }
                return this.mUIStartButton1;
            }
        }

Agora você pode modificar o teste de interface do usuário codificado para usar o controle recentemente mapeado. Conforme apontado no procedimento anterior se você deseja substituir quaisquer métodos ou propriedades no teste de interface do usuário codificado, você deve fazer isso no arquivo UIMap.cs.

No arquivo UIMap.cs, adicione um construtor e especificar o SearchProperties propriedade da UIStartButton propriedade para usar o AutomationID a propriedade com um valor de "buttonA":
```
public UIMap()
        {
            this.UIMainWindowWindow.UIStartButton.SearchProperties[WpfButton.PropertyNames.AutomationId] = "buttonA";
        }
```
Sobre o Build menu, clique em Build Solution.
No Test View, selecione CodedUITestMethod1 sob o Nome de teste coluna, na barra de ferramentas, clique em Run Selection.

Desta vez, o teste de interface do usuário codificado conclui com êxito todas as etapas do teste. A janela de resultados de teste, você verá um status de Passed.

Consulte também

Compartilhar via