DEV Community

Cover image for Acelerando o processo de automação de testes utilizando Stackspot EDP
Marlo Henrique
Marlo Henrique

Posted on • Updated on

Acelerando o processo de automação de testes utilizando Stackspot EDP

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

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.
  • 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, 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 apps 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.

Por exemplo, 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 que instalemos a 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 Community.

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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   |                                     |
+------------------+------+-------------------------------------+
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

É 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
Enter fullscreen mode Exit fullscreen mode

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/

Enter fullscreen mode Exit fullscreen mode

Podemos observar que o Stackspot nos informa que a aplicação foi criada com sucesso.😍

- Aplicação projeto-test criada com sucesso!
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Com base na execução do cenário de exemplo, podemos confirmar que a URL base informada foi visitada com sucesso.

Image description

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

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)