Criando testes automáticos para aplicações Universal Windows

Os testes são importantes em qualquer projeto, permitindo antecipar problemas e reduzir impactos causados por erros em programas e aplicações. E existem vários tipos de testes, como:

  • Unitários: Unidades individuais de código que englobam um ou mais módulos da aplicação, são testados para determinar se estão gerando resultados esperados.
  • De Integração: Módulos individuais da aplicação são combinados e testados em grupo. Ocorre após os testes unitários e antes dos testes de validação.
  • De Validação: A aplicação como um todo é testada para garantir que atende às especificações e o propósito esperado.

Nesse contexto temos os testes automatizados que podem ser feitos para cada um dos tipos de teste acima e que permitem testar o código no momento de um commit de código ou quando ocorrer a geração de uma versão de entrega da aplicação. Ele é especialmente útil para agilizar o desenvolvimento e identificar problemas no momento que eles são incluídos no código.

Além disso, executar testes automatizados é pelo menos 5 vezes mais rápido que executar testes manuais. O tempo ganho nessa tarefa permite investir na melhoria dos próprios testes, aumentando a sua cobertura. A não automação de testes podem levar a casos em que a fase de testes se torna tão grande ou maior que a fase de desenvolvimento (referência: http://abstracta.us/2015/08/31/the-true-roi-of-test-automation/).

Porém a atividade de criar e executar testes, sejam eles automatizados ou não, acaba ficando de lado por vários motivos. E um deles é a falta de conhecimento dos desenvolvedores acerca de soluções para testes que existem justamente para facilitar seu trabalho.

Neste post irei falar brevemente dos testes para aplicativos Universal Windows (Windows 10) e que podem ser aplicados tanto para desktop como smartphone. E isso tudo usando a edição gratuita do Visual Studio 2015.

No Visual Studio temos a ferramenta Coded UI Test Builder que permite mapear componentes visuais da sua aplicação e adicionar códigos de asserção. A partir disso fazemos a codificação do teste e depois poderemos executar sempre quando necessário.

Criando aplicação Universal Windows

Para fins de demonstração, vamos criar um aplicativo Universal Windows chamado CalculadoraIMC que faz cálculo do IMC a partir do peso e altura:

criando_testes_automaticos_universal_windows

Agora vamos alterar a página inicial para incluir os seguintes componentes visuais dentro da grid principal da página:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <StackPanel Margin="12">
            <TextBlock Text="Cálculo de IMC" FontSize="{StaticResource TextStyleExtraLargeFontSize}" Margin="0,0,0,12"/>

            <TextBox PlaceholderText="informe seu peso" Margin="0,0,0,12" Header="Peso" InputScope="Digits" Text="{x:Bind YourWeight, Mode=TwoWay}"/>

            <TextBox PlaceholderText="informe sua altura" Margin="0,0,0,12" Header="Altura" InputScope="Digits" Text="{x:Bind YourHeight, Mode=TwoWay}"/>

            <Button Content="Calcular" HorizontalAlignment="Center" Click="Button_Click"/>
        </StackPanel>

        <StackPanel x:Name="IMCResult" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Visibility="Collapsed">
            <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                <TextBlock Text="IMC" FontWeight="Bold" Margin="0,0,6,0" FontSize="{StaticResource TextStyleExtraLargeFontSize}"/>
                <TextBlock x:Name="IMCResultValue" FontSize="{StaticResource TextStyleExtraLargeFontSize}"/>
            </StackPanel>
            
            <TextBlock x:Name="IMCResultMessage" FontSize="{StaticResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Center"/>
        </StackPanel>

    </Grid>

Já no code behind da página, vamos substituir o código de dentro da classe pelo seguinte código:

        public double YourHeight { get; set; }
        public double YourWeight { get; set; }

        public MainPage()
        {
            this.InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var result = this.YourWeight / (this.YourHeight * this.YourHeight);
            string message;

            if (result < 17)
            {
                message = "Muito abaixo do peso";
            }
            else if (result < 18.49)
            {
                message = "Abaixo do peso";
            }
            else if (result < 24.99)
            {
                message = "Peso normal";
            }
            else if (result < 29.99)
            {
                message = "Acima do peso";
            }
            else if (result < 34.99)
            {
                message = "Obesidade I";
            }
            else if (result < 39.99)
            {
                message = "Obesidade II (severa)";
            }
            else
            {
                message = "Obesidade III (mórbida)";
            }

            this.IMCResultValue.Text = Convert.ToString(result);
            this.IMCResultMessage.Text = message;
            this.IMCResult.Visibility = Visibility.Visible;
        }

Ao executarmos o código no computador, iremos obter o seguinte resultado:

criando_testes_automaticos_universal_windows_run_app

Criando testes automatizados

Pronto! Agora vamos aos testes. Para isso, vamos criar um novo projeto dentro da nossa solução. Iremos usar o template Coded UI Test Project (Windows):

criando_testes_automaticos_universal_windows_new_codeduitest_projectLogo após criado o projeto será aberta uma caixa de diálogo questionando como você deseja criar os testes:

  • criando_testes_automaticos_universal_windows_howcreatetestEdit UI Map or add assertions: Será disponibilizada uma ferramenta para fazer mapeamento dos componentes visuais, facilitando a inserção de verificações e também codificação dos testes.
  • Manually edit the test: Nesse caso iremos fazer toda programação manualmente sem usar ferramenta de mapeamento.

Vamos selecionar a opção “Edit UI Map or add assertions” e então será aberta a ferramenta que estará sempre no topo da tela: criando_testes_automaticos_universal_windows_codeduitestbuilder

Vamos começar mapeando o item que corresponde a nossa aplicação no menu iniciar do Windows. Abra a  lista de aplicações do menu iniciar do Windows e então posicione o cursor do mouse sobre o item que corresponde a aplicação que vamos testar:

criando_testes_automaticos_universal_windows_app_list_item_highlightFeito isso, pressione as teclas Ctrl + Shift + I. Isso irá incluir uma referência do aplicativo no nosso UIMap do Coded UI Test Builder, necessária para conseguirmos iniciar a aplicação no momento dos testes. Selecione então a propriedade AutomationId, clique o botão direito do mouse e selecione o menu de contexto “Copy Value to Clipboard” para copiar o valor que identifica a aplicação. É esse o valor que precisamos para abrir a aplicação durante os testes automatizados:

criando_testes_automaticos_universal_windows_app_list_item_added_to_map

Depois vamos mapear os demais itens da tela que iremos testar. Abra o aplicativo CalculadoraIMC e então faça os seguintes passos:

  1. Posicione o cursor do mouse sobre a caixa de texto correspondente ao label “Peso” e então pressione as teclas Ctrl + Shift + I
  2. Posicione o cursor do mouse sobre a caixa de texto correspondente ao label “Altura” e então pressione as teclas Ctrl + Shift + I.
  3. Posicione o cursor do mouse sobre o botão de calcular e então pressione as teclas Ctrl + Shift + I.
  4. Adicione valores nas caixas de texto e então faça o cálculo. Por exemplo, peso 75 e altura 1.7.
  5. Posicione o cursor do mouse sobre o valor do IMC e então pressione as teclas Ctrl + Shift + I.
  6. Posicione o curso sobre a mensagem de resultado do IMC e então pressione as teclas Ctrl + Shift + I.

No final desse procedimento teremos o seguinte mapeamento de UI:

criando_testes_automaticos_universal_windows_uiMapped

No próximo passo vamos para as asserções que nada mais são que verificações de resultados esperados. Selecione o item UIItem259515570934256Text e, em propriedades, selecione a propriedade DisplayText. Em seguida clique no botão Add Assertion:

criando_testes_automaticos_universal_windows_addassertionimcvalue

Nele, confirme as informações mostradas para a asserção:

criando_testes_automaticos_universal_windows_addassertionimcvalue_values

Fazer o mesmo procedimento para a propriedade DisplayText do item UIAcimadopesoText.

Pronto! Falta apenas fazer a geração do código. Para tanto, clique no botão destacado abaixo:

criando_testes_automaticos_universal_windows_codeduitestbuilder_generatecode

Será solicitado nome para os métodos de asserção. Vamos manter os valores padrão. Voltando para o Visual Studio, vamos abrir a classe CodedUITest1.cs e incluir o seguinte código no construtor:

// To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
XamlWindow.Launch("2aa8c01f-66d4-4303-bf79-a8aee92925e7_jztzwe4aw5hby!App");

this.UIMap.UICalculadoraIMCWindow.UIPesoEdit.Text = "75";
this.UIMap.UICalculadoraIMCWindow.UIAlturaEdit.Text = "1.7";

Gesture.Tap(UIMap.UICalculadoraIMCWindow.UICalcularButton);

this.UIMap.AssertMethod1();

Notas:

  • Usamos o código XamlWindow.Launch() para abrir a aplicação considerando que o teste irá iniciar com a aplicação fechada. O código que passamos como parâmetro é justamente o valor AutomationId que havíamos copiado nos passos anteriores.
  • Editamos os valores texto dos campos UIPesoEdit e UIAlturaEdit com aqueles que queremos testar. No caso iremos usar os valores que especificamos no momento da execução da aplicação, isto é, 75 e 1.7, respectivamente.
  • Usamos o método Gesture.Tap() para simular um gesto do usuário. Ainda existem outras opções como o swipe.
  • Por fim chamamos o método de asserção para verificar o resultado da execução.

Terminado esse passo, vamos fazer o build da nossa solução (teclas Ctrl + Shift + B). Isso fará com que o novo teste apareça no “Test Explorer”:

criando_testes_automaticos_universal_windows_test_explorer

Clique em “Run All” e então o teste será executado, abrindo o aplicativo, fornecendo os valores definidos no código e verificando o resultado final.

  • Exemplo de resultado de teste bem sucedido:
    criando_testes_automaticos_universal_windows_test_explorer_success
  • Exemplo de resultado de teste mal sucedido com indicativo do erro:
    criando_testes_automaticos_universal_windows_test_explorer_error

Lembrando que podemos editar a classe CodedUiTest1.cs, mas não as de mapeamento, pois elas serão sempre sobrescritas pelas alterações feitas no Coded UI Test Builder.

Além disso, você pode continuar criando novas asserções e verificações e incluindo no seu teste. A ideia é justamente ir criando os testes aos poucos na medida que você irá entregando os resultados do seu trabalho.

É isso. Qualquer dúvida ou contribuição, use comentários. E continue nos acompanhando no talkitbr.

Referências

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s