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 EDP. 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 EDP?🤔

A Stackspot EDP(Enterprise Developer Platform), é uma plataforma de desenvolvimento que centraliza padrões de tecnologia, incentiva a reutilização de código e arquitetura na criação de projetos.

Existem alguns conceitos importantes que precisam ser compreendidos:

• Workspace: Organizam conteúdos dos Estúdios (como Plugins, Stacks, Starter) por contextos, facilitando a criação e a implementação padronizada de Aplicações. É gerenciado pela empresa ou usuario responsável pela conta.
• Estúdios: centralizam os padrões de tecnologias utilizados, 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, sendo um agrupamento de plugins.
• 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.
• Starters: são conjuntos predefinidos de Plugins em uma Stack, aplicados com um único comando para criar soluções rapidamente. Eles permitem definir e usar combinações comuns de Plugins, facilitando e agilizando a criação de projetos.

Podemos entender um estúdio como um conjunto de tecnologias adotadas por um time, que é organizado em stacks. As stacks é composta por decisões tecnológicas agrupadas em forma de plugins. Os plugins, por sua vez, forma uma stack, adicionando funcionalidades específicas como a escolha de uma ferramenta ou padrão arquitetural.

Por exemplo, um estúdio para um time de qualidade pode conter uma stacks de testes, e essa stack conter plugins que entreguem soluções, como um plugin de automação de API com RestAssured em Java/Kotlin, um plugin de automação web com Cypress ou um plugin de automação mobile com Appium.

Um estúdio para sua organização pode incluir uma stack de testes com plugins específicos, como automação de API com RestAssured em Java/Kotlin, automação web com Cypress e automação mobile com Appium.

Os plugins podem complementar outros plugins, adicionando recursos como a configuração de um farm mobile, como o BrowserStack, ao plugin de automação com Appium, ou a geração de relatórios com o Allure ao plugin de automação com Cypress.

Nessa post, veremos como podemos iniciar uma automação com cypress utilizando stackspot EDP.

Pré-requisito📑

• NodeJS instalado

Instalando a Stacksport🚀

Antes de iniciarmos a construção do nosso projeto, é essencial realizar a instalação da STK CLI para aproveitar todos os recursos disponíveis da Stackspot EDP.

É importante destacar que a instalação requer uma conta de acesso a plataforma da Stackspot EDP, e recomendado a criação de um conta personal, que permite o acesso a versão pública da Stackspot EDP.

Mais detalhes sobre a criação de uma conta pessoal podem ser encontrados em: personal account.

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 stackpot version 1.0, com a CLI na versão 6.14.1 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

Conhecendo nosso plugin🧐

Para criar o nosso projeto, utilizaremos um plugin disponivel na stack qa-stacks.

O plugin

No painel de estúdios da Stackspot EDP, é possível encontrar uma lista das stacks disponíveis. Cada stack tera seus plugins, juntamente com as instruções de instalação necessárias.

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.

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!😀

📩 linkedin
🐱‍👤 github