Cypress: Como configurar uma pipeline no bitbucket?

Quinta-feira. 17 de Janeiro de 2025

Nesse post, vou explicar de maneira simples como podemos configurar uma pipeline manual no Cypress. Para esse exemplo, precisamos considerar dois pontos importantes:

Vou usar um exemplo real de criação de uma pipeline para um projeto hospedado no Bitbucket.

O Cypress precisa estar instalado no repositório do Bitbucket e, ao menos, deve haver uma spec de teste configurada.

>_Pipelines no Bitbucket

Vamos começar criando um arquivo chamado bitbucket-pipelines.yml.

Dica: Normalmente, eu não faço o push desse arquivo diretamente para a branch master. Neste projeto, tenho alguns testes (como os de autenticação) que não estão preparados para rodar de forma headless (sem interface gráfica). Então, eu crio uma branch separada, normalmente uma release, e faço o push do arquivo da pipeline nessa branch, com as specs que sei que funcionarão sem problemas.

O arquivo de pipeline para esse projeto é um pouco customizado, e a configuração fica assim:

            
                image: cypress/browsers:22.12.0

                    pipelines:
                    custom:
                        manual-run:
                        - step:
                            name: Install Dependencies
                            caches:
                                - node
                            script:
                                - npm install
                        - step:
                            name: Execute test
                            script:
                                - npm ci
                                - node runner.js || true  # (não obrigatório)
                            caches:
                                - node
                            artifacts:
                                - cypress/videos/**
            
        

image: Especifica a imagem Docker que será usada no repositório onde a pipeline será executada.

pipelines: Aqui, estou criando uma pipeline personalizada, com a tag custom.

custom: Define que essa será uma pipeline personalizada, que você pode controlar como e quando executar.

manual-run: Este é o nome da pipeline personalizada. O termo "manual" indica que a execução será feita manualmente, ou seja, quando eu quiser rodar a pipeline, vou no Bitbucket, seleciono a branch e então executo.

step 1: O primeiro passo é instalar as dependências necessárias para o projeto. Ele usa o cache do Node.js para otimizar o processo e roda o comando npm install.

step 2: O segundo passo é a execução dos testes. Primeiro, o comando npm ci instala as dependências conforme o package-lock.json. Depois, temos o comando node runner.js || true, que é uma implementação minha porque o repositório está integrado com o relatório Tesults. Esse comando envia automaticamente os resultados dos testes para o Tesults. Mas, esse comando não é obrigatório, foi apenas para exemplificar que podemos acionar outros comandos durante a pipeline.

artifacts: No final, especifico que os vídeos gerados pelo Cypress durante a execução dos testes devem ser salvos na pasta cypress/videos/, para que você possa visualizar o que aconteceu em cada teste executado.

Por fim, depois de configurar tudo isso, basta subir o arquivo na branch da sua escolha no repo do bitbucket. Após fazer o push, você pode acessar o seu repositório no Bitbucket e seguir este caminho: Pipelines (no menu lateral a esquerda) > Run pipeline > Branch (selecione a branch onde você colocou o arquivo da pipeline) > Pipeline (escolha a pipeline manual) > Run. E pronto, a execução dos testes será iniciada.

Você pode encontrar mais detalhes sobre as pipelinas no Cypress nessa doc aqui!

Obrigadaa por ter acompanhado, até a próxima! ☺️