Écrire des tests d’interaction de page
Cliquez, remplissez des formulaires et vérifiez l’état du DOM avec la puissante API de Playwright.
Écrire des tests d’interaction de page est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Test de base
Chaque test importe test et expect depuis Playwright.
import { test, expect } from "@playwright/test";
test("homepage", async ({ page }) => {
await page.goto("/");
await expect(page).toHaveTitle(/My App/);
});Navigation
Utilisez page.goto(url) pour consulter des pages et page.click() pour naviguer à l'aide de clics.
Sélecteurs
Utilisez des localisateurs par rôle, texte ou identifiant de test pour obtenir des sélecteurs robustes.
await page.getByRole("button", { name: "Save" }).click();Remplir les formulaires
Utilisez fill, type, check et selectOption.
await page.getByLabel("Email").fill("user@example.com");Assertions
Utilisez expect(locator) pour des assertions réessayées comme toBeVisible et toHaveText.
Asynchrone/attente
Chaque action est asynchrone. Attendez toujours son résultat.
Attente automatique
Playwright attend automatiquement que les éléments puissent être utilisés. Les tests sont ainsi moins instables.
Captures d'écran
Prenez des captures d'écran en cas d'échec ou dans le cadre d'une régression visuelle.
await page.screenshot({ path: "result.png" });Mode sans interface
Les tests s'exécutent par défaut sans interface. Activez le mode avec interface avec --headed pour les observer.
Tests parallèles
Playwright exécute les tests en parallèle pour chaque processus de travail. Utilisez un état isolé (cookies, stockage).
Utiliser le modèle d’objet de page
Pour les grandes suites de tests, encapsulez les localisateurs et les actions propres à chaque page dans des classes.
Vérification rapide
Quel type de localisateur est le plus résilient ?
Récapitulatif
Écrivez des tests d’interaction avec la navigation, click, fill et des localisateurs fondés sur les rôles. Utilisez des assertions réessayées automatiquement.
Questions Fréquemment Posées
La leçon « Écrire des tests d’interaction de page » est-elle gratuite ?
Oui — le texte complet de « Écrire des tests d’interaction de page » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Écrire des tests d’interaction de page » ?
Cliquez, remplissez des formulaires et vérifiez l’état du DOM avec la puissante API de Playwright. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Écrire des tests d’interaction de page » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer Playwright dans SvelteKit
- Écrire des tests d’interaction de page
- Tester les formulaires et la navigation
- Intégration à l’intégration continue