Configuração da Pipeline do Azure DevOps para testes do Playwright

Nos últimos anos, a automação de testes de front-end tornou-se uma parte essencial no desenvolvimento de aplicações web. Ferramentas como Cypress, Playwright, Robot Framework e Selenium têm se destacado nesse cenário, oferecendo soluções eficientes para a execução de testes end-to-end. Anteriormente, discutimos como configurar uma pipeline de CI/CD no Azure DevOps para executar testes com o Cypress. Neste artigo, vamos explorar como configurar uma pipeline para integrar o Playwright, uma ferramenta desenvolvida pela Microsoft que está ganhando popularidade e vem sendo o foco dos meus estudos recentemente.

Se você já está familiarizado com o Cypress, perceberá que há semelhanças no processo de configuração. No entanto, o Playwright oferece características únicas, como suporte a testes em múltiplos navegadores e ambientes, que podem beneficiar projetos que necessitam de maior flexibilidade e cobertura de testes.

Para rodar os testes será necessário adicionar o seguinte script nomeado como azure-pipelines.yml

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: 'Install Node.js'

- script: npm install
  displayName: 'npm install'

- script: npx playwright install --with-deps
  displayName: 'Install Playwright browsers'

- script: npx playwright test
  displayName: 'Run Playwright tests'
  
- task: PublishTestResults@2
  displayName: 'Publish test results'
  inputs:
    searchFolder: 'test-results'
    testResultsFormat: 'JUnit'
    testResultsFiles: 'e2e-junit-results.xml'
    mergeTestResults: true
    failTaskOnFailedTests: true
    testRunTitle: 'My End-To-End Tests'
  condition: succeededOrFailed()
- task: PublishPipelineArtifact@1
  inputs:
    targetPath: playwright-report
    artifact: playwright-report
    publishLocation: 'pipeline'
  condition: succeededOrFailed()

Desta forma a pipeline está configurada para ser disparada quando houver alterações na branch main. O objetivo é instalar as dependências necessárias, executar testes com o Playwright, publicar os resultados dos testes e armazenar os relatórios como artefatos da pipeline.

Detalhando o script temos:

1. Definição da execução da pipeline quando houver alterações no Branch main.

trigger:
- main

2. Especificação da máquina virtual a ser utilizada como ubuntu-latest (última versão do ubuntu)

pool:
  vmImage: ubuntu-latest

3. Instalação da versão 18 do Node.js na máquina virtual

- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: 'Install Node.js'

4. Instalação das dependências do projeto

- script: npm install
  displayName: 'npm install'

5. Instalação dos navegadores a serem utilizados pelo playwright

- script: npx playwright install --with-deps
  displayName: 'Install Playwright browsers'

6. Execução dos testes

- script: npx playwright test
  displayName: 'Run Playwright tests'

7. Publicação do resultado dos testes para visualização no Azure DevOps

• searchFolder: Diretório onde os arquivos de resultados de teste estão armazenados.
• testResultsFormat: Formato dos resultados dos testes (JUnit).
• testResultsFiles: Arquivo específico que contém os resultados.
• mergeTestResults: Combina resultados de múltiplos arquivos.
• failTaskOnFailedTests: Define a tarefa como falha se algum teste falhar.
• condition: Executa essa tarefa independentemente do sucesso ou falha das etapas anteriores.

OBS.: Para que esta etapa funcione é necessário que os seus testes gerem um relatório no formato JUNIT. Caso ainda não tenha realizado essa configuração clique aqui.

- task: PublishTestResults@2
  displayName: 'Publish test results'
  inputs:
    searchFolder: 'test-results'
    testResultsFormat: 'JUnit'
    testResultsFiles: 'e2e-junit-results.xml'
    mergeTestResults: true
    failTaskOnFailedTests: true
    testRunTitle: 'My End-To-End Tests'
  condition: succeededOrFailed()

8. Publicação de Artefatos da Pipeline

• targetPath: Caminho do diretório que contém o relatório a ser armazenado.
• artifact: Nome do artefato.
• publishLocation: Define onde o artefato será publicado.
• condition: Garante que o artefato seja publicado, mesmo se etapas anteriores falharem.

- task: PublishPipelineArtifact@1
  inputs:
    targetPath: playwright-report
    artifact: playwright-report
    publishLocation: 'pipeline'
  condition: succeededOrFailed()

A partir de agora toda vez que o branch principal (main) for alterado, os testes do Playwright serão automaticamente executados, e um relatório detalhado será publicado no Azure DevOps. Isso permite que você monitore a qualidade do seu sistema de maneira rápida e eficiente, garantindo que alterações no código sejam validadas continuamente e que o sistema mantenha sua integridade.