Atualmente, ao considerarmos a adoção de automação de testes, enfrentamos uma série de desafios que muitas vezes desencorajam ou retardam sua implementação em equipes ágeis.
Esses desafios são ainda maiores quando lidamos com squads ou comunidades que estão começando a estruturar uma equipe de qualidade do zero. Alguns dos principais desafios incluem:
- Resistência ou falta de priorização para a configuração de projetos de automação.
- Falta de padronização entre ferramentas e arquiteturas a serem seguidas.
- Dificuldades técnicas, como a execução em esteiras de CI, geração de relatórios, entre outros.
- Dificuldades na manutenção dos testes automatizados por divergências de padrões utilizados.
Neste artigo, aprenderemos como estruturar uma automação de testes de forma simples usando a ferramenta Stackspot. Dessa forma, poderemos nos concentrar na seleção dos testes e em sua automação, sem perder tempo na estruturação do projeto.
O que é o stackspot?🤔
A Stackspot é uma plataforma que centraliza padrões de tecnologia e que incentiva a reutilização de código e arquitetura na criação de projetos.
Existem três conceitos importantes que precisam ser compreendidos: Estúdio, Stack, Plugin.
- Estúdios centralizam os padrões de tecnologias utilizadas, para times que possuem estilo de desenvolvimento comum.
- Stacks são decisões tecnológicas que aplicam mais velocidade, e padronizam o desenvolvimento das aplicações.
- Plugins adicionam novas capacidades a sua aplicação com a inclusão de código fonte, importação de bibliotecas além da execução de comandos e operações de alta complexidade.
Podemos entender um estúdio como um conjunto de tecnologias adotadas por um time, que é organizado em stacks. As stacks são formadas por decisões tecnológicas específicas, como a escolha de uma ferramenta, linguagem ou arquitetura. Os plugins, por sua vez, são pequenas complementações a uma stack, que adicionam funcionalidades específicas.
Por exemplo, um estúdio para um time de qualidade pode conter diversas stacks, como uma stack de automação de API com RestAssured em Java/Kotlin, uma stack de automação web com Cypress ou uma stack de automação mobile com Appium.
Os plugins podem ser usados para adicionar recursos específicos a uma stack, como a configuração de um farm mobile como o BrowserStack para a stack de automação com Appium ou a geração de relatórios com o Allure para a stack de automação com Cypress.
Nessa post, veremos como podemos iniciar uma automação com cypress utilizando stackspot.
Mão na massa:🐱💻
Pré-requisito📑
- NodeJS instalado
Instalando o Stacksport🚀
Antes de iniciarmos a construção do nosso projeto, é essencial que instalemos a STK CLI para aproveitar todos os recursos disponíveis da Stackspot.
É importante destacar que a instalação requer uma conta de acesso a plataforma da Stackspot, e recomendado utilizar a autenticação com o Github, que permite o acesso a versão pública da Stackspot Community.
Para obter instruções sobre como realizar o download do executável ou binario, acesse o link de instruções de instalação. Neste tutorial, utilizaremos a versão 4.5.0 para Windows.
Para verificar se a CLI foi instalada corretamente, basta utilizar o seguinte comando em qualquer ferramenta de linha de comando. Neste tutorial, utilizaremos o Git Bash:
stk --version
Importando sua primeira stack🧐
Para criar o nosso projeto, utilizaremos uma stack pública
disponível em qa-cypress-stack.
No painel de estúdios da Stackspot, é possível encontrar uma lista das stacks disponíveis. Cada estúdio contém suas próprias stacks, juntamente com as instruções de instalação necessárias. No entanto, se você estiver procurando por uma stack de exemplo que não esteja associada a nenhum estúdio, é possível importá-la diretamente do repositório criado para esse fim. Dessa forma, você poderá acessar facilmente a stack desejada e utilizá-la em seu projeto.
Antes de prosseguir, é necessário importar a stack para que ela fique acessível na sua CLI. Para isso, basta executar o seguinte comando:
stk import stack https://github.com/marlo2222/qa-cypress-stack
Em alguns casos, pode ser necessário fornecer o endereço de e-mail associado a sua conta de login. Se for solicitado, utilize o mesmo endereço de e-mail da sua conta do GitHub.
Uma vez importada a stack, basta utiliza o seguinte comando para verificar as stacks disponíveis:
stk list stack
Onde podemos verificar que a stack qa-cypress-stack está listada:
+------------------+------+-------------------------------------+
| name | type | description |
+------------------+------+-------------------------------------+
| qa-cypress-stack | re | stack para a criação de projetos de |
| | mo | automação com cypress |
| | te | |
+------------------+------+-------------------------------------+
Criando seu projeto cypress👩💻
Com a nossa stack disponível, podemos criar nosso projeto de automação com Cypress executando o seguinte comando no diretório de destino desejado:
stk create app
Ao executar este comando, será solicitado que você forneça um nome para o seu app. Neste exemplo, vamos chamá-lo de projeto-test.
? Nome da sua aplicação:projeto-test
Em seguida, será solicitado que você escolha a forma como deseja criar o seu app. Selecione a opção template:
? Crie o aplicativo usando: (Use arrow keys)
» template
stackfile
Em seguida, serão listadas as opções de templates disponíveis com base nas stacks instaladas. No nosso caso, a stack qa-cypress-stack contém apenas um template chamado cypress-template. Selecione essa opção:
Escolha o template a ser usado: (Use arrow keys)
» cypress-template
É importante destacar que também poderíamos ter utilizado o seguinte comando para agilizar um pouco o processo:
stk create app projeto-test -t qa-cypress-stack/cypress-template
Uma observação importante é que dentro de uma stack, podemos ter diversos templates com o mesmo objetivo, mas com decisões distintas. Por exemplo, em nossa stack "qa-cypress-stack", poderíamos ter dois templates diferentes para a criação do projeto, um utilizando Javascript e outro utilizando Typescript.
Antes de criar o projeto, você precisará responder algumas perguntas básicas fornecendo informações para o seu projeto. Todas as perguntas já possuem uma resposta padrão, no entanto, vou informar a nossa URL base para testes, que é a do front do servidor de testes server-rest.
? Informe a versão do projeto (1.0.0)
? Informe a descrição do projeto (projeto de automação com cypress)
? Informe o autor do projeto (time de QA)
? Informe a licença para esse projeto (ISC)
? Informe a URL base a ser utilizada pelos testes (http://localhost:4200) https://front.serverest.dev/
Podemos observar que o Stackspot nos informa que a aplicação foi criada com sucesso.😍
- Aplicação projeto-test criada com sucesso!
Se entramos no diretório com o comando cd projeto-test e realizarmos o comando tree /f /a poderemos observar a estrutura do nosso projeto:
| .gitignore
| cypress.json
| package.json
| README.md
| stk.yaml
|
\---cypress
+---integration
| \---E2E
| home.spec.js
|
+---plugins
| index.js
|
\---support
| index.js
|
+---commands
| homeCommands.js
| index.js
|
+---locators
| homePage.js
| index.js
|
\---utils
utils.js
Caso o comando tree /f /a não funcione em bash unix, tente no terminais do próprio windows, como CMD ou PowerShell.
Executando o nosso projeto💻
Após a criação do projeto, a stackspot se encarregará de instalar as dependências e verificar se o Cypress foi instalado corretamente.
Para executar nossa automação, basta utilizar o seguinte comando para iniciar a execução do cenário de exemplo, que visita a URL base informada:
npm run cy:open:dev
Com base na execução do cenário de exemplo, podemos confirmar que a URL base informada foi visitada com sucesso.
Recomendo que você execute o projeto em modo de linha de comando (CLI) utilizando o comando npm run cy:run:dev. Vale ressaltar que os relatórios necessários para integração com pipelines de testes já são gerados utilizando a biblioteca Mochawesome.
Exemplo base para projeto cypress
√ acessar base url
1 passing (5s)
[mochawesome] Report JSON saved to C:\Users\marlo\exemplo-cypress\cypress\results\.jsons\mochawesome.json
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 1 │
│ Passing: 1 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: false │
│ Duration: 4 seconds │
│ Spec Ran: E2E/home.spec.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
====================================================================================================
(Run Finished)
Spec Tests Passing Failing Pending Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ √ E2E/home.spec.js 00:04 1 1 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
√ All specs passed! 00:04 1 1 - - -
Sobre o projeto🙏🏼
O projeto já possui uma estruturação de pacotes, acesso a ambientes por meio de environments, geração de relatórios em formato XML utilizando o cypress-multi-reporters e cypress-mochawesome-reporter, além de uma saída em formato XML para pipelines, utilizando o mocha-junit-reporter.
Existem muitos outros pontos que poderiam ser destacados, principalmente em relação às configurações já definidas no arquivo cypress.json. Para obter mais detalhes sobre esses recursos, deixarei todos os detalhes em um repositório específico para a aplicação criada.
Conclusão💖
Como pode ser visto, a utilização da StackSpot simplifica consideravelmente o processo de construção de aplicações, trazendo padrões e padronizações que podem ser de grande ajuda na implementação de projetos de automação de testes em equipe.
Este é apenas um exemplo das diversas aplicações que a Stackspot oferece. Em breve, apresentarei mais conteúdos sobre como podemos utilizar plugins de uma stack em nosso projeto, ou até mesmo criar nossa própria stack.
Quer sabe mais sobre stackspot? vou esta deixando o link para o github oficial onde você pode encontrar os principais contatos para o time da stackspot.✨
Sinta-se à vontade para se conectar no Linkedin para qualquer dúvida!😀
Top comments (0)