Aperçu du typage E2E (Playwright/Cypress)
Découvrez comment les types TypeScript circulent dans les tests E2E avec Playwright et Cypress ; ajoutez un support approprié des types et des sélecteurs sûrs.
Aperçu du typage E2E (Playwright/Cypress) est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. 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 TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 3 leçons au total.
Introduction
Objectif : découvrez comment TypeScript améliore les tests E2E. Vous allez configurer le typage pour Playwright et Cypress, puis écrire de petits tests typés.
Installation de Playwright
Playwright fournit son propre exécuteur de tests et ses types. Importez depuis @playwright/test pour obtenir les fonctions test, expect et page correctement typées.
npm install --save-dev @playwright/testTest Playwright
Dans Playwright, les types de page et de locator sont stricts ; les utilisations incorrectes sont détectées lors de la compilation.
// example.spec.ts
import { test, expect } from "@playwright/test";
test("home loads", async ({ page }) => {
await page.goto("/")
const title = page.getByRole("heading", { name: /welcome/i })
await expect(title).toBeVisible()
// page is fully typed: URL, locators, assertions
})Types Cypress
Pour les types globaux de Cypress, ajoutez types: ["cypress"] à tsconfig ou écrivez une référence vers le fichier de prise en charge.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"types": ["cypress"]
}
}
// or in cypress/support/e2e.d.ts
/// <reference types="cypress" />Test Cypress
Les enchaînements de commandes cy, les enchaînements d’assertions et les commandes de modules d’extension sont typés avec TS ; les suggestions de l’IDE deviennent claires.
// cypress/e2e/home.cy.ts
describe("home", () => {
it("loads", () => {
cy.visit("/")
cy.findByRole("heading", { name: /welcome/i }).should("be.visible")
})
})Utilitaire de sélecteurs
Les fonctions utilitaires fondées sur data-testid sont plus stables que les sélecteurs CSS/XPath fragiles et fournissent une complétion automatique simple avec TS.
// helpers/selectors.ts
export const h = {
title: (name: string) => `[data-testid="title-${name}"]`,
}
// usage (Playwright)
// await expect(page.locator(h.title("home"))).toBeVisible()
// usage (Cypress)
// cy.get(h.title("home")).should("be.visible")Vérification des types Cypress
Vérification rapide : comment activez-vous les types globaux de Cypress (cy, Cypress) dans TS ?
Récapitulatif
Récapitulatif : Playwright et Cypress fournissent un typage strict avec TS. Une configuration correcte et des sélecteurs sûrs rendent les tests E2E plus fiables.
Questions Fréquemment Posées
La leçon « Aperçu du typage E2E (Playwright/Cypress) » est-elle gratuite ?
Oui — le texte complet de « Aperçu du typage E2E (Playwright/Cypress) » 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 TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Aperçu du typage E2E (Playwright/Cypress) » ?
Découvrez comment les types TypeScript circulent dans les tests E2E avec Playwright et Cypress ; ajoutez un support approprié des types et des sélecteurs sûrs. Tu pratiques TypeScript 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 TypeScript Academy ?
Aucune expérience préalable n'est requise. TypeScript 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 3 sur 3.
Combien de temps prend la leçon « Aperçu du typage E2E (Playwright/Cypress) » ?
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 TypeScript Academy ?
Oui. Chaque leçon TypeScript 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
- Configuration de Vitest/Jest pour TS
- Typage des tests et simulations ; expectTypeOf
- Aperçu du typage E2E (Playwright/Cypress)