Interceptando e modificando solicitações de rede no Puppeteer: um guia prático
Aprenda como interceptar e modificar requisições de rede no Puppeteer para automação web eficiente, testes e otimização de desempenho.
Interceptando e modificando solicitações de rede em Marionetista é uma maneira poderosa de gerenciar tarefas de automação da web. Ele permite que você monitore, bloqueie ou ajuste solicitações e respostas HTTP em tempo real. Aqui está o que você pode fazer:
- Monitore a atividade da rede: Detalhes do log como URLs, métodos, cabeçalhos e cargas úteis.
- Modificar solicitações: Altere cabeçalhos, redirecione URLs ou ajuste cargas úteis para testes e depuração de API.
- Recursos de bloco: Impedir o carregamento de imagens, fontes ou scripts para melhorar o desempenho.
- Simular Respostas: Simule respostas do servidor para testar ou alterar conteúdo dinamicamente.
- Cenários de erro de teste: Simule códigos de status HTTP como 404 ou 500 para testar o tratamento de erros.
Exemplo Rápido
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
<span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/test'</span>)) {
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">respond</span>({
<span class="hljs-attr">status</span>: <span class="hljs-number">200</span>,
<span class="hljs-attr">contentType</span>: <span class="hljs-string">'application/json'</span>,
<span class="hljs-attr">body</span>: <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>({ <span class="hljs-attr">success</span>: <span class="hljs-literal">true</span> })
});
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
}
});
Este guia explica como usar a API do Puppeteer para interceptação de solicitações, incluindo exemplos práticos para monitorar, modificar e testar interações de rede.
Marionetista Tutorial #12 | Interceptadores HTTP | Solicitações de interceptação
Monitoramento de solicitações de rede
O Puppeteer torna possível monitorar solicitações de rede, dando a você uma visão clara do tráfego da web durante tarefas de automação. Veja como você pode rastrear e analisar a atividade de rede de forma eficaz.
Configurando ouvintes de solicitação
Comece habilitando a interceptação de requisição e anexando um listener. Aqui está um exemplo:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
<span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) <span class="hljs-keyword">return</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`Intercepted: <span class="hljs-subst">${request.url()}</span>`</span>);
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});
No interior do 'request' ouvinte de eventos, você pode acessar e até mesmo modificar solicitações interceptadas. Apenas certifique-se de chamar request.continue() para que a solicitação original não seja bloqueada.
Filtrando solicitações por tipo
O Puppeteer permite que você filtre solicitações de rede com base no tipo delas, facilitando o foco em tráfego específico. Veja como você pode lidar com solicitações seletivamente:
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function"><span class="hljs-params">interceptedRequest</span> =></span> {
<span class="hljs-keyword">if</span> (interceptedRequest.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) <span class="hljs-keyword">return</span>;
<span class="hljs-keyword">const</span> resourceType = interceptedRequest.<span class="hljs-title function_">resourceType</span>();
<span class="hljs-keyword">switch</span>(resourceType) {
<span class="hljs-keyword">case</span> <span class="hljs-string">'image'</span>:
<span class="hljs-comment">// Handle image requests</span>
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'xhr'</span>:
<span class="hljs-comment">// Handle API calls</span>
<span class="hljs-keyword">break</span>;
<span class="hljs-attr">default</span>:
interceptedRequest.<span class="hljs-title function_">continue</span>();
}
});
Ao categorizar e priorizar os tipos de recursos, você pode otimizar seus esforços de monitoramento de rede e se concentrar no que é mais importante.
Registrando dados de solicitação
Depois de filtrar as solicitações, registrar seus detalhes principais pode ajudar a descobrir padrões úteis. Aqui está uma rápida visão geral de algumas propriedades importantes da solicitação:
| Solicitar Propriedade | Descrição | Método de Acesso |
|---|---|---|
| URL | URL de solicitação completa | solicitação.url() |
| Forma | Método HTTP (por exemplo, GET, POST) | método de solicitação() |
| Cabeçalhos | Solicitar cabeçalhos | solicitação.cabeçalhos() |
| Dados de postagem | Carga útil enviada com a solicitação | solicitação.postData() |
Por exemplo, se você quiser monitorar solicitações de API para dados de preços:
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
<span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/prices'</span>)) {
<span class="hljs-keyword">const</span> requestData = {
<span class="hljs-attr">url</span>: request.<span class="hljs-title function_">url</span>(),
<span class="hljs-attr">method</span>: request.<span class="hljs-title function_">method</span>(),
<span class="hljs-attr">postData</span>: request.<span class="hljs-title function_">postData</span>()
};
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Price Request:'</span>, requestData);
}
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});
Este método permite que você analise o tráfego em detalhes. Sempre verifique request.isInterceptResolutionHandled() para evitar conflitos com outros manipuladores.
Alterando solicitações de saída
Com o Puppeteer, você pode ajustar as solicitações de saída para melhor atender às suas necessidades ao interagir com servidores web.
Modificações de cabeçalho
Você pode ajustar cabeçalhos HTTP para incluir tokens, alterar agentes de usuário ou adicionar valores personalizados.
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setExtraHTTPHeaders</span>({
<span class="hljs-string">'Authorization'</span>: <span class="hljs-string">'Bearer YOUR_TOKEN'</span>,
<span class="hljs-string">'Custom-Header'</span>: <span class="hljs-string">'CustomValue'</span>
});
Para um controle mais granular sobre solicitações individuais:
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
<span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) <span class="hljs-keyword">return</span>;
<span class="hljs-keyword">const</span> headers = request.<span class="hljs-title function_">headers</span>();
headers[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Bearer YOUR_TOKEN'</span>;
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({ headers });
});
"A interceptação de solicitações facilita a modificação das propriedades das solicitações de saída, como definir cabeçalhos personalizados, alterar métodos de solicitação ou ajustar a carga útil da solicitação." - Saairaamprasad
Em seguida, vamos analisar o redirecionamento de solicitações por meio do redirecionamento de URLs.
Redirecionamentos de URL
Redirecione solicitações específicas usando a seguinte abordagem:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
<span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/original'</span>)) {
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({
<span class="hljs-attr">url</span>: request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">replace</span>(<span class="hljs-string">'/api/original'</span>, <span class="hljs-string">'/api/new'</span>)
});
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
}
});
Este método ajuda você a alterar endpoints de API ou redirecionar solicitações dinamicamente.
Solicitar alterações de dados
Você também pode modificar payloads para requisições POST e PUT. Veja como:
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
<span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) <span class="hljs-keyword">return</span>;
<span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/prices'</span>) && request.<span class="hljs-title function_">method</span>() === <span class="hljs-string">'POST'</span>) {
<span class="hljs-keyword">let</span> postData = request.<span class="hljs-title function_">postData</span>();
<span class="hljs-keyword">if</span> (postData) {
postData = postData.<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/11001/g</span>, <span class="hljs-string">'90210'</span>);
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({ postData });
<span class="hljs-keyword">return</span>;
}
}
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});
Aqui está uma referência rápida para modificar diferentes propriedades de solicitação:
| Solicitar Propriedade | Como Modificar | Casos de uso comuns |
|---|---|---|
| Cabeçalhos | continue({ cabeçalhos }) | Adicionar tokens de autenticação, identificadores personalizados |
| URL | continue({ url }) | Redirecionando endpoints, redirecionando solicitações |
| Dados de postagem | continue({ postData }) | Atualizando dados de formulário, alterando payloads de API |
Nota: Alterar solicitações pode afetar o desempenho, então é melhor interceptar somente quando necessário. Esses métodos fornecem a você controle preciso sobre solicitações de saída em seus fluxos de trabalho de automação.
Gerenciando respostas do servidor
O Puppeteer permite que você manipule e modifique respostas do servidor, tornando-o uma ferramenta poderosa para automação da web. Esta seção se baseia em técnicas anteriores para modificação de requisição e foca no controle de respostas do servidor para dar a você controle total sobre interações de rede.
Monitoramento de Resposta
Você pode rastrear as respostas recebidas do servidor configurando um ouvinte de eventos de resposta:
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'response'</span>, <span class="hljs-title function_">async</span> (response) => {
<span class="hljs-keyword">const</span> url = response.<span class="hljs-title function_">url</span>();
<span class="hljs-keyword">const</span> status = response.<span class="hljs-title function_">status</span>();
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`Response from <span class="hljs-subst">${url}</span>: <span class="hljs-subst">${status}</span>`</span>);
<span class="hljs-keyword">if</span> (response.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/prices'</span>)) {
<span class="hljs-keyword">const</span> data = <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">json</span>();
<span class="hljs-comment">// Process response data</span>
}
});
Este snippet registra detalhes como URL, códigos de status e cabeçalhos, ajudando você a analisar como o servidor se comporta. Além do monitoramento, você pode modificar o conteúdo da resposta dinamicamente para atender às suas necessidades.
Modificando o conteúdo da resposta
Para personalizar como as respostas são manipuladas, use interceptação. Aqui está um exemplo:
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
<span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/prices'</span>)) {
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">respond</span>({
<span class="hljs-attr">status</span>: <span class="hljs-number">200</span>,
<span class="hljs-attr">contentType</span>: <span class="hljs-string">'application/json'</span>,
<span class="hljs-attr">body</span>: <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>({
<span class="hljs-attr">price</span>: <span class="hljs-number">99.99</span>,
<span class="hljs-attr">currency</span>: <span class="hljs-string">'USD'</span>,
<span class="hljs-attr">zipCode</span>: <span class="hljs-string">'90210'</span>
})
});
<span class="hljs-keyword">return</span>;
}
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});
Essa técnica é particularmente útil para testar APIs simulando respostas ou ajustando dados em cenários específicos.
Testando códigos de status HTTP
Depois de dominar a modificação de conteúdo, você pode simular vários códigos de status HTTP para testar o tratamento de erros. Veja como:
| Código de status | Caso de uso | Exemplo de Implementação |
|---|---|---|
| 200 | Resposta de sucesso | status: 200, body: JSON.stringify(successData) |
| 404 | Recurso ausente | status: 404, corpo: 'Não encontrado' |
| 500 | Erro de servidor | status: 500, corpo: 'Erro interno do servidor' |
Por exemplo:
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
<span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/test-endpoint'</span>)) {
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">respond</span>({
<span class="hljs-attr">status</span>: <span class="hljs-number">404</span>,
<span class="hljs-attr">contentType</span>: <span class="hljs-string">'text/plain'</span>,
<span class="hljs-attr">body</span>: <span class="hljs-string">'Not Found!'</span>
});
<span class="hljs-keyword">return</span>;
}
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});
"A interceptação de requisições no Puppeteer permite que você observe, modifique ou bloqueie requisições HTTP de saída e respostas de entrada. Esse recurso é útil ao otimizar o carregamento de páginas, simular várias condições de rede ou lidar com o carregamento de conteúdo dinâmico." – Saairaamprasad
Pro Dica: Embora interceptar respostas possa ser poderoso, use-o com moderação. O uso excessivo de interceptação pode tornar seus scripts de automação mais lentos ou introduzir complexidade desnecessária.
sbb-itb-23997f1
Diretrizes de solicitação de interceptação
A interceptação de requisição é uma ferramenta poderosa, mas requer uso cuidadoso para garantir um desempenho suave e manter a confiabilidade. Abaixo estão as etapas práticas para gerenciar sessões, melhorar a velocidade e resolver problemas comuns.
Gerenciando sessões de usuário
Veja como você pode lidar com sessões de usuários de forma eficaz:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
<span class="hljs-keyword">if</span> (!request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) {
<span class="hljs-keyword">const</span> headers = request.<span class="hljs-title function_">headers</span>();
headers[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Bearer '</span> + yourAuthToken;
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({ headers });
}
});
Sempre verifique o status da interceptação antes de modificar os cabeçalhos para evitar conflitos com outros interceptadores.
Otimização de velocidade
O bloqueio de recursos desnecessários pode reduzir significativamente o tempo de carregamento da página - às vezes em até 500 milissegundos . Aqui está um exemplo:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">route</span>(<span class="hljs-string">'**/*'</span>, <span class="hljs-function">(<span class="hljs-params">route</span>) =></span> {
<span class="hljs-keyword">const</span> resourceType = route.<span class="hljs-title function_">request</span>().<span class="hljs-title function_">resourceType</span>();
<span class="hljs-keyword">if</span> ([<span class="hljs-string">'image'</span>, <span class="hljs-string">'stylesheet'</span>, <span class="hljs-string">'font'</span>].<span class="hljs-title function_">includes</span>(resourceType)) {
route.<span class="hljs-title function_">abort</span>();
<span class="hljs-keyword">return</span>;
}
route.<span class="hljs-title function_">continue</span>();
});
| Tipo de recurso | Ação | Impacto |
|---|---|---|
| Imagens | Bloquear | Acelera o carregamento da página |
| Folhas de estilo | Carregamento seletivo | Economiza largura de banda |
| Análises estatísticas | Bloquear | Reduz a sobrecarga da rede |
| Chamadas API | Permitir | Mantém a funcionalidade essencial |
Quando ocorrem problemas de desempenho, essas estratégias de gerenciamento de recursos podem ajudar.
Dicas de solução de problemas
O manuseio impróprio é uma fonte comum de problemas. Aqui estão algumas correções práticas:
"Quando a interceptação de solicitações é habilitada, todas as solicitações serão interrompidas, a menos que sejam continuadas, respondidas ou abortadas."
- Antoine Vastel, Chefe de Pesquisa da Castelo
- Tratamento de resolução: Usar
isInterceptResolutionHandledverificações para evitar condições de corrida. - Vários manipuladores: Atribuir prioridades ao usar vários manipuladores de interceptação:
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({
<span class="hljs-attr">priority</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">headers</span>: modifiedHeaders
});
- Solicitações paralisadas: Garantir que todas as solicitações sejam resolvidas adequadamente:
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">if</span> (!request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) {
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
}
} <span class="hljs-keyword">catch</span> (error) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Request handling error:'</span>, error);
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">abort</span>();
}
});
Mantenha sua lógica de interceptação direta. Regras muito complicadas podem deixar as coisas mais lentas e tornar seu código mais difícil de manter.
Principais lições
A interceptação de requisição do Puppeteer fornece aos desenvolvedores ferramentas poderosas para refinar tarefas de automação da web. Essas ferramentas permitem:
- Solicitar modificação: Ajuste cabeçalhos, métodos e cargas úteis para controlar o fluxo de dados de forma eficaz.
- Tratamento de respostas: Personalize as respostas do servidor para diversas necessidades de teste.
- Gestão de Recursos: Melhore o desempenho ao lidar com solicitações seletivamente.
Aplicações Práticas
A interceptação de solicitações tem se mostrado útil em diversos cenários. Por exemplo, em um caso recente de comércio eletrônico, a modificação de solicitações de preços de produtos com base em CEPs demonstrou sua utilidade. .
Alguns usos comuns incluem:
- Respostas de API simuladas para teste
- Melhorando a coleta de dados modificando cabeçalhos
- Aumentando a velocidade de carregamento bloqueando recursos desnecessários
- Fortalecendo a segurança com tokens de autenticação personalizados
Esses exemplos destacam como a interceptação de solicitações pode abordar desafios de desenvolvimento e operacionais, abrindo caminho para técnicas avançadas de automação.
Usando o Puppeteer com Nó latente
O Latenode simplifica a implementação dessas estratégias. Aqui está um exemplo de fluxo de trabalho para mostrar como o Puppeteer se integra ao Latenode:
<span class="hljs-comment">// Example workflow setup in Latenode</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
<span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'fetch'</span>) {
<span class="hljs-keyword">const</span> modifiedHeaders = {
...request.<span class="hljs-title function_">headers</span>(),
<span class="hljs-string">'Custom-Header'</span>: <span class="hljs-string">'Modified-Value'</span>
};
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({ <span class="hljs-attr">headers</span>: modifiedHeaders });
}
});
Este exemplo demonstra como você pode modificar cabeçalhos de solicitação dinamicamente para atender às suas necessidades específicas.
Artigos Relacionados
- Instalando e configurando o Puppeteer: resolvendo problemas comuns de dependência e Chromium
- Análise e processamento de resposta de rede no Puppeteer: monitoramento e modificação
- Gerenciamento de agente de usuário no Puppeteer para emulação de dispositivo
- Gerenciamento de cache no Puppeteer: desabilitação, limpeza e otimização de desempenho
