Planejar os testes da interface do usuário

Concluído

Nesta seção, você acompanhará Amita e Andy enquanto eles falam sobre como incorporar testes de interface do usuário do Selenium no pipeline de lançamento. Começam por percorrer os testes que Amita normalmente faz manualmente. Em seguida, eles mapeiam as etapas manuais da Amita para casos de teste automatizados.

Executar testes de interface do usuário manualmente

Amita está esperando Andy aparecer. Andy vai ajudar Amita a escrever um teste de interface do usuário que será adicionado ao estágio de teste do pipeline. Quando ele chega, Andy vê Amita rabiscando em seu caderno, riscando algo, murmurando e depois rasgando a página.

Andy: Olá. Você não parece feliz.

Amita: Não estou feliz. Estou tentando descobrir como escrever um teste automatizado, mas não sei por onde começar. Eu não codifico. Sinto que estou obsoleto.

Andy: Uau, eu não acho que seja tão ruim assim. Por um lado, precisaremos sempre de alguém que tenha em mente a perspetiva do utilizador. Não há como automatizar isso. Por outro lado, ninguém começa a saber automatizar testes. Todos nós éramos iniciantes em algum momento. Espero poder tornar o processo de aprendizagem um pouco mais fácil.

Eu acho que a melhor maneira de começar é automatizar algo que você faz regularmente manualmente. Escolha um teste de interface do usuário. Então vamos percorrer e anotar os passos. Em seguida, descobriremos como automatizar essas etapas. Que teste devemos escolher?

Amita respira fundo.

Amita: Vamos automatizar os testes de janela modal. Quando clico em determinadas coisas, como o botão Baixar jogo , por exemplo, quero verificar se a janela modal correta aparece. Então, quando clico longe da janela modal, quero verificar se a janela modal desaparece e se a janela principal está ativa novamente.

Andy: Parece um ótimo lugar para começar. Executar o teste. Vou anotar o procedimento.

Amita abre um laptop Windows e lança o Google Chrome. Ela vai para o aplicativo Web e verifica se a página inicial está aberta.

Gorjeta

Se você quiser acompanhar os testes manuais da Amita, você pode executar uma cópia local do site do Space Game. No terminal de código do Visual Studio, execute os seguintes comandos e, em seguida, clique no link que se parece com Now listening on: http://localhost:5000.

git fetch upstream selenium
git checkout -B selenium upstream/selenium
dotnet build --configuration Release
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

Andy: OK. O que você verifica a seguir?

Amita: Verifico que quando clico no botão Download de jogos , a janela modal correta aparece.

Amita clica no botão Download do jogo . A janela modal é exibida.

Andy: Ótimo. Que janelas modais verifica a seguir?

Amita: Em seguida, verifico as quatro telas do jogo. Depois disso, clico no melhor jogador na tabela de classificação. Verifico se o perfil do jogador aparece.

Amita clica em cada uma das quatro imagens em miniatura para mostrar as telas de exemplo do jogo.

Em seguida, Amita clica no melhor jogador na tabela de classificação. O perfil do jogador é exibido.

Amita: Isso abrange os testes de janela modal. Eu executo esses testes no Windows porque é isso que a maioria dos jogadores usa para visitar o nosso site. Eu executo os testes no Chrome, e quando tenho tempo também os executo no Firefox e Microsoft Edge.

Se eu tivesse tempo, eu rodaria todos os testes novamente no macOS e Linux, apenas para garantir que somos compatíveis com qualquer sistema operacional que os jogadores usam para visitar o site. Mas eu preciso executar muitos outros testes.

O que são localizadores em Selenium?

Em um teste Selenium, um localizador seleciona um elemento HTML do DOM (Document Object Model) para agir. Pense no DOM como uma representação em árvore ou gráfico de um documento HTML. Cada nó no DOM representa uma parte do documento.

Em um teste Selenium, você pode localizar um elemento HTML por:

• id atributo.
• name atributo.
• Expressão XPath.
• Texto do link ou texto do link parcial.
• Nome da marca, como body ou h1.
• Nome da classe CSS.
• Seletor de CSS.

O localizador que você usa depende da maneira como seu código HTML é escrito e dos tipos de consultas que você deseja executar.

Em um documento HTML, o id atributo especifica um identificador exclusivo para um elemento HTML. Aqui, você usará o id atributo para consultar elementos na página porque cada identificador deve ser exclusivo. Isso torna o id atributo uma das maneiras mais fáceis de consultar elementos em um teste Selenium.

Obter a ID para cada elemento HTML

Aqui, você acompanha Amita e Andy enquanto eles coletam o ID para cada botão que Amita clica e para cada janela modal resultante.

Andy: Eu posso ver por que esses testes demoram tanto e podem ser tão frustrantes. Você vai adorar automatizá-los. Prometo.

Aqui está o que faremos. Obteremos o id atributo para cada botão que você clicar e para a janela modal que aparece. Os testes automatizados que escrevemos podem usar essas expressões para saber em quais botões clicar e quais janelas modais esperar.

Vamos começar obtendo o atributo para o id botão Baixar jogo .

Nota

Você pode seguir estas etapas, se quiser, ou apenas ler junto. A próxima seção fornece todos os id atributos que você precisa quando executa os testes automatizados.

1. No Google Chrome, aceda à página inicial do Jogo Espacial.

2. Clique com o botão direito do rato no botão Transferir jogo e, em seguida, selecione Inspecionar.

   A janela de ferramentas de desenvolvedor é aberta. O código HTML para o botão Download de jogo é realçado.

3. Examine o código realçado e anote o id atributo. Copie o id para mais tarde.

   

4. Selecione o botão Baixar jogo . Em seguida, repita as etapas 2 e 3 para obter o id atributo para a janela modal que aparece.

5. Repita o processo para as quatro telas de jogo e o melhor jogador na tabela de classificação.

Amita abre o Microsoft Word e adiciona uma tabela. A tabela contém o atributo para cada link e o id id atributo para a janela modal correspondente. Para manter a tabela básica, Amita registra:

• O botão Transferir jogo .
• Apenas uma das telas do jogo.
• O melhor jogador na tabela de classificação.

Veja como é a mesa de Amita:

Funcionalidade	Ligação id	Modal id
Botão Descarregar jogo	download-btn	pretend-modal
Primeira tela do jogo	screen-01	screen-modal
Melhor jogador da tabela de classificação	profile-1	profile-modal-1

Planejar os testes automatizados

Amita: OK. Temos o id atributo para cada botão que clico. Temos também a janela modal resultante. O que se segue?

Andy: Acho que estamos prontos para escrever nossos testes. Aqui está o que faremos:

1. Crie um projeto NUnit que inclua Selenium. O projeto será armazenado no diretório junto com o código-fonte do aplicativo.
2. Escreva um caso de teste que use automação para clicar no link especificado. O caso de teste verifica se a janela modal esperada aparece.
3. Use o atributo que salvamos para especificar os parâmetros para o id método de caso de teste. Esta tarefa cria uma sequência, ou série, de testes.
4. Configure os testes para serem executados no Chrome, Firefox e Microsoft Edge. Esta tarefa cria uma matriz de testes.
5. Execute os testes e veja cada navegador da Web aparecer automaticamente.
6. Assista Selenium executar automaticamente através da série de testes para cada navegador.
7. Na janela do console, verifique se todos os testes foram aprovados.

Amita: Ficarei animado para ver a rapidez com que os testes são executados. Podemos experimentar os testes agora?

Andy: Sem dúvida. Vamos passar para o meu laptop. Tenho o código da aplicação pronto.