Teste de interface do usuário

Os testes de interface do usuário personalizados são um recurso opcional que permite criar e executar automaticamente testes na interface do usuário para seus aplicativos.

Visão geral

O AEM fornece um conjunto integrado de quality gates (portais de qualidade) do Cloud Manager para garantir atualizações tranquilas para aplicativos personalizados. Em especial, os portais de teste de TI já promovem a criação e a automação de testes personalizados usando as APIs do AEM.

Os testes de interface do usuário são empacotados em uma imagem do Docker para permitir uma grande variedade de opções de linguagem e estruturas (como Cypress, Selenium, Java e Maven, além de JavaScript). Além disso, um projeto de testes de interface pode ser facilmente gerado usando o Arquétipo de projeto do AEM.

O Adobe incentiva o uso do Cypress, pois oferece recarregamento em tempo real e espera automática, o que ajuda a economizar tempo e melhora a produtividade durante os testes. O Cypress também fornece uma sintaxe simples e intuitiva, facilitando a aprendizagem e o uso, mesmo para aqueles que são novos no teste.

Os testes de interface são executados como parte de uma porta de qualidade específica para cada pipeline do Cloud Manager que contém uma etapa de Teste de interface personalizada nos pipelines de produção ou, opcionalmente, nos pipelines de não produção. Quaisquer testes de interface do usuário, incluindo regressão e novas funcionalidades, permitem que erros sejam detectados e relatados.

Diferentemente dos testes funcionais personalizados, que são testes HTTP escritos em Java, os testes de interface podem ser uma imagem do Docker com testes escritos em qualquer idioma, desde que sigam as convenções definidas na seção Compilação de testes de interface.

Introdução aos testes de interface

Esta seção descreve as etapas necessárias para a configuração dos testes de interface para execução no Cloud Manager.

1. Decida sobre a linguagem de programação que deseja usar.

   • Para o Cypress, use o código de amostra do Repositório de amostras de teste do AEM.

   • Para JavaScript e WDIO, use o código de exemplo que é gerado automaticamente na pasta ui.tests do seu repositório do Cloud Manager.

     OBSERVAÇÃO

     Se o repositório foi criado antes de o Cloud Manager criar automaticamente as pastas ui.tests, você também poderá gerar a versão mais recente usando o Arquétipo de Projetos do AEM.

   • Para Java e WebDriver, use o código de exemplo do repositório de exemplos de teste do AEM.

   • Para outras linguagens de programação, consulte a seção Criação de testes de interface deste documento para configurar o projeto de teste.

2. Garanta que o teste da interface esteja ativado de acordo com a seção Adesão do cliente deste documento.

3. Desenvolver os casos de teste e executar os testes localmente.

4. Confirmar seu código no repositório do Cloud Manager e executar um pipeline do Cloud Manager.

Compilação de testes de interface do usuário

Um projeto Maven gera um contexto de compilação do Docker. Este contexto de construção do Docker descreve como criar uma imagem do Docker que contenha os testes de interface, que o Cloud Manager usa para gerar uma imagem do Docker contendo os testes de interface reais.

Esta seção descreve as etapas necessárias para adicionar um projeto de testes de interface ao seu repositório.

Gerar um contexto de compilação do Docker

Para gerar um contexto de compilação do Docker, você precisa de um módulo Maven que:

• Produza um arquivo que contenha um Dockerfile e qualquer outro arquivo necessário para criar a imagem do Docker em seus testes.
• Marque o arquivo com o classificador ui-test-docker-context.

A maneira mais simples de fazer isso é configurar o Plug-in de compilação do Maven para criar o arquivo de contexto de compilação do Docker e atribuir o classificador correto a ele.

Você pode compilar testes de interface do usuário com diferentes tecnologias e estruturas, mas esta seção presume que o projeto seja apresentado de uma maneira semelhante à descrita a seguir.

├── Dockerfile
├── assembly-ui-test-docker-context.xml
├── pom.xml
├── test-module
│   ├── package.json
│   ├── index.js
│   └── wdio.conf.js
└── wait-for-grid.sh

O arquivo pom.xml controla a compilação Maven. Adicione uma execução ao Plug-in de compilação do Maven semelhante ao mostrado a seguir.

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-assembly-plugin</artifactId>
    <configuration>
        <descriptors>
            <descriptor>${project.basedir}/assembly-ui-test-docker-context.xml</descriptor>
        </descriptors>
        <tarLongFileMode>gnu</tarLongFileMode>
    </configuration>
    <executions>
        <execution>
            <id>make-assembly</id>
            <phase>package</phase>
            <goals>
                <goal>single</goal>
            </goals>
        </execution>
    </executions>
</plugin>

Esta execução instrui o Plug-in de compilação Maven a criar um arquivo com base nas instruções contidas em assembly-ui-test-docker-context.xml, chamado de descritor de compilação no jargão do plug-in. O descritor de compilação lista todos os arquivos que devem fazer parte do arquivamento.

<assembly>
    <id>ui-test-docker-context</id>
    <includeBaseDirectory>false</includeBaseDirectory>
    <formats>
        <format>tar.gz</format>
    </formats>
    <fileSets>
        <fileSet>
            <directory>${basedir}</directory>
            <includes>
                <include>Dockerfile</include>
                <include>wait-for-grid.sh</include>
            </includes>
        </fileSet>
        <fileSet>
            <directory>${basedir}/test-module</directory>
            <excludes>
                <exclude>node/**</exclude>
                <exclude>node_modules/**</exclude>
                <exclude>reports/**</exclude>
            </excludes>
        </fileSet>
    </fileSets>
</assembly>

O descritor de compilação instrui o plug-in a criar um arquivamento do tipo .tar.gz e atribuir o classificador ui-test-docker-context a ele. Além disso, ele lista os arquivos que devem ser incluídos no arquivamento, incluindo os descritos a seguir.

• Um Dockerfile, obrigatório para criar a imagem do Docker
• O script wait-for-grid.sh, cujos objetivos são descritos abaixo
• Os testes reais de interface do usuário, implementados por um projeto Node.js na pasta test-module

O descritor de compilação também exclui alguns arquivos que podem ser gerados durante a execução local dos testes de interface do usuário. Isso garante que um arquivo menor seja gerado, e consequentemente, resulta em compilações mais rápidas.

O arquivamento que contém o contexto de compilação do Docker é selecionado automaticamente pelo Cloud Manager, que criará a imagem do Docker contendo seus testes durante os pipelines de implantação. Eventualmente, o Cloud Manager executará a imagem do Docker para executar os testes de interface do usuário em seu aplicativo.

A compilação deve produzir zero ou um arquivamento. Se produzir zero arquivamento, a etapa de teste será aprovada por padrão. Se a compilação produzir mais de um arquivamento, o arquivamento selecionado será não determinístico.

Adesão do cliente

Para que o Cloud Manager compile e execute seus testes de interface do usuário, é necessário aderir a esse recurso adicionando um arquivo ao repositório.

• O nome do arquivo deve ser testing.properties.
• O conteúdo do arquivo deve ser ui-tests.version=1.
• O arquivo deve estar no submódulo Maven para testes de interface, próximo do arquivo pom.xml do submódulo de testes de interface.
• O arquivo deve estar na raiz do arquivo de compilação tar.gz.

A compilação dos testes de interface do usuário será ignorada se esse arquivo não estiver presente.

Para incluir um arquivo testing.properties no artefato de compilação, adicione a instrução include no arquivo assembly-ui-test-docker-context.xml.

[...]
<includes>
    <include>Dockerfile</include>
    <include>wait-for-grid.sh</include>
    <include>testing.properties</include> <!-- opt-in test module in Cloud Manager -->
</includes>
[...]

Se estiver usando os exemplos fornecidos pela Adobe:

• Para a pasta ui.tests baseada em JavaScript, gerada com base no Arquétipo de projeto do AEM, você pode executar o comando abaixo para adicionar a configuração necessária.

  echo "ui-tests.version=1" > testing.properties
  
  if ! grep -q "testing.properties" "assembly-ui-test-docker-context.xml"; then
    awk -v line='                <include>testing.properties</include>' '/<include>wait-for-grid.sh<\/include>/ { printf "%s\n%s\n", $0, line; next }; 1' assembly-ui-test-docker-context.xml > assembly-ui-test-docker-context.xml.new && mv assembly-ui-test-docker-context.xml.new assembly-ui-test-docker-context.xml
  fi
  

• As amostras de teste Cypress e Java Selenium fornecidas pelo Adobe já têm o sinalizador de aceitação definido.

Gravação de testes da interface do usuário

Esta seção descreve as convenções que a imagem do Docker que contém seus testes de interface do usuário deve seguir. A imagem do Docker é criada a partir do contexto de compilação do Docker descrito na seção anterior.

Variáveis de ambiente

As variáveis de ambiente a seguir serão passadas para a imagem do Docker no tempo de execução, dependendo da sua estrutura.

Os exemplos de teste da Adobe fornecem funções auxiliares para acessar os parâmetros de configuração:

• Cypress: use a função padrão Cypress.env('VARIABLE_NAME')
• JavaScript: consulte o módulo lib/config.js
• Java: consulte a classe Config

Gerar relatórios de teste

A imagem do Docker deve gerar relatórios de teste no formato XML JUnit e salvá-los no caminho especificado pela variável de ambiente REPORTS_PATH. O formato XML JUnit é um formato amplamente usado para relatar os resultados de testes. Se a imagem do Docker usar Java e Maven, os módulos de teste padrão, como o Plug-in Maven Surefire e o Plug-in Maven Failsafe poderão gerar os relatórios imediatamente.

Se a imagem do Docker for implementada com outras linguagens de programação ou executores de teste, verifique a documentação das ferramentas escolhidas para saber como gerar relatórios XML JUnit.

Pré-requisitos

• Os testes no Cloud Manager serão executados usando um usuário administrador técnico.

• A infraestrutura em container com escopo para testes funcionais apresenta os seguintes limites:

Detalhes específicos do Selenium

Aguardar o Selenium estar pronto

Antes de os testes começarem, é responsabilidade da imagem do Docker garantir que o servidor Selenium esteja funcionando. Aguardar o serviço Selenium é um processo de duas etapas.

1. Leia a URL do serviço Selenium na variável de ambiente SELENIUM_BASE_URL.
2. Consulte em intervalos regulares o endpoint de status exposto pela API do Selenium.

Quando o endpoint de status do Selenium responder com uma resposta positiva, os testes poderão ser iniciados.

Os exemplos de teste de interface da Adobe lidam com isso por meio do script wait-for-grid.sh, que é executado na inicialização do Docker e inicia a execução do teste real somente depois que a grade está pronta.

Capturar imagens de tela e vídeos

A imagem Docker pode gerar saídas de teste adicionais (por exemplo, capturas de tela ou vídeos) e salvá-las no caminho especificado pela variável de ambiente REPORTS_PATH. Qualquer arquivo encontrado abaixo de REPORTS_PATH é incluído no arquivo de resultados de teste.

Os exemplos de teste fornecidos pela Adobe criam, por padrão, capturas de tela de qualquer teste com falha.

Você pode usar as funções auxiliares para criar capturas de tela nos testes.

• JavaScript: comando takeScreenshot
• Java: comandos

Se um arquivo de resultados de teste for criado durante a execução de um teste de interface, você poderá baixá-lo do Cloud Manager usando o botão Download Details na etapa Testes de interface personalizados.

Fazer upload de arquivos

Os testes às vezes devem carregar arquivos no aplicativo que está sendo testado. Para manter a implantação do Selenium flexível em relação aos testes, não é possível fazer upload de um ativo diretamente no Selenium. Em vez disso, o upload de um arquivo exige as etapas descritas a seguir.

1. Faça upload do arquivo na URL especificado pela variável de ambiente UPLOAD_URL.
   • O upload deve ser realizado em uma solicitação POST com um formulário multipart.
   • O formulário multipart deve ter um único campo de arquivo.
   • É equivalente a curl -X POST ${UPLOAD_URL} -F "data=@file.txt".
   • Consulte a documentação e as bibliotecas da linguagem de programação usada na imagem do Docker para saber como executar essa solicitação HTTP.
   • Os exemplos de teste da Adobe fornecem funções auxiliares para fazer o upload de arquivos:
     • JavaScript: consulte o comando getFileHandleForUpload.
     • Java: consulte a classe FileHandler.
2. Se o upload for bem-sucedido, a solicitação retornará uma resposta 200 OK do tipo text/plain.
   • O conteúdo da resposta é um identificador de arquivo opaco.
   • Você pode usar esse identificador no lugar de um caminho de arquivo em um elemento <input> para testar os uploads de arquivo em seu aplicativo.

Execução de testes de interface locais

Antes de ativar os testes de interface em um pipeline do Cloud Manager, é recomendável executá-los localmente
no SDK do AEM as a Cloud Service
ou em uma instância real do AEM as a Cloud Service.

Amostra de teste do Cypress

1. Abra um shell e navegue até a pasta ui.tests/test-module no repositório

2. Instalar o Cypress e outros pré-requisitos

   npm install
   

3. Definir as variáveis de ambiente necessárias para a execução do teste

   export AEM_AUTHOR_URL=https://author-<program-id>-<environment-id>.adobeaemcloud.com
   export AEM_AUTHOR_USERNAME=<user>
   export AEM_AUTHOR_PASSWORD=<password>
   export AEM_PUBLISH_URL=https://publish-<program-id>-<environment-id>.adobeaemcloud.com
   export AEM_PUBLISH_USERNAME=<user>
   export AEM_PUBLISH_PASSWORD=<password>
   export REPORTS_PATH=target/
   

4. Executar testes com um dos comandos a seguir

   npm test              # Using default Cypress browser
   npm run test-chrome   # Using Google Chrome browser
   npm run test-firefox  # Using Firefox browser
   

Amostra de teste do JavaScript WebdriverIO

1. Abra um shell e navegue até a pasta ui.tests no repositório

2. Execute o comando abaixo para iniciar os testes usando o Maven

   mvn verify -Pui-tests-local-execution \
    -DAEM_AUTHOR_URL=https://author-<program-id>-<environment-id>.adobeaemcloud.com \
    -DAEM_AUTHOR_USERNAME=<user> \
    -DAEM_AUTHOR_PASSWORD=<password> \
    -DAEM_PUBLISH_URL=https://publish-<program-id>-<environment-id>.adobeaemcloud.com \
    -DAEM_PUBLISH_USERNAME=<user> \
    -DAEM_PUBLISH_PASSWORD=<password>
   

Amostra de teste do driver da Web Java Selenium

1. Abra um shell e navegue até a pasta ui.tests/test-module no repositório

2. Execute os comandos abaixo para iniciar os testes usando o Maven

   # Start selenium docker image (for x64 CPUs)
   docker run --platform linux/amd64 -d -p 4444:4444 selenium/standalone-chrome-debug:latest
   
   # Start selenium docker image (for ARM CPUs)
   docker run -d -p 4444:4444 seleniarm/standalone-chromium
   
   # Run the tests using the previously started Selenium instance
   mvn verify -Pui-tests-local-execution -DSELENIUM_BASE_URL=http://<server>:4444
   

Recursos do Business.Adobe.com