Interceptar e modificar solicitações de rede no Puppeteer é uma forma poderosa de gerenciar tarefas de automação web. Isso permite monitorar, bloquear ou ajustar solicitações e respostas HTTP em tempo real. Veja o que você pode fazer:
- Monitorar a atividade de rede: Registre detalhes como URLs, métodos, cabeçalhos e payloads.
- Modificar solicitações: Altere cabeçalhos, redirecione URLs ou ajuste payloads para testes e depuração de APIs.
- Bloquear recursos: Evite o carregamento de imagens, fontes ou scripts para melhorar o desempenho.
- Simular respostas: Crie respostas de servidor simuladas para testes ou altere conteúdo dinamicamente.
- Testar cenários de erro: Simule códigos de status HTTP como 404 ou 500 para testar o tratamento de erros.
Exemplo rápido
await page.setRequestInterception(true);
page.on('request', async (request) => {
if (request.url().includes('/api/test')) {
await request.respond({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ success: true })
});
} else {
await request.continue();
}
});
Este guia explica como usar a API do Puppeteer para interceptação de solicitações, incluindo exemplos práticos de monitoramento, modificação e teste de interações de rede.
Tutorial de Puppeteer nº 12 | Interceptadores HTTP | Interceptar solicitações
Monitoramento de solicitações de rede
O Puppeteer permite monitorar solicitações de rede, oferecendo uma visão clara do tráfego web durante tarefas de automação. Veja como rastrear e analisar a atividade de rede de forma eficaz.
Configurando listeners de solicitações
Comece ativando a interceptação de solicitações e adicionando um listener. Veja um exemplo:
await page.setRequestInterception(true);
page.on('request', async (request) => {
if (request.isInterceptResolutionHandled()) return;
console.log(`Intercepted: ${request.url()}`);
await request.continue();
});
Dentro do listener de evento 'request', você pode acessar e até 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 filtrar solicitações de rede com base no tipo, facilitando o foco em tráfegos específicos. Veja como lidar seletivamente com solicitações:
page.on('request', interceptedRequest => {
if (interceptedRequest.isInterceptResolutionHandled()) return;
const resourceType = interceptedRequest.resourceType();
switch(resourceType) {
case 'image':
// Handle image requests
break;
case 'xhr':
// Handle API calls
break;
default:
interceptedRequest.continue();
}
});
Ao categorizar e priorizar tipos de recursos, você pode simplificar seu monitoramento de rede e se concentrar no que realmente importa.
Registrando dados de solicitações
Depois de filtrar as solicitações, registrar seus principais detalhes pode ajudar você a identificar padrões úteis. Veja uma visão geral rápida de algumas propriedades importantes de solicitações:
| Propriedade da solicitação | Descrição | Método de acesso |
|---|---|---|
| URL | URL completa da solicitação | request.url() |
| Método | Método HTTP (por exemplo, GET, POST) | request.method() |
| Cabeçalhos | Cabeçalhos da solicitação | request.headers() |
| Dados POST | Payload enviado com a solicitação | request.postData() |
Por exemplo, se você quiser monitorar solicitações de API para dados de preços:
page.on('request', async (request) => {
if (request.url().includes('/api/prices')) {
const requestData = {
url: request.url(),
method: request.method(),
postData: request.postData()
};
console.log('Price Request:', requestData);
}
await request.continue();
});
Esse método permite analisar 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 solicitações de saída para atender melhor às suas necessidades ao interagir com servidores web.
Modificações de cabeçalhos
Você pode ajustar cabeçalhos HTTP para incluir tokens, alterar agentes de usuário ou adicionar valores personalizados.
await page.setExtraHTTPHeaders({
'Authorization': 'Bearer YOUR_TOKEN',
'Custom-Header': 'CustomValue'
});
Para ter um controle mais detalhado sobre solicitações individuais:
page.on('request', async (request) => {
if (request.isInterceptResolutionHandled()) return;
const headers = request.headers();
headers['Authorization'] = 'Bearer YOUR_TOKEN';
await request.continue({ headers });
});
"A interceptação de solicitações facilita a modificação de propriedades de solicitações de saída, como definir cabeçalhos personalizados, alterar métodos de solicitação ou ajustar o payload da solicitação." - Saairaamprasad [1]
Agora, vamos ver como redirecionar solicitações alterando URLs.
Redirecionamentos de URL
Redirecione solicitações específicas usando a seguinte abordagem:
await page.setRequestInterception(true);
page.on('request', async (request) => {
if (request.url().includes('/api/original')) {
await request.continue({
url: request.url().replace('/api/original', '/api/new')
});
} else {
await request.continue();
}
});
Esse método ajuda você a alterar endpoints de API ou redirecionar solicitações dinamicamente.
Alterações nos dados da solicitação
Você também pode modificar payloads para solicitações POST e PUT. Veja como:
page.on('request', async (request) => {
if (request.isInterceptResolutionHandled()) return;
if (request.url().includes('/api/prices') && request.method() === 'POST') {
let postData = request.postData();
if (postData) {
postData = postData.replace(/11001/g, '90210');
await request.continue({ postData });
return;
}
}
await request.continue();
});
Veja uma referência rápida para modificar diferentes propriedades de solicitações:
| Propriedade da solicitação | Como modificar | Casos de uso comuns |
|---|---|---|
| Cabeçalhos | continue({ headers }) | Adicionar tokens de autenticação, identificadores personalizados |
| URL | continue({ url }) | Redirecionar endpoints, redirecionar solicitações |
| Dados POST | continue({ postData }) | Atualizar dados de formulário, alterar payloads de API |
Observação: Alterar solicitações pode afetar o desempenho, portanto, o ideal é interceptar apenas quando necessário. Esses métodos oferecem controle preciso sobre as solicitações de saída nos seus fluxos de automação.
Gerenciando respostas do servidor
O Puppeteer permite lidar com e modificar respostas do servidor, tornando-se uma ferramenta poderosa para automação web. Esta seção se baseia nas técnicas anteriores de modificação de solicitações e se concentra no controle das respostas do servidor para oferecer controle total sobre as interações de rede.
Monitoramento de respostas
Você pode acompanhar respostas recebidas do servidor configurando um listener de evento de resposta:
page.on('response', async (response) => {
const url = response.url();
const status = response.status();
console.log(`Response from ${url}: ${status}`);
if (response.url().includes('/api/prices')) {
const data = await response.json();
// Process response data
}
});
Esse trecho registra detalhes como URL, códigos de status e cabeçalhos, ajudando você a analisar o comportamento do servidor. Além do monitoramento, você pode modificar dinamicamente o conteúdo da resposta para atender às suas necessidades.
Modificando o conteúdo da resposta
Para personalizar como as respostas são tratadas, use a interceptação. Veja um exemplo:
page.on('request', async (request) => {
if (request.url().includes('/api/prices')) {
await request.respond({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
price: 99.99,
currency: 'USD',
zipCode: '90210'
})
});
return;
}
await request.continue();
});
Essa técnica é especialmente útil para testar APIs simulando respostas ou ajustando dados em situações específicas.
Testando códigos de status HTTP
Depois de dominar a modificação de conteúdo, você pode simular diversos 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 não encontrado | status: 404, body: 'Not Found' |
| 500 | Erro do servidor | status: 500, body: 'Internal Server Error' |
Por exemplo:
page.on('request', async (request) => {
if (request.url().includes('/api/test-endpoint')) {
await request.respond({
status: 404,
contentType: 'text/plain',
body: 'Not Found!'
});
return;
}
await request.continue();
});
"A interceptação de solicitações no Puppeteer permite observar, modificar ou bloquear solicitações HTTP de saída e respostas recebidas. Esse recurso é útil ao otimizar o carregamento de páginas, simular diversas condições de rede ou lidar com o carregamento de conteúdo dinâmico." – Saairaamprasad [1]
Dica profissional: Embora interceptar respostas possa ser muito útil, use esse recurso com moderação. O uso excessivo da interceptação pode desacelerar seus scripts de automação ou introduzir complexidade desnecessária.
sbb-itb-23997f1
Diretrizes para interceptação de solicitações
A interceptação de solicitações é uma ferramenta poderosa, mas exige uso cuidadoso para garantir bom desempenho e manter a confiabilidade. Abaixo estão etapas práticas para gerenciar sessões, melhorar a velocidade e resolver problemas comuns.
Gerenciando sessões de usuários
Veja como lidar com sessões de usuários de forma eficaz:
await page.setRequestInterception(true);
page.on('request', async (request) => {
if (!request.isInterceptResolutionHandled()) {
const headers = request.headers();
headers['Authorization'] = 'Bearer ' + yourAuthToken;
await request.continue({ headers });
}
});
Sempre verifique o status da interceptação antes de modificar cabeçalhos para evitar conflitos com outros interceptadores.
Otimização de velocidade
Bloquear recursos desnecessários pode reduzir significativamente os tempos de carregamento da página — às vezes em até 500 milissegundos [3]. Veja um exemplo:
await page.route('**/*', (route) => {
const resourceType = route.request().resourceType();
if (['image', 'stylesheet', 'font'].includes(resourceType)) {
route.abort();
return;
}
route.continue();
});
| Tipo de recurso | Ação | Impacto |
|---|---|---|
| Imagens | Bloquear | Acelera o carregamento da página |
| Folhas de estilo | Carregamento seletivo | Economiza largura de banda |
| Analytics | Bloquear | Reduz a sobrecarga de rede |
| Chamadas de API | Permitir | Mantém funcionalidades essenciais |
Quando surgirem problemas de desempenho, essas estratégias de gerenciamento de recursos podem ajudar.
Dicas para solucionar problemas
O tratamento inadequado é uma fonte comum de problemas. Veja algumas correções práticas:
"Depois que a interceptação de solicitações é ativada, todas as solicitações ficarão paradas, a menos que sejam continuadas, respondidas ou abortadas."
- Antoine Vastel, Head de Pesquisa na Castle [4]
- Tratamento de resolução: Use verificações de
isInterceptResolutionHandledpara evitar condições de corrida. - Múltiplos manipuladores: Atribua prioridades ao usar múltiplos manipuladores de interceptação:
await request.continue({
priority: 1,
headers: modifiedHeaders
});
- Solicitações paradas: Garanta que todas as solicitações sejam resolvidas corretamente:
page.on('request', async (request) => {
try {
if (!request.isInterceptResolutionHandled()) {
await request.continue();
}
} catch (error) {
console.error('Request handling error:', error);
await request.abort();
}
});
Mantenha sua lógica de interceptação simples. Regras excessivamente complexas podem deixar tudo mais lento e dificultar a manutenção do código.
Principais conclusões
A interceptação de solicitações do Puppeteer oferece aos desenvolvedores ferramentas poderosas para aprimorar tarefas de automação web. Essas ferramentas permitem:
- Modificação de solicitações: Ajustar cabeçalhos, métodos e payloads para controlar o fluxo de dados com eficiência.
- Tratamento de respostas: Personalizar respostas do servidor para diversas necessidades de teste.
- Gerenciamento de recursos: Melhorar o desempenho tratando seletivamente as solicitações.
Aplicações práticas
A interceptação de solicitações tem se mostrado útil em muitos casos. Por exemplo, em um caso recente de e-commerce, a modificação de solicitações de preço de produtos com base em CEPs demonstrou sua utilidade [2].
Alguns usos comuns incluem:
- Simular respostas de API para testes
- Melhorar a coleta de dados alterando cabeçalhos
- Aumentar a velocidade de carregamento bloqueando recursos desnecessários
- Reforçar a segurança com tokens de autenticação personalizados
Esses exemplos destacam como a interceptação de solicitações pode resolver desafios de desenvolvimento e operação, abrindo caminho para técnicas avançadas de automação.
Usando Puppeteer com a Latenode
A Latenode simplifica a implementação dessas estratégias. Veja um fluxo de exemplo que mostra como o Puppeteer se integra à Latenode:
// Example workflow setup in Latenode
await page.setRequestInterception(true);
page.on('request', async (request) => {
if (request.resourceType() === 'fetch') {
const modifiedHeaders = {
...request.headers(),
'Custom-Header': 'Modified-Value'
};
await request.continue({ headers: modifiedHeaders });
}
});
Este exemplo demonstra como você pode modificar cabeçalhos de solicitações dinamicamente para atender às suas necessidades específicas.
