Playwright Headless Browser: ferramenta de teste rápida e confiável

Índice

Playwright Headless Browser: ferramenta de teste rápida e confiável

Dramaturgo é uma estrutura de automação de teste que simplifica o teste do navegador com uma única API para Chromium, Firefox e WebKit. É rápido, confiável e amplamente adotado, com mais de 1.2 milhão de downloads semanais.

Principais benefícios:

Velocidade: O modo sem cabeça executa testes 2x–15x mais rápido do que os testes tradicionais.
Eficiência: Reduz o uso de CPU e memória.
Suporte para vários navegadores: Funciona perfeitamente com Chromium, Firefox e WebKit.
Integração CI/CD: Integra-se facilmente em pipelines de automação.

Configuração rápida:

Instalar o Playwright: npm init playwright@latest
Configurar para testes sem interface (modo padrão).
Execute testes em vários navegadores com comandos simples.

Característica	Testes tradicionais	Teste sem cabeça
Velocidade	Mais lento	Até 15x mais rápido
Uso de recursos	Alta	Abaixe
Suporte do navegador	Limitado	Cromo, Firefox, WebKit

Com o Playwright, você pode testar conteúdo dinâmico de forma eficiente, lidar com vários navegadores e até mesmo simular dispositivos e condições de rede. Pronto para começar? Vamos mergulhar em como você pode configurá-lo e criar seu primeiro teste.

Dramaturgo Tutorial Curso Completo 2024

Dramaturgo

Introdução ao dramaturgo

Siga estas etapas para configurar o Playwright no modo headless e começar os testes.

Passos da instalação

Antes de começar, certifique-se de que seu sistema atende a estes requisitos:

Node.js: v18, v20 ou v22
Windows: : 10/Servidor 2016 ou mais recente
MacOS: : 13 Ventura ou posterior
Linux: Debian 12, Ubuntu 22.04 ou Ubuntu 24.04 (x86-64/arm64)

Para configurar rapidamente o Playwright, execute:

npm init playwright@latest

Este comando inicializa o Playwright e gera:

Um arquivo de configuração
Exemplo de scripts de teste
Um fluxo de trabalho de ação do GitHub
Um modelo de teste básico

Prefere instalação manual? Use os seguintes comandos:

npm i -D @playwright/test
npx playwright install

Configurando o modo sem cabeça

O Playwright executa testes no modo headless por padrão, mostrando os resultados diretamente no terminal. Para manter tudo atualizado, use:

npm install -D @playwright/test@latest
npx playwright install --with-deps

Configuração de teste multi-navegador

Testar em vários navegadores é simples com o Playwright. Atualize seu playwright.config.ts arquivo como este:

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'] } },
  ],
});

Veja como executar testes:

Todos os navegadores: npx playwright test
Navegador único: npx playwright test --project webkit
Vários navegadores: npx playwright test --project webkit --project firefox

Compatibilidade do navegador para Playwright:

Navegador	Windows	MacOS	Linux
Chromium	✓	✓	✓
Firefox	✓	✓	✓
WebKit	✓	✓	✓

Quando você instala o Playwright, ele baixa automaticamente as versões necessárias do navegador e as armazena localmente. Isso garante ambientes de teste consistentes em diferentes plataformas e máquinas.

Agora que o Playwright está configurado, você está pronto para criar seu primeiro teste.

Construindo seu primeiro teste

Depois de configurar o Playwright, veja como criar e executar seu primeiro teste.

Exemplo de script de teste básico

Comece criando um arquivo chamado first-test.spec.ts e adicione o seguinte código. Em seguida, execute o teste usando o comando npx playwright test first-test.spec.ts:

import { test, expect } from '@playwright/test';

test('basic navigation test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  const title = await page.title();
  await expect(title).toBe('Playwright');
});

Guia de interação de elementos

Veja como você pode interagir com elementos no Playwright:

test('element interactions', async ({ page }) => {
  // Fill out a text field
  await page.getByRole('textbox').fill('[email protected]');

  // Click a button
  await page.getByRole('button', { name: 'Submit' }).click();

  // Check a checkbox
  await page.getByLabel('Remember me').check();

  // Select an option from a dropdown
  await page.getByLabel('Country').selectOption('United States');
});

Aqui estão alguns métodos de localização comuns que você pode usar:

Tipo de localizador	Exemplo	Caso de uso
Tipo	getByRole('botão')	Para elementos acessíveis
O rótulo	getByLabel('Senha')	Para campos de formulário
Texto	getByText('Inscreva-se')	Para texto visível
ID de teste	getByTestId('botão-enviar')	Para atributos personalizados

Métodos de verificação de teste

Para garantir que seus testes sejam confiáveis, use asserções para verificar os resultados:

test('verification examples', async ({ page }) => {
  // Check if an element is visible
  await expect(page.getByRole('heading')).toBeVisible();

  // Verify the text content of an element
  await expect(page.getByTestId('status')).toHaveText('Success');

  // Confirm the URL after navigation
  await expect(page).toHaveURL(/.*dashboard/);

  // Ensure a button is enabled
  await expect(page.getByRole('button')).toBeEnabled();
});

Para depuração, você pode executar o Playwright no modo UI com este comando:

npx playwright test --ui

O Playwright executa cada teste em um contexto de navegador separado, garantindo uma lousa limpa todas as vezes. Esse isolamento evita interferência entre os testes e, com o modo headless, mantém a execução rápida e eficiente.

sbb-itb-23997f1

Recursos avançados de teste

O Playwright se baseia em recursos básicos de teste, oferecendo ferramentas que melhoram a confiabilidade e expandem os cenários de teste.

Testando Conteúdo Dinâmico

O Playwright simplifica os testes de conteúdo dinâmico da web com seus mecanismos de espera integrados e asserções web-first. Ele garante que os elementos estejam prontos para interação, eliminando a necessidade de timeouts manuais, que frequentemente levam a testes não confiáveis. .

Veja como você pode testar conteúdo dinâmico de forma eficaz:

// Wait for API response before proceeding
await page.waitForResponse(response => 
  response.url().includes('/api/data') && 
  response.status() === 200
);

// Wait for dynamic content updates
await page.waitForFunction(() => {
  const element = document.querySelector('.dynamic-content');
  return element && element.textContent.includes('Updated');
});

Para situações com problemas intermitentes de rede, você pode adicionar mecanismos de nova tentativa:

// Retry mechanism for flaky elements
const retryOptions = {
  timeout: 30000,
  intervals: [1000, 2000, 5000]
};

await page.waitForSelector('.loading-content', retryOptions);

A seguir, vamos ver como o Playwright oferece suporte à emulação de dispositivos e à simulação de condições de rede.

Teste de dispositivos e redes

O Playwright inclui um registro de dispositivos integrado para emular vários dispositivos. Este recurso ajuda a testar diferentes tamanhos de tela e configurações de agente do usuário. .

Aqui está um exemplo de emulação de dispositivo:

const iPhone = playwright.devices['iPhone 13'];
const context = await browser.newContext({
  ...iPhone,
  locale: 'en-US',
  geolocation: { longitude: -122.084, latitude: 37.422 },
  permissions: ['geolocation']
});

Para testar as condições da rede, você pode usar manipuladores de rotas:

// Simulate slow network conditions
await page.route('**/*.{jpg,png,jpeg}', route => {
  return new Promise(resolve => {
    setTimeout(() => {
      route.continue();
    }, 5000); // 5-second delay
  });
});

// Mock API responses
await page.route('/api/data', route => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ status: 'success' })
  });
});

Opções de gravação de teste

O Playwright oferece suporte à gravação de artefatos como capturas de tela, vídeos e rastros para ajudar na depuração. Essas opções podem ser configuradas em seu playwright.config.js arquivo:

Tipo de Gravação	Configuração	Melhor caso de uso
Screenshots	`screenshot: 'only-on-failure'`	Capture o estado visual durante falhas de teste
Vídeo	`video: 'retain-on-failure'`	Registre a execução do teste para cenários com falha
Traçar	`trace: 'on-first-retry'`	Gerar logs detalhados para depuração

Veja como habilitar esses recursos:

// playwright.config.js
module.exports = {
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry'
  }
};

"O dramaturgo espera que os elementos sejam acionáveis antes de executar ações... elimina a necessidade de tempos limite artificiais - a principal causa de testes instáveis." - Documentação do dramaturgo

Todos os artefatos registrados são armazenados no test-results diretório, oferecendo informações valiosas para solução de problemas. Os vídeos são salvos automaticamente quando o contexto do navegador é fechado .

Otimização de desempenho de teste

Melhorar o desempenho do teste no Playwright envolve o uso inteligente de execução paralela, gerenciamento eficaz do contexto do navegador e estratégias de repetição bem pensadas. Esses métodos ajudam a garantir que os testes sejam executados de forma eficiente sem comprometer a confiabilidade.

Executando testes em paralelo

O Playwright permite que você execute testes em vários processos de trabalho, o que pode reduzir significativamente o tempo necessário para concluir um conjunto de testes. Você pode configurar a execução paralela em playwright.config.ts:

export default {
  fullyParallel: true,
  workers: 4,
  maxFailures: 5
};

Em um arquivo de teste, você pode habilitar a execução paralela assim:

test.describe.configure({ mode: 'parallel' });

test.describe('User Authentication', () => {
  test('login flow', async ({ page }) => {
    // Test implementation
  });

  test('registration flow', async ({ page }) => {
    // Test implementation
  });
});

Para evitar conflitos de dados entre trabalhadores, use identificadores exclusivos:

const testId = `user_${process.env.TEST_WORKER_INDEX}_${Date.now()}`;
const userEmail = `test_${testId}@example.com`;

Depois que a paralelização estiver configurada, o próximo passo é gerenciar os contextos do navegador de forma eficiente.

Gerenciamento de contexto do navegador

Usar contextos de navegador separados garante ambientes de teste isolados, semelhante ao uso de perfis anônimos. Isso mantém os testes independentes e previne conflitos de estado.

Aqui está um exemplo de criação e uso de um contexto de navegador:

const context = await browser.newContext({
  viewport: { width: 1280, height: 720 },
  userAgent: 'Playwright/1.32.0',
  storageState: './auth.json'
});

await test.step('Verify dashboard', async () => {
  const page = await context.newPage();
  await page.goto('https://app.example.com/dashboard');
  // Test implementation
});

await context.close();

Algumas estratégias comuns de contexto do navegador incluem:

Novo Contexto por Teste: Garante que cada teste tenha seu próprio ambiente isolado.
Contexto de autenticação compartilhada: Reduz etapas repetidas de login reutilizando dados de autenticação.
Teste multiusuário: Simula interações de vários usuários simultaneamente.

Depois de garantir ambientes limpos e isolados, o próximo foco é lidar com falhas transitórias com estratégias de nova tentativa.

Estratégias de repetição de teste

Retries podem ajudar a lidar com testes instáveis causados por problemas de tempo ou instabilidade ambiental. Você pode configurar retries no arquivo de configuração do Playwright:

export default {
  retries: process.env.CI ? 2 : 0,
  expect: {
    timeout: 10000,
    toPass: { intervals: [1000, 2000, 5000] }
  }
};

Para afirmações que podem precisar de várias tentativas, use a pesquisa:

await expect
  .poll(async () => {
    const element = page.locator('.dynamic-content');
    return await element.textContent();
  }, {
    intervals: [1000, 2000, 10000],
    timeout: 60000
  })
  .toBe('Expected Value');

"Embora as novas tentativas melhorem a confiabilidade do teste, o uso excessivo pode esconder problemas como timeouts e condições de corrida. É essencial resolver as causas raiz para testes estáveis, aplicando novas tentativas com sabedoria, com restrições e registrando dados para padrões instáveis." – Cerosh Jacob

Para garantir que a página esteja totalmente carregada antes de executar seus testes:

await page.waitForLoadState('networkidle', { timeout: 5000 });
await page.waitForSelector('.content-ready');

Dramaturgo e Nó latente Integração

Nó latente

Integrar o Playwright com a plataforma low-code da Latenode simplifica os testes da web e a automação do fluxo de trabalho. Esse pareamento permite que as equipes criem testes avançados sem precisar de habilidades profundas de codificação.

O Latenode complementa a funcionalidade do Playwright estendendo a automação para requisitos de fluxo de trabalho mais amplos.

Visão geral do Latenode

Latenode é uma plataforma low-code projetada para integração e automação de fluxo de trabalho, alavancando a tecnologia headless browser. Seu construtor de fluxo de trabalho visual torna mais fácil criar e gerenciar configurações de testes automatizados sem escrever código complexo.

Aqui está um exemplo de como a automação do navegador do Latenode pode ser configurada:

// Example of a Latenode workflow configuration
const workflowConfig = {
  browserAutomation: {
    viewport: { width: 1920, height: 1080 },
    headless: true,
    scenarios: ['login', 'data-extraction', 'form-submission']
  }
};

Vantagens da integração

Combinar o Playwright com o Latenode traz várias vantagens técnicas:

Característica	Beneficiar
Construtor de workflow visual	Simplifica a configuração em comparação aos métodos de codificação tradicionais
Geração de código assistida por IA	Gera automaticamente scripts de teste do Playwright
Integração de banco de dados integrado	Gerencia com eficiência dados e resultados de testes
Suporte para vários navegadores	Executa testes no Chromium, Firefox e WebKit

Essa integração aprimora os fluxos de trabalho de teste e melhora os processos de automação.

Casos de uso de automação

Esta combinação suporta uma variedade de cenários práticos de automação. Por exemplo:

// Example of a multi-browser test workflow
async function crossPlatformTest() {
  const workflow = await latenode.createWorkflow({
    name: 'E2E Testing Suite',
    browser: playwright.chromium,
    integrations: ['slack', 'jira']
  });

  await workflow.addStep({
    type: 'ui-test',
    script: async ({ page }) => {
      await page.goto('https://app.example.com');
      await page.fill('#username', process.env.TEST_USER);
      await page.click('#submit');
    }
  });
}

Para testes em larga escala, o plano Prime da Latenode (US$ 297/mês) suporta até 1.5 milhão de execuções de cenário. Este plano é ideal para equipes que precisam de ferramentas avançadas de colaboração e relatórios detalhados.

Além disso, os recursos de banco de dados integrados do Latenode ajudam as equipes a gerenciar dados e resultados de teste sem infraestrutura extra. Relatórios e análises automatizados facilitam a identificação de tendências e o refinamento eficaz de estratégias de teste.

Conclusão

O Playwright oferece uma gama de recursos avançados e melhorias de desempenho que o tornam uma escolha de destaque para testes automatizados. Aqui está uma rápida recapitulação de suas principais vantagens.

Principais Vantagens

O teste do navegador headless do Playwright aumenta significativamente o desempenho ao pular tarefas de renderização desnecessárias. Os testes mostram que o modo headless pode ser executado 2x a 15x mais rápido do que os testes de navegador tradicionais .

Alguns dos principais benefícios de desempenho incluem:

Execução de teste mais rápida
Consumo reduzido de recursos
Eficiência aprimorada em pipelines de CI/CD

Aspecto de teste	Comparação de desempenho
Velocidade de raspagem da Web	56.21 segundos (sem cabeça) vs. 73.77 segundos (com cabeça)
Uso de recursos	Menor uso de CPU e memória
Suporte do navegador	Chrome (64.16%), Safari (19.62%), Edge (4.87%)

Esses benefícios, combinados com as estratégias de configuração e teste discutidas anteriormente, fazem do Playwright uma ferramenta poderosa para automação escalável e eficiente.

Como começar

O desempenho e a escalabilidade do Playwright o tornam uma excelente escolha para fluxos de trabalho de testes modernos. Como o gerente sênior de produtos da Microsoft, Arjun Attam, explica:

"Testes automatizados de ponta a ponta se tornaram mais importantes do que nunca. As equipes estão enviando mais rápido e criando aplicativos que rodam em um conjunto crescente de dispositivos. Esse aumento na velocidade e nos alvos da web coloca uma pressão imensa no processo de teste, e a automação é crítica."

Para começar a usar o Playwright para testes headless:

Instale o Node.js e o Playwright executando npm init playwright@latest .
Crie seu primeiro arquivo de teste (por exemplo, example.spec.js).
Execute os testes com npx playwright test .

Para uma integração perfeita, conecte o Playwright ao seu pipeline de CI/CD usando ferramentas como Jenkins or Ações do GitHub . Sua API unificada permite testes consistentes no Chrome, Firefox e WebKit sem a necessidade de alterações de código específicas do navegador .

O modo headless do Playwright brilha em ambientes de alto desempenho e pipelines de CI/CD, onde o feedback rápido é crucial . Sua capacidade de lidar com múltiplas instâncias de navegador com eficiência o torna uma ótima escolha para operações de testes em larga escala.