Le scénario catastrophe qui m'a coûté une nuit de production
Il est 02:17 du matin, alerte PagerDuty. Notre agent IA déployé en production — celui qui récapitule les tickets Jira et pousse les résumés sur Slack — tombe en cascade. Dans les logs : Error: net::ERR_INTERNET_DISCONNECTED répété 47 fois en 90 secondes. Pire : nos tests E2E passaient au vert la veille, en local, sur une fibre 1 Gbps. Le coupable ? Nos utilisateurs naviguaient en 3G dans le métro. Nous n'avions jamais simulé la dégradation réseau. Cette nuit-là, j'ai juré qu'on intégrerait chrome-devtools-mcp au pipeline CI.
Dans ce tutoriel, je vous montre comment reproduire ce type d'incident de manière déterministe, puis comment brancher votre agent IA sur l'API HolySheep AI — S'inscrire ici pour observer son comportement sous contrainte. Vous repartirez avec trois scripts exécutables et une checklist d'erreurs courantes.
Qu'est-ce que chrome-devtools-mcp ?
chrome-devtools-mcp est un serveur MCP (Model Context Protocol) open-source qui expose l'intégralité du Chrome DevTools Protocol (CDP) à un agent IA. Concrètement, votre agent peut :
- Ouvrir un onglet, naviguer, cliquer, scroller
- Capturer des
screenshots, des traces réseau (HAR) et desconsole logs - Et surtout — émuler des conditions réseau : 3G, 4G, offline, latence custom, perte de paquets
- Piloter ces conditions depuis l'agent lui-même, sans script Playwright externe
Contrairement à Playwright seul (qui supporte déjà le throttling via context.route), chrome-devtools-mcp permet à l'agent de décider dynamiquement du profil réseau en fonction du contexte — exactement ce qu'il faut pour des tests E2E agent-in-the-loop.
Installation pas-à-pas
1. Prérequis
- Node.js ≥ 18.17
- Chrome stable ≥ 120
- Python ≥ 3.10 pour le harness Playwright
2. Installer le serveur MCP
npm install -g chrome-devtools-mcp@latest
Vérification
chrome-devtools-mcp --version
Attendu : >= 0.7.2
3. Configurer le client MCP (Claude Desktop, Cursor ou agent custom)
{
"mcpServers": {
"chrome-devtools": {
"command": "chrome-devtools-mcp",
"args": ["--port=9222", "--isolated=true"],
"env": {
"HOLYSHEEP_API_KEY": "YOUR_HOLYSHEEP_API_KEY",
"HOLYSHEEP_BASE_URL": "https://api.holysheep.ai/v1"
}
}
}
}Cas concret : reproduire l'incident du métro
L'idée : faire naviguer l'agent sur notre app, forcer le profil Fast 3G (1,6 Mbps ↓, 750 Kbps ↑, 300 ms RTT, 2 % de perte), puis vérifier qu'il retombe proprement sur le cache Service Worker au lieu d'exploser en boucle.
Script E2E Python (Playwright + CDP via WebSocket)
import asyncio
from playwright.async_api import async_playwright
HOLYSHEEP_BASE_URL = "https://api.holysheep.ai/v1"
HOLYSHEEP_API_KEY = "YOUR_HOLYSHEEP_API_KEY"
CDP_ENDPOINT = "http://localhost:9222"
async def run_agent_e2e():
async with async_playwright() as p:
browser = await p.chromium.connect_over_cdp(CDP_ENDPOINT)
context = browser.contexts[0]
page = await context.new_page()
# 1. Activer le throttling Fast 3G via CDP
cdp = await context.new_cdp_session(page)
await cdp.send("Network.enable")
await cdp.send("Network.emulateNetworkConditions", {
"offline": False,
"latency": 300, # ms
"downloadThroughput": 200_000, # bytes/s ≈ 1,6 Mbps
"uploadThroughput": 93_750, # bytes/s ≈ 750 Kbps
"connectionType": "cellular3g"
})
# 2. Naviguer vers l'app sous test
try:
await page.goto("https://app.example.com/dashboard", timeout=15000)
except Exception as e:
print(f"[NET-ERROR] {type(e).__name__}: {e}")
fallback = await page.evaluate(
"() => navigator.serviceWorker.controller?.state"
)
assert fallback == "