Hands-On LabIntroução a testes automatizados de interface com Visual Studio Ultimate 2012Versão do laboratório: 11.0.50727.1 (RTM)

Última atualização: 21/08/2012

Tradução: 10/09/2012

ÍNDICE

RESUMO..................................................................................................................................................... 3

EXERCÍCIO 1: INTRODUÇÃO A GERAÇÃO DE CÓDIGO A PARTIR DE ACTION RECORDINGS.......4

EXERCÍCIO 2: INTRODUÇÃO A GERAÇÃO DE CÓDIGO USANDO CODED UI TEST BUILDER.......12

EXERCÍCIO 3: DEMONSTRAÇÃO DATA DRIVEN PARA TESTE CODIFICADO DE INTERFACE.......16

RESUMO

Testes de Coded UI fornecem uma maneira de criar testes automatizados para validar a funcionalidade e comportamento da interface do usuário do seu aplicativo. Neste laboratório, você ganhará uma noção básica de testes de interface do usuário codificados através da criação de um novo teste e adicionando uma validação lógica a ele.

Pré-requisitos

Para concluir este estudo, você precisará de uma máquina virtual com o Visual Studio 2012 fornecida pela Microsoft. Para mais informações sobre a aquisição e utilização da máquina virtual, por favor, veja este link.

Exercícios

A prática deste laboratório inclui os seguintes exercícios:

1. Introdução a geração de código a partir de Action Recordings

2. Introdução a geração de código usando Coded UI Test Builder

3. Demonstração de Data Driven para Coded UI Test

Tempo estimado deste laboratório: 60 minutos.

Exercício 1: Introdução a Geração de Código a partir de Action Recordings

Neste exercício, você será apresentado às code generation features do Visual Studio 2012 que permitem aos testadores criarem rápido e facilmente testes de coded UI diretamente de action recordings existentes. Action recordings contém as etapas tomadas durante um teste manual de uma aplicação. Para aprender mais sobre teste manual e action recordings, por favor veja o laboratório “Authoring and Running Manual Tests using Microsoft Test Manager 2012”.

1. Faça o Login com o usuário Julia. Todas as senhas de usuários são P2ssw0rd.

2. Abra o Microsoft Visual Studio clicando em Start | All Programs | Microsoft Visual Studio 2012 | Visual Studio 2012.

3. Na página inicial, clique em Connect to Team Foundation Server…

Figura 1Localização do link para conectar-se ao Team Foundation Server

4. Na janela Connect to Team Foundation Server selecione TailspinToysCollection e clique em Connect. Se uma confirmação for necessária, clique no botão Yes na janela de confirmação.

Figura 2Selecionando a project collection TailspinToysCollection

5. Inicie um novo projeto de testes (File | New | Project…).

6. Na janela do novo projeto, selecione Coded UI Test Project template do Visual C# | Test e selecione clique em OK para criar o projeto de teste.

Figura 3Criando um Coded UI Test Project

7. Há duas maneiras de gerar código para este novo teste de coded ui. A primeira opção padrão é usar o Coded UI Test Builder, que permite gerar um código de teste manualmente a partir de um cenário de teste. A segunda opção é usar um action recording existente. Selecione a segunda opção para usar um action recording existente e clique em OK para continuar.

Figura 4Usando uma action recording existente para a geração do teste

8. Na janela Work Items Picker, selecione o projeto Tailspin Toys.

9. Selecione IDs e digite 41. Este é o id do caso de teste no projeto Tailspin Toys que contém um action recording.

10. Clique em Find para executar o query da work item. Observe que, para os fins deste laboratório, assumimos que o ID já é conhecido.

Figura 5Encontrando um caso de teste com action recording

11. Clique em OK para gerar um teste coded UI a partir do action recording.

12. Navegue até o método CodedUITestMethod1 no arquivo gerado CodedUITest1.cs. Cada linha representa um passo da action recording usado durante a geração do teste.

13. Clique com o botão direito na primeira chamada do método CodedUITestMethod1 e clique em Go To Definition. Isso irá carregar a classe UIMap do arquivo UIMap.Designer.cs que contém o teste lógico gerado. O método gerado abre o Internet Explorer e navega até a URL especificada.

Figura 6 Navegando até o teste lógico

14. Desça o cursor até o método ClickFourthCoffeeFlyer dentro da classe UIMap. Este método foi gerado clicando no hyperlink “Fourth Coffee Flyer” que está na web application da Tailspin Toys.

Figura 7 Exemplo de Método de teste gerado

15. O método de teste ClickFourthCoffeeFlyer não especifica os parâmetros do hyperlink diretamente, mas faz referência a propriedade “UIBlankPageWindowsInteWindow.UIHomeTailspinToysDocument1.UIFourthCoffeeFlyerHyperli

nk”. Navegue até a definição da propriedade UIFourthCoffeeFlyerHyperlink para ver como ela é implementada.

Figure 9Definição da propriedade hyperlink

Nota: A instância HtmlHyperlink que foi criada pela propriedade UIFourthCoffeeFlyerHyperlink possui um numero de propriedades de filtro e de busca aplicados irá ajudar ao framework de teste a localizar o html correto do hyperlink. No evento em que a web application muda várias propriedades do link, como o inner text, a ferramenta de teste ainda pode ser capaz de encontrar o hyperlink usando as propriedades restantes.

16. Feche o arquivo UIMap.Designer.cs para retornar para o arquivo CodedUITest1.cs.

17. Clique com o botão direito em algum lugar dentro do arquivo CodedUITest1.cs e selecione Run Tests. Não toque no mouse ou no teclado durante os testes.

Figura 8Localização do comando Run Tests

18. Quando os testes rodarem, uma instância do internet explorer será aberta e as ações definidas no escopo do teste coded ui automaticamente serão executadas. O teste é executado mais de uma vez, pois o teste original manual que gerou este teste coded UI foi gerado a partir de múltiplas linhas de parâmetros de teste.

Figura 9 Exemplo de teste coded UI rodando

19. Verifique se o teste passou vendo a janela Test Explorer. Neste caso, no entanto, não estamos executando qualquer validação após qualquer um dos passos.

Figura 10Janela Test Explorer exibindo o teste aprovado

Exercício 2: Introdução a geração de código usando Coded UI Test Builder

Neste exercício, você vai aprender como usar o Coded UI Test Builder para gerar código de teste para a Web Application Tailspin Toys e modificar o código gerado em ordem para habilitar o teste data driven.

1. Abra o internet explorer e clique no botão Tailspin Toys da barra dos favoritos.

2. Clique no link Model Airplanes.

3. Clique no link Fourth Coffee Flyer.

4. Clique no link Add To Cart para carregar o catálogo de produtos.

5. Retorne para o Visual Studio, localize o método CodedUITestMethod1 no arquivo CodedUITest1.cs, e adicione uma linha em branco depois da chamada para o método “this.UIMap.Clickonwhitespaceinwebsite”.

Figura 11Adicionando uma linha em branco no código de teste

6. Clique com o botão direito na linha em branco e selecione Generate Code for Coded UI Test | Use Coded UI Test Builder… apartir do context menu. Isso irá carregar a janela Coded UI Test Builder (que sempre é mostrado acima de outras janelas) e a instancia do internet explorer que nos havíamos aberto.

Figura 12Iniciando o Coded UI Test Builder

Nota: O Coded UI Test Builder é usado para gravar ações e assertions com a interface do usuário que são convertidas para código.

7. Agora nós vamos adicionar uma asserção para verificar que o valor do textbox quantity é igual a 1. Arraste e solte o crosshair da janela do Coded UI Test Builder tool para a textbox quantity no Internet Explorer. Esta ação ira carregar a janela do Coded UI Test Builder.

Figura 13Selecionando um elemento para usar na assertion

8. Na janela Coded UI Test Builder, selcione a propriedadeText e clique em Add Assertion. Isto irá carregar um diálogo para finalizar as opções de assertion para usar.

Figura 14Janela Coded UI Test Builder

9. Verifique que o comparador que vamos usar é AreEqual e que o valor da comparação é ‘1’. Clique no botão OK para continuar.

Figura 15Selecionando o tipo e o valor do comparador

10. Note que um checkbox foi adicionado a linha da propriedade Text.

Figura 16Propriedade Text mostrando um checkbox marcado

11. Clique no botão Generate Code na janela Coded UI Test Builder.

Figura 17Localização do botão Generate Code

12. Na janela Generate Code, use QuantityEqualsOne para o nome do método e selecione o botão Add and Generate para gerar o código de validação.

Figura 18Gerando o código de assertion

13. Remova o item “Fourth Coffee Flyer” do catálogo.

14. Feche o Coded UI Test Builder.

15. Feche a janela do internet explorer e retorne para o Visual Studio.

16. Note que o assertion code generation adicionou uma nova etapa de validação.

Figure 19Nova etapa de assertion criada para o teste coded UI

17. Clique com o botão direito e selecione Run Tests para rodar o teste com a nova etapa de validação. O teste será completado com sucesso.

Exercício 3: Demonstração Data Driven para Teste codificado de interface

Neste exercício, você irá adicionar outro conjunto de parâmetros para o caso de teste a fim de demonstrar que estes parâmetros estão ligados ao coded UI test que a validação realmente está funcionando conforme o esperado.

1. Abra o Microsoft Test Manager apartir de Start | All Programs | Microsoft Visual Studio 2012 | Microsoft Test Manager.

2. Selecione a aba Test e selecione test suite 7 “As a customer I should be able to remove items from my shopping cart”.

Nota: Se o Testing Center não carregar automaticamente, abra ele clicando na seta suspensa Lab Center.

Figura 20Test suite 7 foi selecionado

3. Selecione o primeiro caso de teste com ID = 41 e clique no botão Open Test Case.

Figura 21Abrindo o caso de teste com ID=41

4. Na seção Parameter Values embaixo, adicione uma nova linha com a quantidade 10. Se não houver espaço para inserir um novo valor, tente maximizar a janela e fechar e abrir novamente o caso de teste.

Nota: Um valor de 10 é um valor legítimo para o carrinho de compras, de modo que o carrinho será atualizado para mostrar uma quantidade de 10 quando este valor for inserido. No entanto, uma vez que o objetivo deste exercício é mostrar o que acontece quando uma iteração de teste falhar, vamos fingir que isto faz com que o teste que nós adicionamos espera que a quantidade permaneça em 1.

Figura 22Mudança de Parameter Value

5. Salve as mudanças no caso de teste e retorne para o Visual Studio.

6. Execute os testes novamente e note que os testes falham na quarta iteração.

7. Selecione o teste Failed na janela Test Explorer para ver detalhes. Na parte de baixo da janela Test Explorer nós somos notificados que 3 de 4 testes passaram e que o quarto falhou.

Figura 23Resultados dos testes mostrando a falha da assertion.