Interception réseau avec Playwright

L'interception réseau de Playwright est une fonctionnalité très utile dans les scénarios de tests automatisés et de scraping web, permettant d'intercepter, de modifier et de simuler des requêtes et des réponses réseau.

Playwright fournitpage.route()etpage.on('request') / page.on('response')et d'autres API, qui peuvent :

• Intercepter les requêtes: décider s'il faut autoriser, modifier l'URL/les en-têtes/le corps, ou renvoyer directement des réponses simulées.
• Surveiller les requêtes/réponses: afficher l'URL de la requête, la méthode, les en-têtes, le code d'état de la réponse, le corps de la réponse, etc.
• Simuler des erreurs réseau: bloquer des requêtes, renvoyer des codes d'erreur, tester la logique de tolérance aux pannes de l'application.

Cas d'utilisation courants :

• API simulée: exécuter des tests d'interface utilisateur front-end sans API back-end.
• Modifier les requêtes: par exemple, ajouter un token, tester des en-têtes anormaux.
• Débogage des performances: compter les requêtes, le temps de réponse.
• Injection d'erreurs: simuler des erreurs serveur telles que 500/404.

Intercepter les requêtes :page.route()

await page.route('**/api/todos', async route => {
  // 拦截匹配的请求
  console.log('拦截到请求:', route.request().url());

  // 1. 直接放行（继续请求）
  await route.continue();

  // 2. 修改请求
  // await route.continue({ headers: { ...route.request().headers(), 'X-Test': 'true' } });

  // 3. 返回 mock 响应
  // await route.fulfill({
  //   status: 200,
  //   contentType: 'application/json',
  //   body: JSON.stringify([{ id: 1, text: 'mock todo', done: false }]),
  // });

  // 4. 拒绝请求
  // await route.abort();
});

Description des paramètres：

• page.route(url, handler): enregistrer un intercepteur,urlprend en charge une chaîne, une expression régulière ou**un caractère générique.
• route.request(): obtenir l'objet de requête.
• route.continue([options]): autoriser la requête, peut modifier method, headers, postData.
• route.fulfill(response): renvoyer directement une réponse falsifiée.
• route.abort([errorCode]): abandonner la requête, codes d'erreur courants tels que"failed", "aborted", "timedout"。

Surveiller les requêtes et les réponses

// 监听所有请求
page.on('request', req => {
  console.log(`➡️ 请求: ${req.method()} ${req.url()}`);
});

// 监听所有响应
page.on('response', async res => {
  console.log(`⬅️ 响应: ${res.status()} ${res.url()}`);
});

// 获取响应 body
const response = await page.waitForResponse('**/api/data');
console.log('响应内容:', await response.text());

Méthodes courantes：

• request.url() / request.method() / request.headers() / request.postData()
• response.status() / response.headers() / response.text() / response.json()

Simuler un environnement réseau

API liées à l'interception réseau