Automatizando testes com Selenium

Os testes automatizados são essenciais para garantir que o seu código se comporte como esperado, especialmente em interfaces de usuário, que podem ser afetadas por mudanças em diversas partes do sistema. O Selenium é uma das ferramentas mais populares para automatizar testes de UI e pode ser facilmente integrado em projetos Blazor. Neste artigo, vamos aprender como usar o Selenium para realizar testes automatizados em um projeto Blazor, simulando a navegação entre as telas e a interação com os componentes da interface.

O que é o Selenium?

O Selenium é uma ferramenta de automação para aplicações web. Ele simula ações realizadas pelo usuário, como clicar em botões, preencher campos de texto e navegar entre páginas, e é amplamente utilizado para validar a funcionalidade de interfaces de usuário.

Principais componentes do Selenium

WebDriver: interface principal do Selenium para interagir diretamente com o navegador, realizando as ações que um usuário faria.

Selenium IDE: uma ferramenta para gravar e reproduzir interações no navegador.

Selenium Grid: permite executar testes paralelamente em diferentes navegadores e sistemas operacionais.

Neste artigo, focaremos no uso do Selenium WebDriver, integrando-o com um projeto Blazor para automatizar os testes.

Instalando o Selenium no projeto de testes

Antes de escrever os testes, vamos criar um projeto Blazor com Blazor Server. Aqui, usaremos um projeto Blazor básico com a navegação entre telas. Após isso, vamos criar um projeto de testes para automatizar a navegação entre as páginas Blazor utilizando o Selenium.

Para isso, você pode clicar na solução com o botão direito do mouse e ir em “Add” ou “Adicionar” e selecionar a opção “New Project” ou “Novo Projeto…”. Após isso, uma tela será aberta para selecionar um novo projeto. Digite na barra de busca “MSTest” e selecione a opção “MSTest Test Project” ou “Projeto de Teste MSTest”. Continue as configurações e selecione o “MSTest” na opção “Executor de teste” ou “Test Runner”.

Agora vamos adicionar o pacote do Selenium WebDriver via NuGet:

				
					dotnet add package Selenium.WebDriver
dotnet add package Selenium.WebDriver.ChromeDriver

Configurando o WebDriver

O Selenium pode usar o ChromeDriver (ou Firefox, Edge, etc.) para controlar o navegador. Em nosso exemplo vamos configurar o ChromeDriver para automação.

				
					using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;

namespace BlazorApp.Tests
{
    [TestClass]
    public class BlazorAppTests
    {
        private IWebDriver driver;

        [TestInitialize]
        public void Setup()
        {
            driver = new ChromeDriver();  
        }

        [TestMethod]
        public void TestLoginPageNavigation()
        {
            // Teste de Login
        }

        [TestCleanup]
        public void Cleanup()
        {
            driver.Quit();  
        }
    }
}

No código acima, temos a classe “BlazorAppTests”, que recebe o atributo “[TestClass]”. Este atributo identifica que a classe “BlazorAppTests” é uma classe de testes automatizados. Dentro dessa classe, declaramos a variável driver do tipo “IWebDriver”, que é a interface principal do Selenium usada para controlar o navegador durante os testes.

Em seguida, o nosso código foi dividido em três partes: o que será feito antes de cada teste, os testes em si, e o que será feito após cada teste.

Setup (Inicialização): a classe “Setup” recebe o atributo “[TestInitialize]”, que indica que o código dentro desse método será executado antes de cada teste. Nesse método, inicializamos o navegador Chrome, permitindo que o Selenium controle o navegador para o teste.

Testes: o método “TestLoginPageNavigation” recebe o atributo “[TestMethod]”, que identifica que esse método é um teste. Dentro dele, vamos implementar o teste de login na aplicação de exemplo, validando o comportamento esperado da interface.

Cleanup (Limpeza): por fim, temos a classe “Cleanup”, que recebe o atributo “[TestCleanup]”. O código dentro deste método será executado após a execução de cada teste. O “Cleanup” é responsável por limpar ou finalizar qualquer recurso que tenha sido utilizado durante o teste, como o fechamento do navegador.

Implementando os testes

Agora, dentro da nossa classe “TestLoginPageNavigation” vamos implementar o teste de login:

				
					driver.Navigate().GoToUrl("https://localhost:7298/");

Usamos o “GoToUrl” para abrir o navegador na URL da nossa aplicação, que, neste caso, é a página inicial da aplicação.

				
					Assert.IsTrue(driver.Title.Contains("Home"));

Aqui, validamos se a nossa aplicação realmente está na página inicial, verificando se o título da página contém o valor “Home”. Essa verificação assegura que a navegação para a página inicial foi bem-sucedida.

				
					driver.FindElement(By.LinkText("Login")).Click();
Assert.IsTrue(driver.Url.Contains("Login"));

Para encontrar um elemento na tela, usamos o método “FindElement”. Ele disponibiliza várias formas de localizar um elemento. No código acima, utilizamos o “LinkText”, que procura dentro dos links da página aquele que contém o texto “Login”. Em seguida, usamos o “Click” para simular o clique nesse link. Após o clique, a aplicação deve redirecionar para a página de login.

Para garantir que a navegação foi realizada corretamente, podemos validar se a URL foi alterada para a página de login. A asserção “Assert.IsTrue(driver.Url.Contains(“Login”))” garante que a URL contém a palavra “Login”, o que indica que a navegação ocorreu com sucesso.

Agora, vamos adicionar as interações necessárias para preencher os campos de login e submeter o formulário.

				
					var emailInput = driver.FindElement(By.XPath("/html/body/div[3]/div/div/div[1]/form/div/div[1]/div/div/div/input"));

var passwordInput = driver.FindElement(By.XPath("/html/body/div[3]/div/div/div[1]/form/div/div[2]/div/div/div/input"));

emailInput.SendKeys("nwe@email.com");
passwordInput.SendKeys("N3xtW@v3");

driver.FindElement(By.XPath("/html/body/div[3]/div/div/div[1]/form/div/div[4]/button")).Click();

Para localizar os campos de e-mail e senha, utilizamos novamente o método “FindElement” e passamos o XPath de cada campo. O XPath é uma forma de localizar elementos na página, especificando seu caminho hierárquico dentro do código HTML. Esse método de localização é útil quando queremos encontrar um elemento com base em sua posição na estrutura da página.

Após localizar os campos de e-mail e senha, utilizamos “SendKeys” para preencher os campos com os dados de login, como o e-mail “nwe@email.com” e a senha “N3xtW@v3”.

Por fim, localizamos o botão de login, também através do XPath, e utilizamos o método “Click” para simular um clique no botão, submetendo o formulário de login.

Para localizar o XPath, você pode clicar com o botão direito do mouse sobre o elemento desejado e selecionar a opção “Inspecionar” ou pressionar “F12” do seu teclado. Em seguida, clique com o botão direito no elemento destacado na ferramenta de inspeção e vá até a opção “Copy”. Por fim, escolha “Copy full XPath” para copiar o XPath completo do elemento.

Ao clicar no botão de login, uma requisição é enviada para o backend com o objetivo de validar e autorizar o usuário na aplicação. Dependendo da carga do sistema e da rede, esse processo pode levar algum tempo. Em situações como essa, o Selenium oferece uma funcionalidade que permite aguardar a página ser carregada e um elemento específico ser exibido antes de prosseguir com o teste.

Utilizando o “WebDriverWait”, podemos configurar uma espera explícita, que aguarda até que o elemento desejado esteja visível:

				
					WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));

IWebElement element = wait.Until(driver => driver.FindElement(By.XPath("/html/body/div[3]/div/h3")));

Neste exemplo, o Selenium aguardará até 10 segundos para que o elemento localizado pelo XPath seja encontrado e exibido, garantindo que o processo de carregamento da página tenha sido concluído antes de realizar qualquer ação subsequente.

Agora com o teste de login implementado, podemos inicializar o nosso teste:

Acelere a sua carreira conosco!

Se você é Desenvolvedor .NET Júnior e quer acelerar sua carreira até nível Pleno com salário de R$7k+, ou mesmo busca a primeira vaga, conheça a Mentoria .NET Start: Clique aqui

Se é Desenvolvedor .NET Pleno ou Sênior e quer virar referência técnica em sua equipe e mercado, com salário de R$10k+, conheça a Mentoria .NET Expert: Clique aqui

Conclusão

O Selenium é uma ferramenta valiosa para testar a interface de aplicações web, proporcionando automação e confiabilidade no processo de validação de funcionalidades. Ao usar boas práticas você pode construir testes robustos e de fácil manutenção.