Testes entre navegadores: um teste para cada navegador e dispositivo

O que são testes entre navegadores?

A pergunta importa porque uma página web não é uma imagem fixa.Cada navegador desenha o mesmo HTML, CSS e JavaScript com o próprio motor.Cada dispositivo dá à página uma tela diferente para se ajustar.Uma finalização de compra que funciona em um monitor largo no Chrome pode empurrar o botão Pagar para baixo da dobra em um celular pequeno.

O que muda entre navegadores e dispositivos

Um teste que passa em um navegador em uma tela prova pouco sobre os outros.Estas são as diferenças que mais quebram páginas.

Como as equipes costumam fazer testes entre navegadores?

Os testes manuais vêm primeiro.Um testador abre a página em cada navegador e redimensiona a janela.Isso funciona para um lançamento e não acompanha cada build.

As suítes automatizadas vêm em seguida.O formato delas é parecido em todos os frameworks: um teste escrito em código, depois uma configuração que o executa de novo para cada navegador ou dispositivo.

Projects e devices do Playwright

O Playwright agrupa os testes em projects.Um project é um grupo de testes executado com uma configuração, como um navegador ou um dispositivo emulado.O Playwright executa todos os projects por padrão.O registro de dispositivos dele descreve celulares, tablets e desktops, com tamanho de tela, user agent e suporte a toque.

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
    { name: 'Mobile Safari', use: { ...devices['iPhone 12'] } },
  ],
});

Navegadores e viewports do Cypress

O Cypress oferece navegadores da família Chrome, Firefox e WebKit, escolhidos com a flag --browser.O comando cy.viewport dele define o tamanho e a orientação da tela, com predefinições como iphone-6 e ipad-2.A documentação dele observa que a densidade de pixels do dispositivo não é simulada.Ela também sugere executar alguns navegadores com menos frequência, como o Firefox toda noite em vez de a cada commit, para economizar tempo e custo de CI.

Selenium Grid

O Selenium Grid executa scripts WebDriver em máquinas remotas, em paralelo, em várias versões de navegadores e plataformas.É a forma clássica de fazer testes multiplataforma com o Selenium.Sua equipe configura essas máquinas e mantém os navegadores delas atualizados.

Nuvens de dispositivos

Nuvens de dispositivos como BrowserStack, TestMu AI (antigo LambdaTest) e Sauce Labs hospedam os navegadores e dispositivos para você.O BrowserStack e o TestMu AI listam, cada um, milhares de combinações de navegador e sistema operacional.O Sauce Labs oferece emuladores, simuladores e dispositivos reais.Seus testes programados rodam nas máquinas deles, e o BrowserStack Automate conta os planos em testes paralelos.

Para uma visão mais ampla dessas ferramentas, veja o estudo comparativo.

Quanto custa uma suíte programada para vários dispositivos

test('open the checkout', async ({ page, isMobile }) => {
  if (isMobile)
    await page.getByRole('button', { name: 'Menu' }).click();
  await page.getByRole('link', { name: 'Checkout' }).click();
});

Testes entre navegadores a partir de uma gravação

O GUI Test Studio, que automatiza testes de ponta a ponta no Windows, segue outro caminho.Você grava um teste web uma vez, fazendo o fluxo você mesmo no navegador que usa todos os dias.Você marca os navegadores, dispositivos e condições que ele deve cobrir.O GUI Test Runner-Recorder então gera uma versão do teste para cada um, chamada ramificação.

Ao gravar um aplicativo web, marque Gerar também este teste para outros navegadores e dispositivos abaixo do endereço dele.Os navegadores são os instalados no seu computador: Chrome, Edge e Firefox.Os dispositivos são mais de 80 celulares, tablets e tamanhos de tela de desktop, agrupados por fabricante.Cada celular e tablet pode ficar na vertical, na horizontal ou nas duas.

Ampliar

A janela diz quantos testes sua escolha cria, quanto tempo levam para ser gerados e quanto espaço em disco ocupam.Depois que o teste é salvo, as ramificações são geradas em segundo plano.Nada fica fixo no momento da gravação: você pode adicionar navegadores e dispositivos depois.

Nunca gravou?Gravar um teste mostra o caminho inteiro.Você também pode descrever o teste em um prompt e citar os navegadores e dispositivos na mesma frase: veja Criar um teste a partir de um prompt.

O que faz cada versão por navegador e dispositivo

Uma ramificação não é a gravação reproduzida nas mesmas coordenadas.Ela é criada reproduzindo o teste naquele navegador e dispositivo, etapa por etapa, pelos próprios elementos da página.

Cada asserção de uma ramificação é recortada do que aquele dispositivo mostra de verdade, então o layout próprio de um celular nunca é lido como falha, enquanto uma regressão real nesse celular continua sendo.

Quando uma etapa não pode ser feita em um dispositivo, a ramificação diz isso.Ela precisa da sua atenção, e o GUI Test Studio marca a etapa e diz por quê.

Testes responsivos, de localização e de rede lenta

Navegadores e telas são metade do que os usuários trazem.A outra metade é como o navegador deles está configurado.Uma ramificação pode rodar sob condições, e cada condição que você marca é combinada com os navegadores e dispositivos que você escolheu.

Ampliar

Sem janela e lado a lado

Clique em Executar teste em um teste assim, e o GUI Test Runner-Recorder pergunta quais versões esta execução cobre.Todas as ramificações geradas vêm marcadas, e o tempo esperado aparece abaixo da lista.Ele vem de quanto tempo cada uma levou da última vez: um valor típico, não um limite.

Ampliar

No final, uma janela lista o veredito de cada execução, cada um com seu relatório.Veja Executar um teste para a execução em si.

Testes entre navegadores em CI/CD

O gtr-cli, a linha de comando do GUI Test Studio, executa as mesmas ramificações em qualquer pipeline.--branch all executa o teste gravado e cada ramificação, cada um com sua própria entrada no arquivo JUnit e seu próprio histórico.gtr-cli generate cria as ramificações que faltam ou estão desatualizadas.

gtr-cli generate Checkout.GTS --branch missing
gtr-cli run Checkout.GTS --branch all --junit results\junit.xml

Executar testes no seu pipeline lista todas as opções.O exemplo com o TeamCity percorre um pipeline real, etapa por etapa, e funciona do mesmo jeito com qualquer ferramenta de CI/CD.

Um relatório por navegador e dispositivo

No Relatório de confiança, o botão Navegadores e dispositivos lista a gravação e cada ramificação com o último veredito.Ele abre o relatório da que você escolher.

As edições seguem a mesma ideia.Quando você salva uma ramificação depois de mudar o que uma etapa faz, o GUI Test Studio pergunta se a mudança vale para todos os navegadores e dispositivos ou só para este.Quando você muda o teste gravado, ele oferece atualizar todos os navegadores e dispositivos a partir dele.

O que saber antes de começar

Alguns limites, para você escolher de olhos abertos.

Quer o panorama completo do que o GUI Test Studio cobre além do navegador?Veja testes de ponta a ponta.

Perguntas

Selenium, Playwright, Cypress, BrowserStack, TestMu AI, LambdaTest, Sauce Labs, Chrome, Edge, Firefox, Safari e iPhone são marcas registradas de seus respectivos proprietários.