Adicione testes end-to-end Cypress ao seu aplicativo Amplify

Você pode executar testes end-to-end (E2E) na fase de teste do seu aplicativo Amplify para capturar regressões antes de enviar o código para produção. A fase de teste pode ser configurada na especificação de compilação YAML. Atualmente, é possível executar apenas a estrutura de teste do Cypress durante uma compilação.

Tutorial: Configurar end-to-end testes com o Cypress

O Cypress é uma estrutura de teste JavaScript baseada que permite executar testes E2E em um navegador. Para ver um tutorial que demonstra como configurar testes E2E, consulte a postagem do blog Executando testes end-to-end Cypress para sua implantação completa de CI/CD com o Amplify.

Adicione testes ao seu aplicativo Amplify existente

É possível adicionar testes Cypress a um aplicativo existente atualizando as configurações da compilação do aplicativo no console do Amplify. O YAML de especificação de compilação contém uma coleção de comandos de compilação e configurações relacionadas que o Amplify usa para executar a compilação. Use a etapa test para executar qualquer comando de teste no momento da compilação. Para testes E2E, o Amplify Hosting oferece uma integração mais profunda com o Cypress, que permite gerar um relatório de interface do usuário para seus testes.

A lista a seguir descreve as configurações do teste e como elas são usadas.

pré-teste

Instale as dependências necessárias para executar os testes do Cypress. O Amplify Hosting usa o mochawesome para gerar um relatório para visualizar os resultados do teste e aguardar a configuração do servidor localhost durante a compilação.

teste

Execute comandos cypress para realizar testes usando mochawesome.

pós-teste

O relatório mochawesome é gerado a partir do JSON de saída. Observe que, se você estiver usando o Yarn, deverá executar esse comando no modo silencioso para gerar o relatório mochawesome. Para Yarn, é possível usar o seguinte comando:

yarn run --silent mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json
                  

artifacts>baseDirectory

O diretório a partir do qual os testes são executados.

artefatos> configFilePath

Os dados do relatório de teste gerados.

artifacts>files

Os artefatos gerados (capturas de tela e vídeos) estão disponíveis para download.

O exemplo a seguir, trecho de um arquivo amplify.yml de especificação de compilação mostra como adicionar testes Cypress ao seu aplicativo.

test:
  phases:
    preTest:
      commands:
        - npm ci
        - npm install -g pm2
        - npm install -g wait-on
        - npm install mocha mochawesome mochawesome-merge mochawesome-report-generator
        - pm2 start npm -- start
        - wait-on http://localhost:3000
    test:
      commands:
        - 'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"'
    postTest:
      commands:
        - npx mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json
        - pm2 kill
  artifacts:
    baseDirectory: cypress
    configFilePath: '**/mochawesome.json'
    files:
      - '**/*.png'
      - '**/*.mp4'

Desabilitar testes

Depois que a configuração de teste for adicionada às suas configurações da compilação amplify.yml, a etapa test será executada em cada compilação, em cada ramificação. Se você quiser desabilitar globalmente a execução de testes ou executar testes apenas para ramificações específicas, é possível usar a variável de ambiente USER_DISABLE_TESTS sem modificar suas configurações da compilação.

Para desativar globalmente os testes para todas as ramificações, adicione a variável de USER_DISABLE_TESTS ambiente com um valor de true para todas as ramificações. A captura de tela a seguir mostra a seção Variáveis de ambiente no console do Amplify com os testes desativados para todas as ramificações.

Para desativar os testes para uma ramificação específica, adicione a variável de USER_DISABLE_TESTS ambiente com um valor de false para todas as ramificações e, em seguida, adicione uma substituição para cada ramificação que você deseja desativar com um valor de true. Na captura de tela a seguir, os testes são desativados na ramificação principal e habilitados para todas as outras ramificações.

A desativação dos testes com essa variável fará com que a etapa de teste seja totalmente ignorada durante uma compilação. Para reativar os testes, defina esse valor como ou exclua a variável de ambiente false.