Como configurar o GitHub Actions com o Cypress

O Github Actions é uma ferramenta que podemos utilizar para automatizar fluxos de trabalho rapidamente, possuindo tem suporte às grandes plataformas de cloud, sistemas operacionais e linguagens de desenvolvimento do mercado. Utiliza arquivos no formato YAML, que possui uma sintaxe um pouco simples. Na plataforma já existem alguns templates de fluxo de trabalho que podem ser utilizados, algo que facilita bastante.

Pode ser uma boa opção para rodar uma automação de testes em uma integração contínua. Para demonstrar, no exemplo abaixo criaremos um workflow para execução de testes automatizados com Cypress, uma ferramenta de automação de testes.

Esse é o arquivo de configuração do Github Actions que vamos utilizar:

name: Execução automação de testes

on:
  workflow_dispatch:
    inputs:
      amb:
        description: 'Selecionar algum destes ambientes: dev / hlg / prd'
        required: false
        default: 'hlg'
      browser:
        description: 'Selecionar algum destes browsers: chrome / electron'
        required: false
        default: 'chrome'
      tag:
        description: 'Selecionar alguma tag, por exemplo: @regressivo / @smoke / @login'
        required: false
        default: '@regressivo'
  pull_request:
    branches: [ master, release/develop ]
  schedule:
    - cron: "0 0 * * *"
    
env:
  DEFAULT_AMB: "hlg"
  DEFAULT_BROWSER: "chrome"
  DEFAULT_TAG: "@regressivo"

jobs:
  test:
    name: Cypress run
    runs-on: ubuntu-latest
    container: cypress/browsers:node14.16.0-chrome90-ff88
    steps:
      - uses: actions/checkout@v2
      - name: Cypress run 
        uses: cypress-io/github-action@v2
        with: 
          command: npx cypress run --config-file config/${{github.event.inputs.amb || env.DEFAULT_AMB}}.json --browser ${{github.event.inputs.browser || env.DEFAULT_BROWSER}} --env grepTags=${{github.event.inputs.tag || env.DEFAULT_TAG}}
      - name: Generate Allure Report
        uses: simple-elf/allure-report-action@master
        if: always()
        with:
          allure_results: allure-results
          allure_history: allure-history
          keep_reports: 20
      - name: Deploy report to Github Pages
        if: always()
        uses: peaceiris/actions-gh-pages@v2
        env:
          PERSONAL_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          PUBLISH_BRANCH: gh-pages
          PUBLISH_DIR: allure-history

Esse documento deve ser criado dentro da pasta do projeto no caminho /.github/workflows/node.js.yml.

Explicando cada parte do arquivo, nessa linha é onde temos o nome do workflow:

name: Execução automação de testes

Execução manual

Dentro do ‘on’ é onde habilitamos os triggers, o ‘workflow_dispatch’ permite o acionamento manual do workflow:

on:
  workflow_dispatch:

Dentro do acionamento manual podemos passar parâmetros. Na parte abaixo é mostrado como fazer uma seleção de ambiente, se queremos usar desenvolvimento, homologação ou produção para fazer os testes. No ‘description’ passamos uma descrição, em ‘required’, se é necessário ou não passar esse campo na execução, e em ‘default’ temos um valor que fica como padrão:

inputs:
      amb:
        description: 'Selecionar algum destes ambientes: dev / hlg / prd'
        required: false
        default: 'hlg'

Aqui fazemos uma seleção de browser, temos duas opções configuradas: o chrome e o electron.

browser:
        description: 'Selecionar algum destes browsers: chrome / electron'
        required: false
        default: 'chrome'

Nesta parte, acontece a parametrização de tag, que seleciona quais cenários ou suítes de teste vamos executar:

tag:
    description: 'Selecionar alguma tag, por exemplo: @regressivo / @smoke / @login'
        required: false
        default: '@regressivo'

Dessa maneira, temos parâmetros para executar o fluxo manualmente:

Execução automática

Com o comando abaixo, sempre que for criado um pull request para as branches master e release/develop, vai ser executado o workflow:

pull_request:
    branches: [ master, release/develop ]

Essa configuração faz com que o fluxo de trabalho seja executado todos os dias no mesmo horário, às 00:00 UTC. Para quem utiliza o horário de Brasília(GMT-3), são 3 horas antes do horário passado, ou seja, vai rodar às 21:00:

schedule:
    - cron: "0 0 * * *"

Aqui temos as variáveis que serão utilizadas quando os testes não forem executados manualmente:

env:
  DEFAULT_AMB: "hlg"
  DEFAULT_BROWSER: "chrome"
  DEFAULT_TAG: "@regressivo"

Configuração do projeto

Para a configuração do projeto temos o ‘runs-on’ que seleciona o ambiente que será executado, nesse caso, é a última versão do Ubuntu. O termo ‘container’ seleciona a imagem que será usada:

jobs:
  test:
    name: Cypress run
    runs-on: ubuntu-latest
    container: cypress/browsers:node14.16.0-chrome90-ff88

Aqui temos os passos que serão executados, ‘uses’ se refere para a versão do Github Actions e a versão do Github Actions com Cypress que será usada:

steps:
      - uses: actions/checkout@v2
      - name: Cypress run 
        uses: cypress-io/github-action@v2

Execução Cypress

Esse é o comando que passamos para executar o Cypress:

with: 
          command: npx cypress run --config-file config/${{github.event.inputs.amb || env.DEFAULT_AMB}}.json --browser ${{github.event.inputs.browser || env.DEFAULT_BROWSER}} --env grepTags=${{github.event.inputs.tag || env.DEFAULT_TAG}}

Explicando as partes desse comando:

npx cypress run → comando para executar o Cypress;

–config-file config/${{github.event.inputs.amb || env.DEFAULT_AMB}}.json → comando para selecionar o arquivo de configuração do Cypress;

–browser ${{github.event.inputs.browser || env.DEFAULT_BROWSER}} → comando para selecionar o browser que será utilizado na execução;

–env grepTags=${{github.event.inputs.tag || env.DEFAULT_TAG}} → comando para selecionar a tag.

Precisamos ter criado uma pasta com os arquivos de configuração:

Cada arquivo de configuração depende do ambiente que é executado, aqui temos um exemplo:

{
  "baseUrl" : "http://automationpractice.com/index.php?controller=authentication&back=my-account",
  "env": {
      "activitiesUrl": "http://fakerestapi.azurewebsites.net/api/v1/Activities",
      "allure": true
  },
  "viewportWidth": 1920,
  "viewportHeight": 1080,
  "reporter": "mochawesome",
  "reporterOptions": {
      "reportDir": "cypress/report/mochawesome-report",
      "overwrite": false,
      "html": true,
      "json": true,
      "timestamp": "mmddyyyy_HHMMss"
  }
}

Report

Nesse passo geramos um report com o Github Pages:

- name: Generate Allure Report
        uses: simple-elf/allure-report-action@master
        if: always()
        with:
          allure_results: allure-results
          allure_history: allure-history
          keep_reports: 20
      - name: Deploy report to Github Pages
        if: always()
        uses: peaceiris/actions-gh-pages@v2
        env:
          PERSONAL_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          PUBLISH_BRANCH: gh-pages
          PUBLISH_DIR: allure-history

Para gerar o report precisamos ter acesso aos Settings, dentro de Settings, acessar a parte de Pages e configurar dessa maneira:

Como executar o projeto? Precisamos ir para a parte de Actions, selecionar o Workflow, clicar em ‘Run workflow’, selecionar o ambiente, browser e tag que queremos e clicar em no botão verde, ‘Run workflow’ e a execução vai iniciar.

Após rodar o workflow, vai ser gerado um report que será postado no link que é fornecido na parte de Pages:

Conclusão

Foi necessário utilizar algumas libs para a configuração de report e tags, para ver quais são, procure pelo arquivo package.json no repositório que está em links úteis abaixo. Esse é um exemplo que pode servir de base para a criação do seu projeto, espero que tenha ajudado!

Links úteis

>Repositório com exemplo utilizado utilizado

>Post sobre teste automatizados com Cypress e Cucumber

Referências

>Documentação Github Actions

>Documentação Cypress

>Documentação Allure Report