Prompt para testing em performance de frontend em Performance de Frontend

Prompt gerado automaticamente para Testing em Performance de Frontend em Performance de Frontend

5.0
41 usos
ChatGPT
Usar no ChatGPT
Considerando meu papel como engenheiro(a) de performance frontend em um time ágil, e sabendo que implementamos testes de performance automatizados em nosso pipeline de CI/CD, preciso de uma ferramenta que me ajude a identificar regressões de performance de forma proativa e detalhada.

Gere um script ou uma série de comandos em JavaScript (para Node.js, usando Puppeteer ou Playwright para automação e, opcionalmente, ferramentas como Lighthouse CI ou WebPageTest API para métricas), que faça o seguinte:

1.  **Navegação e Interação:** Acesse uma URL específica (por exemplo, `https://seusite.com.br/pagina-de-produto`), simule a interação de um usuário (por exemplo, adicionar um item ao carrinho, navegar para uma página de checkout).
2.  **Coleta de Métricas:** Durante essa interação, capture métricas de performance relevantes (LCP, FID/INP, CLS, TBT, FCP, DCL, LCP, e métricas de tempo de carregamento como "DOMContentLoaded" e "Load").
3.  **Comparação Histórica:** Compare as métricas coletadas com um baseline previamente estabelecido (por exemplo, um arquivo JSON com as métricas da última execução estável, ou dados de um banco de dados).
4.  **Detecção de Regressão:** Se qualquer métrica exceder um limite de tolerância pré-definido (por exemplo, LCP aumentou mais de 10% ou 200ms), o script deve:
    *   **Gerar um Relatório Detalhado:** Criar um relatório claro e conciso (em formato Markdown ou HTML) que destaque as métricas afetadas, a diferença em relação ao baseline, e um gráfico simples de tendência (se possível, usando uma biblioteca JS como Chart.js para o HTML, ou uma representação textual simples para Markdown).
    *   **Sugestão de Análise:** Incluir uma seção no relatório com sugestões de onde investigar a regressão (por exemplo, "Verifique alterações em bundles JS, imagens, ou requisições de API para esta rota específica").
    *   **Integração com Ferramentas:** Opcionalmente, mostrar como este script poderia ser integrado a um pipeline de CI/CD (por exemplo, como um passo no GitHub

Como Usar este Prompt

1

Clique no botão "Copiar Prompt" para copiar o conteúdo completo.

2

Abra sua ferramenta de IA de preferência (ChatGPT e etc.).

3

Cole o prompt e substitua as variáveis (se houver) com suas informações.

Compartilhe

Gostou deste prompt? Ajude outras pessoas a encontrá-lo!

Outros prompts de Performance de Frontend

Continue explorando prompts nesta categoria.

Melhores práticas de padrões de design em performance de frontend para Performance de Frontend

Prompt gerado automaticamente para Padrões de design em Performance de Frontend em Performance de Frontend

Guia para troubleshooting em performance de frontend em Performance de Frontend

Prompt gerado automaticamente para Troubleshooting em Performance de Frontend em Performance de Frontend

Melhores práticas de ferramentas para performance de frontend para Performance de Frontend

Prompt gerado automaticamente para Ferramentas para Performance de Frontend em Performance de Frontend