.png)
.svg){kind=icon}
3 de março de 2025
.
10
min ler
Playwright Headless Browser: ferramenta de teste rápida e confiável
Jorge Miloradovitch
Pesquisador, redator e entrevistador de casos de uso
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.
npm init playwright@latest| 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.
Siga estas etapas para configurar o Playwright no modo headless e começar os testes.
Antes de começar, certifique-se de que seu sistema atende a estes requisitos:
Para configurar rapidamente o Playwright, execute:
npm init playwright@latest
Este comando inicializa o Playwright e gera:
Prefere instalação manual? Use os seguintes comandos:
npm i -D @playwright/test
npx playwright install
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
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:
npx playwright testnpx playwright test --project webkitnpx playwright test --project webkit --project firefoxCompatibilidade 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.
Depois de configurar o Playwright, veja como criar e executar seu primeiro teste.
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');
});
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 |
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.
O Playwright se baseia em recursos básicos de teste, oferecendo ferramentas que melhoram a confiabilidade e expandem os cenários de teste.
O Playwright simplifica o teste 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, removendo 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.
O Playwright inclui um registro de dispositivo integrado para emular vários dispositivos. Esse recurso ajuda a testar diferentes tamanhos de tela e configurações de agente de 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' })
});
});
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 insights valiosos para solução de problemas. Os vídeos são salvos automaticamente quando o contexto do navegador fecha.
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.
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.
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:
Depois de garantir ambientes limpos e isolados, o próximo foco é lidar com falhas transitórias com estratégias de nova tentativa.
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');
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.
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']
}
};
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.
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.
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.
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 tradicionais de navegador.
Alguns dos principais benefícios de desempenho incluem:
| 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.
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:
npm init playwright@latest .example.spec.js).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 desempenho intensivo e pipelines de CI/CD, onde o feedback rápido é crucial. Sua capacidade de lidar com várias instâncias de navegador de forma eficiente o torna uma escolha excelente para operações de teste em larga escala.
