Testes em .NET: testes de interface usando Selenium

Configuração do projeto - Apresentação

Olá, pessoal, tudo bem? Meu nome é André Bessa, serei o instrutor de vocês nesse curso de testes com .NET.

O que vamos ver nesse curso? Vamos trabalhar com a aplicação WebDriver, que será o Alura ByteBank. Deixa eu mostrar para vocês.

Essa é a interface do Alura ByteBank, uma aplicação bem simples, que vai nos permitir cadastrar agências, editar agências, excluir uma agência, ver os detalhes de uma agência, de clientes e de contas-correntes.

Essa aplicação já está funcional e toda a configuração do projeto será mostrada nas aulas iniciais do curso.

Vamos testar uma interface web, trabalhando com testes end-to-end, onde vamos simular as operações do usuário final. Faremos um login na aplicação, cadastrando uma agência nova, um cliente novo, listando e verificando se aquele cliente foi cadastrado corretamente na aplicação.

Como ferramentas para esse curso, vamos continuar trabalhando com o xUnit, que é com a biblioteca amplamente conhecida no universo .NET para automação de testes, e vamos trabalhar, em conjunto com o xUnit, o Selenium WebDriver, que é uma biblioteca open source que nos permite trabalhar com esses testes de interface, de maneira bem fluida e natural.

Para quem é este curso? Este curso foi pensado principalmente para quem está iniciando no universo .NET, quem já viu os primeiros passos de testes de unidade, testes de integração, e que tem o conhecimento básico de oritentação ao objeto.

E de HTML, que será muito útil para identificarmos alguns elementos da página para podermos recuperar o nosso código de teste.

Animados? Vamos começar?

Configuração do projeto - Selenium IDE

Olá, pessoal, tudo bom? Continuando, já temos a nossa aplicação configurada. Vou inciar a aplicação web agora ASP .NET MVC. Vou startar a aplicação pelo Visual Studio Community, apertando o play na barra superior do Visual Studio.

Essa ação iniciará o IIS, o nosso servidor web da Microsoft, e implantará uma solução, que é o Alura ByteBank, o ABB app.

Carregou a aplicação. Vou fazer o login na aplicação. Cliquei em “Login”, vou usar o e-mail para logar, “andre@email.com”, e a senha é “senha01”. Loguei.

Foi habilitado para mim os menus “Home”, “Agência”, “Cliente” e “Conta Corrente”. Vou cadastrar agora uma agência. O ByteBank já carrega no banco as informações de agência que eu tenho aqui.

Vou adicionar uma nova agência, o número da agência “17896”; o nome da agência, “Agência Central”; o endereço, “Rua Jerônimo Monteiro”; e o identificador que é um guide, já tenho na memória e vou utilizá-lo.

Cliquei em “Novo”, cadastrou a “Agência Central” – tem duas agências centrais agora, posso excluir. Vou fazer o logout da aplicação e voltei para a tela de login.

Existem alguns passos repetitivos que eu posso automatizar, como a maneira de testar, evitar retrabalho. Eu tenho um dos frameworks recentes no mercado para trabalhar com aplicações web, o Selenium WebDriver. Vou abrir para vocês o site selenium.dev.

Esse é o site oficial do Selenium. O Selenium hoje é composto por algumas soluções. Eu tenho o Selenium WebDriver, o nosso foco do curso, que é uma biblioteca para criar testes de interface e testes end-to-end.

O Selenium IDE e o Selenium Grid. O Selenium Grid permite fazer testes de maneira distribuída, com outros navegadores, outros servidores, outros centros operacionais, então é interessante usar essa solução.

O Selenium é a biblioteca que vamos usar dentro do C# (C Sharp), do código de teste. Temos também o Selenium IDE, uma solução open source, e tem disponível para o Chrome e para o Firefox. Por quê?

Porque ele é um plugin de navegador que vai nos permitir gravar uma macro, executando passos repetitivos de uma interface web. Imagine, por exemplo, eu preciso acessar o painel administrativo e executar uma série de rotinas. Isso é repetitivo, os dados vão ser sempre os mesmos, por exemplo.

Então, é interessante você gravar isso e mandar rodar depois em determinado momento. O Selenium IDE ajudar com isso. De novo, hoje temos o Selenium IDE disponível para o Chrome e para o Firefox.

Então, ele é um plugin e é bem simples de instalar. Vai ter um material adicional falando sobre o Selenium IDE e comentando sobre Selenium Grid no nosso curso.

Nos plug-in's do navegador, vou clicar no botão que abre a lista de plug-is's, já tenho a extensão “Selenium IDE” instalada para o Chrome. Vou clicar nela e iniciar. Essa é interface do Selenium IDE. Deixa só eu fechar a janela aberta atrás.

O Selenium IDE me permite fazer o quê? Que eu grave uma série de passos e eu repito isso depois de maneira automatizada, esse passo a passo. Então, vou criar um novo teste de exemplo.

Vou chamar de “LogandoNoSistema”, clicar em “Ok”, e eu preciso usar a URL base. Tenho que voltar para o meu projeto. Vou pará-lo e executá-lo utilizando o “Ctrl + F5”.

Ele startou a janela aberta. Essa é a URL que eu quero testar, “localhost:44309”. “Ctrl + C”, vou minimizar a janela que abriu e a janela do programa e voltar para a tela do Selenium IDE.

Vou colocar aqui a URL base, que é a URL para testar. Repare bem que agora que coloquei a URL, apareceu para mim a opção “START RECORDING”, o botão ao lado do "CANCEL" para eu poder gravar.

Começou a gravar, abriu o start da minha aplicação, vou clicar em “Login”, vou colocar o e-mail e a senha “senha01”, e vou logar. Repare que no canto inferior esquerdo está escrito “START RECORDING” porque está gravando, .

Vou parar aqui, dei um clique, tudo está sendo gravado. Vou fazer o logout, voltei para o meunu principal, vou fechar o navegador e aqui vou parar a gravação dentro do Selenium IDE.

Vou colocar um nome para esse teste, que ele chama de teste, mas, na verdade, é uma macro. Vou chamar também de “LogandoNoSistema”. O “LogandoNoSitema”, o que ele faz? Aqui eu tenho uma série de comandos que são executados pela ferramenta, que é aquele passo a passo que eu quero automatizar por ser uma execução repetitiva, enfim, eu quero automatizar aquele passo a passo.

Primeiro, abre o navegador; segundo passo, configura o tamanho da janela do navegador da URL “localhost44309; vai clicar no login, vai clicar no ID, no e-mail; no próximo, vai escrever o e-mail “andre@email.com”; em algum momento depois, vai inserir a senha e vai clicar no botão “btm-logar”.

Vai dar um clique no “css-html” e vai fechar a janela. Esse é o passo a passo gerado pelo Selenium IDE. Mas no que isso vai me ajudar? Eu vou conseguir utilizar isso em algum momento?

Eu quero automatizar a interface, abrir, fazer o login na aplicação, achar uma funcionalidade que seja repetitiva, isso vai me ajudar bastante, mas o Selenium IDE também faz uso da ferramenta chamada Selenium WebDriver.

A biblioteca vai nos permitir automatizar nossos códigos e criar códigos de teste para a interface. Repare que no um teste que foi criado – que não é um teste, é um script, nesse início, eu consigo salvar isso para utilizar depois em outros momentos.

Seja para repetir esse passo a passo, para executar, ou simplesmente para gerar esse código e aproveitá-lo dentro do código de teste. Ainda na Selenium IDE, vou clicar em “Play” só para executar novamente, porque estou falando que ele executa, mas temos que testar também.

Vou testar executando “Run current test”. Vou clicar no play e notamos que abriu a aplicação, logou, fechou. É bem rápido. Então, ele abre o navegador, seta as informações de login, faz o login, acesso o menu, faz o logout e sai da aplicação.

Esse teste eu vou salvar agora. Vou clicar com botão direito sobre o nome do arquivo na coluna do lado esquerdo, vou exportar esse script, porque eu quero reaproveitá-lo em algum momento futuro. Clico em “Export”. Repare bem, essa janela que abriu é interessante porque eu consigo salvar esse script gerado usando C#, com as bibliotecas de teste NUnit e xUnit, Java JUnit, JavaScript, Python e Ruby.

Posso incluir comentários, enfim, vamos explorar muito o Selenium IDE. A principal vantagem é podermos exportar esse script para dentro do código C# e utilizar esse script como um teste.

Vou marcar C# com xUnit, que é a ferramenta que vamos utilizar durante o curso em conjunto com o Selenium. Vou clicar em “Export” e salvar na área de trabalho.

Depois vamos recuperar esse arquivo. Salvei. Já salva na minha máquina. Então aparece o arquivo “LogandoNoSistemaTest.cs”. Vou abrir esse arquivo, vai abrir automaticamente para mim dentro do Visual Studio Community.

Repare bem que tem uma classe SuiteTests e tem um teste aqui dentro chamado “LogandoNoSistema”, que é o que eu defini na interface do Selenium IDE.

Ele importa umas bibliotecas aqui de Driver e JavaScript. Como estou trabalhando com o navegador Chrome, ele importa também a biblioteca do ChromeDriver, que vamos utilizar na sequência para criar nossos testes usando o Selenium.

Ele cria um teste, usando o xUnit, com o passo a passo do que foi feito e traduzindo o código do script em um código inteligível em C#. Isso é muito interessante.

Não vai rodar a aplicação agora porque eu tenho que fazer umas configurações nesse arquivo que vamos ver na sequência, mas qual a vantagem de eu trabalhar com uma ferramenta como o Selenium IDE?

Automatização de tarefas repetitivas na interface e aproveitar o código gerado para trabalhar como teste na minha suíte de testes usando o xUnit e usando o código C#.

Além de permitir que eu entenda como funciona e qual o código gerado. Isso nos ajuda muito a entender e criar nossos próprios códigos de testes dentro do xUnit.

Na sequência, continuaremos falando sobre o Selenium WebDriver que é essa biblioteca do Selenium que vai nos ajudar bastante na escrita dos nossos testes para automatizar os testes de interface.

Nos vemos na sequência.

Iniciando com Selenium WebDriver - Selenium WebDriver

Olá, pessoal, tudo bem? Vamos continuar? Já temos configurada a nossa aplicação, inclusive, já criamos o banco de dados, rodamos migrações utilizando o lightweight framework core. Vimos também as ferramentas de testes de interface, e uma dessas ferramentas compõe o Selenium, que é o Selenium IDE.

Que é um plugin que temos para os principais navegadores que permitem testar, de maneira gráfica, uma interface de uma aplicação web. Mas o nosso objetivo agora é configurar a biblioteca Selenium WebDriver, que vai nos permitir escrever códigos dentro do código C# para podermos manipular esses testes de interface.

Vou fechar a aplicação web app, parei a aplicação. Na camada 4 de testes, vou adicionar um novo projeto. Esse projeto vai se chamar “Alura.ByteBank.WebApp.Testes”, vamos seguir um padrão.

Então, clico na pasta teste com o botão direito, vou em “Adicionar > Novo projeto”. Vamos trabalhar esse projeto usando uma biblioteca bem conhecida que é o xUnit. Vou adicionar um projeto de teste usando o xUnit e, dentro do xUnit, vamos trabalhar com o xUnit e Selenium WebDriver.

Vou selecionar o projeto, também posso pesquisar na barra de busca “xUnit”, clicar em "Projeto de Teste do xUnit" e clicar em “Próximo” no canto inferior direito da janela. O nome do nosso projeto vai ser “Alura.ByteBank.WebApp.Testes”, seguindo o padrão que estou seguindo nesse projeto.

Clico “Próximo”, vou marcar a “Estrutura de Destino” como “.NET5.0”, vamos pedir para “Criar”. Está rodando a estrutura do projeto. Perfeito, já criou até, inclusive, uma classe de teste do xUnit.

Só vou adicionar no código “UnitTest1.cs”, só salvar e já corrigiu as importações. Qual o objetivo agora? É configurarmos o Selenium WebDriver, porque essa biblioteca vai nos permitir criar códigos para oara essa interface web.

Virei no projeto de testes, “Alura.ByteBank.WebApp.Testes > Dependências > Pacotes”. Já tenho alguns pacotes aqui, “xunit”, “Microsoft.net.Test.sdk” e “coverlet.collector”. Vou adicionar, clicando com o botão direito sobre "Pacotes", e clicar em “Gerenciador de Pacotes NuGet”.

Na janela que abre, vou selecionar o Selenium WebDriver. Vou pedir para procurar na barra de busca do NuGet “Selenium”. Já apareceu para mim “Selenium WebDriver”. Vou selecionar a biblioteca a versão 4.1.0, que é a estável recente.

Selecionei “Selenium WebDriver”, vou pedir para instalar e vou adicionar essa biblioteca ao meu projeto. Deu algumas mensagens aqui. O NuGet instalou a versão para mim. Vamos verificar nos pacotes.

Perfeito, instalou o Selenium WebDriver. Só que é o seguinte, eu preciso de um navegador alvo para fazer os testes. Eu vou trabalhar usando o Chrome e, para o Selenium, para eu utilizar o Chrome como meu navegador, eu preciso também instalar um pacote adicional, uma nova biblioteca para o Chrome.

Procurando no NuGet, eu tenho aqui o pacote “Selenium.WebDriver.ChromeDriver”. Eu preciso dessa biblioteca configurada para fazer os testes no Chrome.

Se eu quisesse testar, por exemplo, usando o Firefox ou o Internet Explorer, eu precisaria também procurar a biblioteca relacionada a esse navegador. Então, vamos selecionar o “ChromeDriver”. Cliquei em cima dele e vou clicar em “Instalar” também.

A versão mais recente e mais instável. Vou clicar em “Instalar”, já instalou no meu projeto. Vou fechar o gerenciador de pacotes do NuGet. Agora, na minha solução, eu já tenho instalado e configurado o “WebDriver”, que é a biblioteca que eu preciso usar nos testes.

E também tenho adicionado a biblioteca referente ao navegador que eu vou usar como alvo dos meus testes, que é o “ChromeDriver”. No gerenciador de soluções do meu projeto, na camada 4, de testes, eu tenho dois projetos: de testes de domínio e da infraestrutura, e tenho agora também um novo projeto de testes, para testar a aplicação web com o Selenium WebDriver.

Qual a importância disso? Precisamos ter esse ambiente configurado para começarmos os nossos testes. Na sequência, vamos criar o nosso primeiro teste de interface usando a biblioteca Selenium WebDriver.

Sobre o curso Testes em .NET: testes de interface usando Selenium

O curso Testes em .NET: testes de interface usando Selenium possui 128 minutos de vídeos, em um total de 41 atividades. Gostou? Conheça nossos outros cursos de .NET em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Configuração do projeto
• Iniciando com Selenium WebDriver
• Testando o WebApp
• Testando com localizadores
• Page Objects