Vá além dos testes funcionais: como usar dramaturgos para insights de desempenho front-end

Quando pensamos em testes de desempenho, geralmente imaginamos grandes ferramentas com grandes números – Jmeter, Gatling, Locust ou Google Lighthouse – martelando servidores de back -end com usuários virtuais ou analisando pontuações de auditoria estática. Essas ferramentas são ótimas, sem dúvida. Mas aqui está a torção: e se você pudesse avaliar o desempenho do seu aplicativo como um usuário real experimentaria isso?

É aí que o dramaturgo entra-e não, não é mais apenas para testes de ponta a ponta.

O dramaturgo é para testes de desempenho?

Sim, está certo. Você provavelmente já conhece o dramaturgo como a estrutura de automação do navegador liso da Microsoft para testar as UIs. Ele é executado em cromo, firefox e webkit – sem cabeça ou cabeça – e facilita a brisa dos navegadores.

Mas aqui está a parte legal: o dramaturgo também pode atuar como sua janela para o mundo da performance de front-end. Ele executa navegadores reais, executa fluxos de usuário reais e permite medir tempos de carregamento, capacidade de resposta e uso de recursos.

Vamos mergulhar em como você pode transformar dramaturgos em um laboratório de desempenho leve para o seu aplicativo.

Dramaturgo para testes de desempenho?

O desempenho é sobre quão rápido e Quão suave Seu aplicativo sente – não apenas a rapidez com que seu servidor responde. O dramaturgo ajuda você a capturar essa “sensação”, graças a algumas superpotências importantes:

Navegadores reais, experiência real

O dramaturgo não finge. Ele gira instâncias reais do navegador, carrega seu site, executa scripts, busca recursos e interage com a interface do usuário – assim como seus usuários.

Isso significa que você pode:

• Capture o carregamento da página e os horários dos recursos
• Meça como sua interface de usuário é responsiva para cliques e entrada
• Simular más condições de rede ou dispositivo para ver como seu aplicativo funciona na natureza

Cobertura de navegador transversal

Testando apenas o Chrome? Isso não é suficiente. O dramaturgo permite comparar o desempenho em Chromium, Firefox e Webkit, que podem descobrir lentidão ou problemas de renderização específicos do navegador.

Network e Throttling

Deseja saber como o seu aplicativo executa em uma conexão 3G ou em um dispositivo de gama média? Dramaturgo suporta:

• Emulação de rede (por exemplo, lento 3G, offline)
• Trenização da CPU (no cromo) para simular processadores mais lentos

Mesclar testes funcionais + de desempenho

Este é o molho secreto. Você pode estender seus testes funcionais existentes para incluir métricas de desempenho – sem manter um conjunto de testes separado ou aprender uma nova ferramenta.

Antes de ficarmos muito empolgados, vamos esclarecer o dramaturgo não fazer:

Teste de carga em escala – Ele executa um navegador por teste. Você não simulará 1.000 usuários martelando seu servidor.

Métricas de back -end -Sem CPU do lado do servidor, memória ou insights de banco de dados.

Painéis sofisticados – Você precisará rolar seus próprios relatórios ou exportar para ferramentas externas.

Dito isto, o dramaturgo não está tentando substituir o jmeter ou o farol. É uma ferramenta complementar – e brilha quando usada corretamente.

Meça os tempos de carregamento da página

Aqui está uma maneira rápida de calcular quanto tempo leva sua página para carregar completamente:

tsCopyEditimport { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('

  const timing = JSON.parse(await page.evaluate(() => JSON.stringify(window.performance.timing)));
  const loadTime = timing.loadEventEnd - timing.navigationStart;

  console.log(`Page load time: ${loadTime} ms`);
  await browser.close();
})();

Ou use o moderno PerformanceNavigationTiming API:

tsCopyEditconst navTiming = await page.evaluate(() => {
  const [entry] = performance.getEntriesByType('navigation');
  return {
    domContentLoaded: entry.domContentLoadedEventEnd,
    loadEvent: entry.loadEventEnd,
  };
});

Medir os tempos de carregamento do recurso

Rastreie imagens, scripts ou estilos de carregamento lento:

tsCopyEditconst resources = await page.evaluate(() =>
  performance.getEntriesByType('resource').map(r => ({
    name: r.name,
    type: r.initiatorType,
    duration: r.duration,
    size: r.transferSize,
  }))
);

console.table(resources);

Isso ajuda a identificar ativos inchados, arrastando seu UX.

Medir as interações do usuário

Quer saber a rapidez com que a interface do usuário responde depois de clicar em um botão?

tsCopyEditconst start = Date.now();
await page.click('#submitBtn');
await page.waitForSelector('.result');
const duration = Date.now() - start;

console.log(`UI response time: ${duration} ms`);

Ótimo para medir solicitações de Ajax ou transições de spa.

Simular condições do mundo real

Acelendo a rede como se fosse 2010:

tsCopyEditconst context = await browser.newContext();
const client = await context.newCDPSession(page);

await client.send('Network.emulateNetworkConditions', {
  offline: false,
  downloadThroughput: 400 * 1024 / 8,
  uploadThroughput: 400 * 1024 / 8,
  latency: 400,
});

Desacelerar a CPU para o realismo:

tsCopyEditawait client.send('Emulation.setCPUThrottlingRate', { rate: 4 }); // 4x slower

Capturas de tela e rastreamento

Registre o feedback visual durante o teste:

tsCopyEditawait page.screenshot({ path: 'before.png' });
await context.tracing.start({ screenshots: true });
await page.goto('
await context.tracing.stop({ path: 'trace.zip' });

Analise -o com o espectador de rastreamento do dramaturgo.

Conecte -o ao seu pipeline CI/CD

Veja como assar verificações de desempenho em ações do GitHub:

yamlCopyEditjobs:
  performance_test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: node performance-test.js

Você pode até definir limites e falhar se o seu aplicativo começar a desacelerar.

Melhores práticas para testes de desempenho com dramaturgo

• Execute modo sem cabeça Para acelerar os testes
• Rede de aceleração e CPU Para refletir usuários do mundo real
• Medir várias vezes e resultados médios
• Armazene métricas e Monitore as tendências ao longo do tempo
• Integrar -se ao seu Oleoduto CI/CD
• Use com Lighthouse ou K6 para cobertura completa

Conclusão

O dramaturgo não é uma bala de prata – ele não substituirá seus testes de estresse de back -end ou painéis de desempenho. Mas isso faz Dê a você uma maneira poderosa e flexível de medir como os usuários reais experimentam seu aplicativo – e isso é inestimável.

Seja você um engenheiro de controle de qualidade que procura subir de nível seus testes ou um desenvolvedor que se preocupa com o desempenho tanto quanto os recursos, adicionando dramaturgos ao seu kit de ferramentas aproxima -o um passo mais perto de fornecer experiências de usuário rápidas, responsivas e deliciosas.