Playwright Auto-wait et Timeout
Ce chapitre présente en profondeur le mécanisme d'auto-wait de Playwright, ainsi qu'une connaissance complète de l'attente manuelle et de la configuration des délais d'attente.
Pourquoi avons-nous besoin de l'auto-wait
Les applications web modernes dépendent fortement du rendu asynchrone, et le contenu de la page ne se charge pas complètement instantanément.
Dans les frameworks de test traditionnels, les développeurs doivent écriresleepouwaitForCes opérations d'attente ne sont pas assez flexibles—elles attendent soit trop longtemps et ralentissent les tests, soit trop peu et provoquent des tests instables.
Playwright intègre une logique d'attente dans chaque Locator et Action, résolvant fondamentalement ce problème.
Système d'auto-attente à trois couches
Couche 1 : Auto-attente de Locator
Lorsque vous créez un Locator, Playwright ne recherche pas l'élément immédiatement ; à la place, il commence à chercher et attend automatiquement lorsque vous effectuez une action ou une assertion.
Exemple
const btn = page.getByRole('button', { name: 'Bouton différé' });
// Attendre automatiquement que le bouton apparaisse lors du clic (dans la limite du délai d'action)
await btn.click();
Couche 2 : Auto-attente d'Action
Lors de l'exécution d'une action (click, fill, etc.), Playwright s'assure que l'élément est : Attaché → Visible → Stable → Reçoit les événements → Activé.
Couche 3 : Réessai automatique des assertions
Après l'échec d'une assertion, il ne signale pas immédiatement une erreur ; au lieu de cela, il continue de réessayer jusqu'à ce que la condition soit remplie ou qu'un délai d'attente soit dépassé.
Exemple
await expect(page.getByText('Data loading complete')).toBeVisible();
Méthodes d'attente manuelles
Dans des scénarios particuliers où l'attente automatique est insuffisante, Playwright fournit également des méthodes d'attente manuelles.
page.waitForTimeout(ms) — Attente fixe
Exemple
await page.waitForTimeout(2000);
Essayez d'éviter de l'utiliser.
waitForTimeoutL'attente fixe est extrêmement instable face aux différences de performances des appareils. Préférez leswaitForURL、waitForResponseattentes pilotées par les événements.
page.waitForURL() — Attendre un changement d'URL
Exemple
await page.waitForURL('https://www.example.com/dashboard');
// Attendre que l'URL contienne un motif spécifique
await page.waitForURL(/dashboard/);
page.waitForLoadState() — Attendre l'état de chargement
Exemple
await page.waitForLoadState('load');
// Attendre DOMContentLoaded
await page.waitForLoadState('domcontentloaded');
// Attendre l'inactivité du réseau
await page.waitForLoadState('networkidle');
page.waitForResponse() — Attendre la réponse réseau
Exemple
const response = await page.waitForResponse(
resp => resp.url().includes('/api/data') && resp.status() === 200
);
// Récupérer les données de réponse
const data = await response.json();
page.waitForEvent() — Attendre un événement
Exemple
const dialogPromise = page.waitForEvent('dialog');
await page.getByRole('button', { name: 'Delete' }).click();
const dialog = await dialogPromise;
await dialog.accept();
// Attendre qu'une nouvelle page s'ouvre
const pagePromise = page.context().waitForEvent('page');
await page.getByRole('link', { name: 'Open in new window' }).click();
const newPage = await pagePromise;
Configuration des timeouts expliquée
Playwright dispose de 4 types de timeouts, chacun agissant sur une couche différente :
| Type de timeout | Emplacement du fichier de configuration | Valeur par défaut | S'applique à |
|---|---|---|---|
| Délai d'attente du test | timeout | 30000ms | L'ensemble du cas de test |
| Délai d'attente d'expect | expect.timeout | 5000ms | Nouvelle tentative d'assertion |
| Délai d'attente des actions | use.actionTimeout | Aucun (illimité) | Opérations sur les éléments (click, fill, etc.) |
| Délai d'attente de navigation | use.navigationTimeout | Aucun (illimité) | Navigation de page (goto, goBack, etc.) |
Configuration globale
Exemple
import { defineConfig } from '@playwright/test';
export default defineConfig({
// Délai d'attente total pour chaque test (millisecondes)
timeout: 60000,
// Délai d'attente pour le réessai automatique d'assertion
expect: {
timeout: 10000,
},
use: {
// Délai d'attente pour chaque action (click, fill, etc.)
actionTimeout: 15000,
// Délai d'attente pour chaque navigation
navigationTimeout: 30000,
},
});
Paramètres par appel (priorité supérieure à la configuration globale)
Exemple
test.setTimeout(120000);
// Définir le délai d'attente pour une seule action
await page.getByRole('button').click({ timeout: 30000 });
// Définir le délai d'attente pour une seule navigation
await page.goto('https://www.example.com/', { timeout: 60000 });
Priorité des délais d'attente
Paramètres par appel > Paramètres du fichier de configuration global > Valeurs par défaut.
Suggestions pour définir des délais d'attente raisonnables
| Scénario | Délai d'attente recommandé | Description |
|---|---|---|
| Développement local | Valeurs par défaut | Les services locaux répondent rapidement ; les valeurs par défaut suffisent. |
| Environnement CI | 2–3 fois la valeur par défaut | Les performances de la machine CI fluctuent considérablement. |
| Pages lentes | actionTimeout: 15000 | Formulaires volumineux, pages complexes |
| Appels à des services tiers | test.setTimeout(120000) | Les réponses des API externes sont lentes. |