Einblicke in die E2E-Typisierung (Playwright/Cypress)
Sehen Sie, wie TypeScript-Typen in E2E-Tests mit Playwright und Cypress weitergegeben werden, und fügen Sie passende Typunterstützung und sichere Selektoren hinzu.
Einblicke in die E2E-Typisierung (Playwright/Cypress) ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 3 Lektionen.
Einführung
Ziel: Erhalten Sie einen Einblick darin, wie TypeScript E2E-Tests verbessert. Richten Sie die Typisierung für Playwright und Cypress ein und schreiben Sie kleine typisierte Tests.
Playwright installieren
Playwright bringt einen eigenen Test-Runner und eigene Typen mit. Importieren Sie aus @playwright/test, um typisierte test-, expect- und page-Elemente zu erhalten.
npm install --save-dev @playwright/testPlaywright-Test
In Playwright sind die Typen von Seite und Locator strikt; falsche Verwendungen werden beim Kompilieren erkannt.
// 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
})Cypress-Typen
Für globale Cypress-Typen fügen Sie types: ["cypress"] zu tsconfig hinzu oder schreiben Sie eine Referenz auf die Support-Datei.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"types": ["cypress"]
}
}
// or in cypress/support/e2e.d.ts
/// <reference types="cypress" />Cypress-Test
cy-Befehlsketten, Assertion-Ketten und Plugin-Befehle werden mit TS typisiert; dadurch werden IDE-Empfehlungen übersichtlich.
// cypress/e2e/home.cy.ts
describe("home", () => {
it("loads", () => {
cy.visit("/")
cy.findByRole("heading", { name: /welcome/i }).should("be.visible")
})
})Selektor-Hilfsfunktion
Auf data-testid basierende Hilfsfunktionen sind stabiler als fragile CSS-/XPath-Selektoren und bieten mit TS eine einfache Autovervollständigung.
// 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")Cypress-Typen prüfen
Kurztest: Wie aktivieren Sie globale Cypress-Typen (cy, Cypress) in TS?
Zusammenfassung
Zusammenfassung: Playwright und Cypress bieten starke Typen mit TS. Eine korrekte Konfiguration und sichere Selektoren machen E2E-Tests zuverlässiger.
Häufig gestellte Fragen
Ist die Lektion „Einblicke in die E2E-Typisierung (Playwright/Cypress)“ kostenlos?
Ja — der vollständige Text von „Einblicke in die E2E-Typisierung (Playwright/Cypress)“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Einblicke in die E2E-Typisierung (Playwright/Cypress)“?
Sehen Sie, wie TypeScript-Typen in E2E-Tests mit Playwright und Cypress weitergegeben werden, und fügen Sie passende Typunterstützung und sichere Selektoren hinzu. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um TypeScript Academy zu starten?
Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.
Wie lange dauert die Lektion „Einblicke in die E2E-Typisierung (Playwright/Cypress)“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Vitest-/Jest-Einrichtung für TS
- Typisierung von Tests und Mocks; expectTypeOf
- Einblicke in die E2E-Typisierung (Playwright/Cypress)