Pipeline Cypress Gitlab

Esse tutorial tem como objetivo mostrar de maneira básica como se criar uma pipeline para o sistema de armazenamento de código Gitlab.

Para entender esse tutorial, realizei uma divisão para entendermos um pouco mais sobre o funcionamento de uma pipeline e a partir desse conhecimento inicial conhecermos como criar a pipeline para testes automatizados com o Cypress.

Básico sobre pipelines

Pipeline é um componente de integração, entrega e implementação contínua (CI/CD). Cada pipeline é composta por jobs que definem o que será feito pela determinada pipeline, essa pode ser de compilação de um projeto, teste ou integração. Uma pipeline criada corretamente simplifica a forma como o código é integrado e com uso de fluxos automatizados faz com que se diminua a chance de erro humano.

Para se criar uma pipeline no gitlab, como padrão deve ser criado um arquivo .YML na raiz do projeto com o nome de gitlab-ci.yml.

A partir do entendimento sobre o que é pipeline precisamos conhecer um pouco da nomenclatura de cada parte de uma pipeline:

  • Runner: Um agente que tem como objetivo executar cada trabalho individualmente, esse sendo escalável a partir da necessidade da aplicação.
  • Job: Instruções que um runner deve executar.
  • Pipeline: uma coleção dejobs dividido em diferentes estágios.
  • Estágios: são palavras chaves que define determinados estágios de uma tarefa, esses estágios podem ser de deploy, de teste, build.

Para exemplificar melhor essas etapas imagem abaixo demonstra uma pipeline que possui 4 estágios sendo elas de Build, Test, Deploy e Production, e para cada estágio há os jobs que são as execuções de uma determinada tarefa, como exemplo na etapa de testes há dois jobs que realizam um determinado tipo de teste.

Exemplo de como a pipeline é vista.

Exemplo de como a pipeline é vista.

Agora podemos implementar a pipeline com o Cypress.

Pipeline para Cypress

Assim que criado o arquivo na raiz do projeto com o nome gitlab-ci.yml a primeira informação que devemos adicionar é a imagem que será utilizado para a execução dos jobs. É uma imagem docker na qual todos os jobs irão executar, para nosso tutorial estou usando a imagem cypress/base:14.16.0, essa imagem possuem características que a torna a execução mais rápida por não possuir dependências para instalação, bem como é oficial do próprio Cypress deixando a segura. Caso queira escolher outra imagem basta acessar o docker hub.

Com a escolha da imagem devemos dividir os estágios da pipeline, para o tutorial há somente um estágio, sendo esse para teste, na qual terá dois dois jobs que realizaram a tarefa.

O primeiro job tem como nome teste-api, na qual sua responsabilidade é realizar a execução de testes de API com o Cypress, dentro desse job há o script que são os comandos que você quer que o job execute. Nessa etapa deve-se possuir um conhecimento básico de comandos de linha de comando, aqui no exemplo os comandos que ele faz é de node. Um exemplo bem legal sobre essa etapa é se lembrar dos comandos que usou para executar a primeira vez o Cypress na máquina local.

O primeiro comando npm ci --prefer-offline é executado para evitar que o node fique procurando por versões mais recentes tornando assim a execução do job mais rápido.

O segundo comando npm install é usado para instalar todas as dependências que estão no arquivo package.json.

Por fim, o terceiro comando é para execução o teste com o Cypress, esse comando npm run cy:run:api é um atalho criado dentro do package.json , sendo o comando completo dele esse npx cypress run --config-file=cypress/config/api.json --spec \"cypress/integration/api/\*\*\", vale ressaltar por ser uma imagem docker e está não tem interface gráfica, assim é utilizando o comando npm run que executa o cypress em versão sem uma interface gráfica.

Dessa forma foi criado o job para os testes de API. Visualizando no código abaixo, percebe-se que há uma duplicação com uma diferença para qual será a execução dos testes, sendo o segundo para testes end-to-end.

image: cypress/base:14.16.0

stages:
  - test

test-api:
  stage: test
  script:
    - npm ci --prefer-offline
    - npm install
    - npm run cy:run:api

test-e2e:
  stage: test
  script:
    - npm ci --prefer-offline
    - npm install
    - npm run cy:run:e2e

Para esse tutorial foi desenvolvido essa pipeline básica contendo informações iniciais, para se aprimorar na criação de pipelines para o Gitlab basta acessar a documentação que se encontra nas referências desse artigo. Será percebido que para essa pipeline poderia ter sido utilizado formas de evitar duplicação de código, exemplo extends, bem como criação de triggers que pode ser executado em uma determinada data e hora.

Mais informações

Para ver em execução a pipeline basta acessar o repositório do Gitlab desse projeto exemplo e verificar como é visualizado os log da execução dos testes. Qualquer dúvida deixe nos comentários :).

Referências