A automação de testes web é essencial para garantir a qualidade no desenvolvimento de aplicações web. Com o avanço da tecnologia, ferramentas como o Robot Framework e a StackSpot AI têm se destacado devido à sua capacidade de diminuir a carga cognitiva, seja o Robot com sua sintaxe de fácil absorção, seja a StackSpot por ser um assistente de código contextualizado e oferecer sugestões assertivas.
Neste artigo, vamos aprender como usar a StackSpot AI e o Robot Framework para fazer a automação de testes web para validar a sua acessibilidade, incluindo o acesso e a validação da página inicial do site do StackSpot.
Vamos abordar também como realizar a configuração inicial na máquina até a execução dos testes, demonstrando como essas ferramentas são úteis e podem se tornar aliadas no dia a dia.
Conheça a StackSpot AI
Antes de tudo, a StackSpot AI é uma plataforma que auxilia equipes de desenvolvimento na geração e otimização de código, proporcionando sugestões avançadas e simplificação de tarefas comuns de codificação. Isso porque o assistente de código IA é capaz de usar seu contexto, bases de conhecimento e decisões tecnológicas para gerar sugestões mais assertivas e de alta qualidade.
A StackSpot AI oferece diversos benefícios, por exemplo:
- Otimizar a Developer Experience (DevEx);
- Sugestões de código mais assertivas;
- Comandos rápidos para automatizar tarefas repetitivas;
- Aumento da produtividade no desenvolvimento e redução da carga cognitiva;
- Redução de erros;
- Apoio em ações de qualidade e segurança de código;
- Suporte a múltiplas linguagens de programação;
- Integração com diversas plataformas de desenvolvimento; e muitos outros.
E o melhor, a StackSpot AI é gratuita para usar. Comece a usar a StackSpot hoje mesmo.
O que é o Robot Framework e por que usamos ele?
O Robot Framework é uma ferramenta de automação de código aberto baseada em Python, amplamente utilizada para automação de testes em ambientes mobile, API e web. Sua sintaxe é de fácil interpretação, utilizando palavras-chave e diversas bibliotecas.
Assim, escolhemos o Robot Framework devido à sua facilidade de uso e suporte a biblioteca Selenium Library, que é essencial para a automação de testes web. A facilidade de integração com ferramentas como o Visual Studio Code e o plugin da StackSpot AI também foi um fator crucial.
Consuma inovação, comece a transformação
Assine nosso boletim informativo para se manter atualizado sobre as práticas recomendadas mais recentes para aproveitar a tecnologia para gerar impacto nos negócios
Importância da Acessibilidade em Páginas Web
A acessibilidade na web é fundamental para garantir que todas as pessoas, incluindo aquelas com deficiências, possam utilizar a internet de forma eficaz. Tornar um site acessível vai além de um design bonito e atraente, significa que o conteúdo ou serviço seja compreendido de maneira autônoma por todos. Isso melhora a experiência do usuário, e aumenta o alcance do site para alcançar diversos públicos.
Um dado relevante é que, segundo a Pesquisa Nacional por Amostra de Domicílios (PNAD): sobre pessoas com Deficiência de 2022, mostra que a população com deficiência no Brasil é estimada em 18,6 milhões de pessoas de 2 anos ou mais, correspondendo a 8,9% da população dessa faixa etária.
Além disso, existem legislações que asseguram o direito da Pessoa com Deficiência, e um desses direitos é o da acessibilidade, incluindo a acessibilidade digital.
Importância do elemento title para a acessibilidade digital
O elemento “title” é importante para a acessibilidade, especialmente para pessoas com deficiências visuais que utilizam leitores de tela. O título da página é uma das primeiras informações anunciadas pelo leitor de tela, ajudando essas pessoas a entenderem rapidamente o contexto e o propósito da página. Além disso, o título aparece nas guias do navegador, facilitando a navegação entre múltiplas abas abertas.
Automação de testes web com Robot Framework e StackSpot AI
Agora que você está familiarizado com as ferramentas que utilizaremos, é hora de começar a trabalhar com o Robot Framework e a StackSpot AI para fazer a automação de testes web e verificar a acessibilidade de elementos nas páginas da internet. A seguir, iniciaremos a parte prática!
Configuração inicial
Antes de tudo, é necessário configurar o ambiente de desenvolvimento.
Certifique-se de que o Python está instalado em sua máquina. Em seguida, instale a library robotframework utilizando o pip:
pip install robotframework
Instale o SeleniumLibrary para interagir com os navegadores web, execute o comando:
pip install robotframework-seleniumlibrary
Para que o Selenium funcione corretamente, é necessário ter algum driver de navegador instalado. Neste artigo, usaremos o ChromeDriver, que permite controlar o navegador Google Chrome. Faça o download do driver e siga as instruções de instalação de acordo com seu sistema operacional.
Instale o plugin da StackSpot AI para o Visual Studio Code ou para JetBrains. Siga o passo a passo na documentação.
Agora podemos começar a mapear os elementos do nosso teste automatizado.
Mapeando elemento do site StackSpot
Neste artigo, iremos mapear o elemento “title”. Para isso, iremos validar se ele está presente na página. Aqui estão os passos para isso:
- Acesse o site: Abra o navegador Chrome e navegue.
- Abra as ferramentas de desenvolvedor: Pressione Ctrl + Shift + I no Windows/Linux ou Cmd + Option + I no Mac para abrir as Ferramentas de Desenvolvedor do Chrome. Como alternativa, você pode clicar com o botão direito em qualquer lugar da página e selecionar “Inspecionar”.
- Navegue até o console: Nas Ferramentas de Desenvolvedor, clique na aba “Console”. Esta aba permite que você execute um JavaScript diretamente na página carregada.
- Execute o comando: Digite o seguinte comando no console: document.title
- Confira o resultado: O console retornará o título da página, que é o conteúdo da tag <title> no HTML. O resultado será: StackSpot – StackSpot | Home
Criando prompt para automação web
Agora, vamos criar um prompt para validar o título da página inicial da StackSpot. Siga os passos abaixo:
- Criar um arquivo de teste: No Visual Studio Code, crie um novo arquivo com a extensão .robot, por exemplo, test_stackspot_homepage.robot.
- Criar a pasta driver: No diretório do seu projeto, crie uma nova pasta chamada driver. Você pode fazer isso manualmente ou usando o terminal. Para criar a pasta via terminal, execute o comando na raiz do seu projeto: mkdir driver
Após criar a pasta driver, mova o arquivo “chromedriver” baixado no passo anterior para dentro desta pasta. Você pode fazer isso manualmente, arrastando o arquivo para a pasta “driver”, ou usando o terminal. Para mover o arquivo via terminal, execute o comando a seguir, substituindo “<caminho_do_chromedriver>” pelo caminho onde o chromedriver foi baixado:
mv <caminho_do_chromedriver> driver/
Por fim, verifique se o chromedriver está na pasta “driver”. A estrutura do seu projeto deve ficar semelhante a esta:
- Utilize o Plugin StackSpot AI: Digite o seguinte prompt e aguarde a resposta da StackSpot AI:
Criar um script de teste automatizado utilizando Robot Framework e SeleniumLibrary para validar a acessibilidade da página inicial da StackSpot.
### Requisitos ###
- A página a ser testada é: https://www.stackspot.com/en/.
- O título esperado da página é: “StackSpot \ Home”.
- O executável do ChromeDriver está localizado em: driver/chromedriver/chromedriver.exe.
### Instruções ###
- Configure o ambiente de teste para utilizar o Robot Framework e a SeleniumLibrary.
- Especifique o caminho do ChromeDriver no script de teste.
- Implemente o teste para abrir a página inicial da StackSpot e validar o título da página.
- Execute o teste: No terminal, execute o comando abaixo para iniciar o teste:
robot -d ./logs test_stackspot_homepage.robot
- Verifique o resultado: Após a execução, o framework de automação gera um relatório detalhado com o resultado do teste na pasta logs.
Prompt para execução em modo headless
O modo headless permite que o navegador seja executado em segundo plano, sem abrir uma janela gráfica. Isso é útil para ambientes de integração contínua (CI) e para economizar recursos do sistema durante a execução de testes automatizados.
Então, para ajustar o script e adicionar trechos de código, podemos utilizar a StackSpot AI para gerar o código necessário. Selecione todo o código na sua IDE e escreva o seguinte prompt:
Ajuste o código para que o teste seja executado em modo headless. Remova do código o caminho do ChromeDriver.
Execute o teste no terminal e aguarde o resultado da execução.
Quick Commands da StackSpot AI
Agora que temos o código desenvolvido, podemos explorar outra funcionalidade da StackSpot: os Quick Commands. Essas são instruções que permitem a execução de ações pré-definidas de forma ágil e eficiente. Os Quick Commands facilitam e aceleram a interação com o sistema, permitindo que você execute tarefas comuns com menos esforço e tempo.
Gerando documentação do projeto
É uma prática de programação gerar o README para aqueles que tenham acesso ao código fonte da aplicação, para que possam dar manutenção com maior facilidade. Vamos colocar em prática como criar um Quick Command que nos ajude a criar esta documentação. Siga os passos a seguir:
- Siga os passos iniciais na documentação da StackSpot para criar um Quick Command. Na opção IDE, siga as instruções:
- Preencha os campos:
- Quick Command Name: gerar-doc
- Command: gerar-doc
- Description: Quick command criado para gerar documentação a partir do código selecionado
- Clique em ‘Next’
- Selecione para criar o quick command a partir de um template ‘Hello World’.
- Na seção de utilização do Quick Command, realize os passos:
- Clique na caixa de seleção chamada ‘explain code’
- Ajuste o texto do prompt exibido para:
Dado que eu sou um desenvolvedor
Quando eu selecionar este {{selected_code}}
Então gere um arquivo README.md
E o conteúdo do README deve incluir:
– Uma introdução do projeto
– Pré-requisitos necessários para executar os testes
– Instruções de configuração e execução dos testes
– Detalhes do código selecionado
– Resumo da saída esperada para cada cenário
- Clique em ‘Save’;
- Finalize clicando em ‘Finish’;
- Acesse o Vs Code e siga:
- No VS Code, selecione o trecho de código que você deseja formatar;
- Com o trecho de código selecionado, clique com o botão direito do mouse;
- Escolha StackSpot AI > My quick commands > gerar-doc;
Assista ao tutorial em vídeo:
Conclusão
Por fim, quando usamos o Robot Framework, com sua sintaxe simples e fácil compreensão, combinado com a StackSpot AI, temos dois poderosos aliados na automação de testes. A capacidade de gerar scripts de teste automaticamente e a facilidade de integração com o Visual Studio Code tornam essa combinação uma excelente escolha.
Além disso, a funcionalidade de Quick Commands permitiu a execução de ações pré-definidas de forma ágil, garantindo que a pessoa desenvolvedora possa focar em tarefas mais complexas e estratégicas, diminuindo sua carga cognitiva.
Espero que este artigo seja útil e que seja um ponto de partida para você se sentir mais confiante para começar a fazer a automação de testes web com a StackSpot AI.
Ficou com alguma dúvida ou tem sugestões? Então deixe um comentário.
