Oversikt over E2E-testing
Forstå rollen til ende-til-ende-tester.
Oversikt over E2E-testing er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Hva ende-til-ende-testing betyr
Ende-til-ende-tester (E2E-tester) tester applikasjonen slik en ekte bruker gjør: De starter appen i en ekte nettleser, navigerer mellom sider, klikker på knapper, skriver inn data i skjemaer og kontrollerer det som er synlig. De bekrefter at hele stakken fungerer sammen, ikke bare én enhet.
Testpyramiden
En sunn testsuite har mange raske enhetstester, færre integrasjonstester og et lite antall langsomme, men svært verdifulle E2E-tester. E2E ligger øverst: mest dekning per test, men også høyest kostnad ved kjøring og vedlikehold.
- Enhet: en funksjon eller komponent isolert
- Integrasjon: flere enheter sammen
- E2E: den kjørende appen fra ende til ende
Hva E2E fanger opp, men enhetstester ikke gjør
E2E-tester fanger opp problemer som bare blir synlige når reelle deler kobles sammen: feil i ruting, ødelagt API-integrasjon, manglende DOM etter en utrulling, CSS som skjuler en knapp eller en løkke med omdirigering av autentisering. Enhetstester med mockede avhengigheter kan bestå selv om den reelle appen er ødelagt.
Angulars E2E-historikk
Eldre Angular-versjoner leverte Protractor for E2E. Protractor ble avviklet og fjernet fra nye prosjekter. I dag lar Angular CLI deg velge en tredjeparts E2E-kjører. Playwright og Cypress er de mest populære valgene.
Hvorfor Playwright
Playwright er et moderne og raskt E2E-rammeverk fra Microsoft. Det styrer Chromium, Firefox og WebKit, venter automatisk på elementer, isolerer tester med nye nettleserkontekster og har utmerkede feilsøkingsverktøy. Dette kurset bruker Playwright.
Legge til Playwright i Angular
Du kan sette opp Playwright med det tilhørende installasjonsprogrammet. Det oppretter en playwright.config.ts-fil og en mappe med eksempeltester.
npm init playwright@latest
# creates playwright.config.ts and tests/ with example specsAnatomien til en E2E-test
En E2E-test starter appen, utfører brukerhandlinger og gjør påstander om siden. Flyten er: forbered (naviger), utfør (samhandle), kontroller (bekreft synlig resultat).
import { test, expect } from '@playwright/test';
test('home shows title', async ({ page }) => {
await page.goto('/');
await expect(page.getByRole('heading')).toHaveText('Welcome');
});E2E kjører mot en ekte server
E2E krever at Angular-appen faktisk kjører. Vanligvis starter konfigurasjonen ng serve (eller leverer en produksjonsbuild) og peker testene til URL-en via baseURL og en webServer-oppføring.
// playwright.config.ts
export default {
use: { baseURL: 'http://localhost:4200' },
webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};Hold E2E-suiter små og kritiske
Siden E2E-tester er langsomme og kan være ustabile, bør du bare dekke kritiske brukerreiser: innlogging, utsjekking og hovedforløpet. Flytt detaljerte kanttilfeller ned til enhets- og integrasjonstester, der de kjører raskere og mer pålitelig.
Ustabilitet og determinisme
Den største E2E-utfordringen er ustabilitet, altså tester som mislykkes av og til. Unngå faste sleep-forsinkelser, og stol på Playwrights automatiske venting i påstander. Kontroller testdataene slik at hver kjøring starter fra en kjent tilstand.
E2E kontra komponenttesting
Angular-komponenttester (TestBed) kontrollerer en komponent i et syntetisk miljø. E2E kontrollerer den utrullede appen i en ekte nettleser. De utfyller hverandre: Bruk TestBed til raske kontroller av logikk og DOM, og E2E for å få tillit til at hele produktet fungerer.
Hurtigsjekk
Hva skiller E2E-tester fra enhetstester?
Oppsummering
E2E-tester kjører hele appen i en ekte nettleser for å fange opp integrasjons- og rutingsfeil som enhetstester ikke oppdager. De ligger øverst i testpyramiden: få, langsomme og verdifulle. Angular-prosjekter bruker nå kjørere som Playwright, som starter serveren og styrer kritiske brukerreiser.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 38
- Leksjoner
- 144
Ofte stilte spørsmål
Er leksjonen «Oversikt over E2E-testing» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Oversikt over E2E-testing», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Oversikt over E2E-testing»?
Forstå rollen til ende-til-ende-tester. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Angular Academy?
Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Oversikt over E2E-testing»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?
Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Oversikt over E2E-testing
- Skrive Playwright-tester
- Selektorer og påstander
- CI-integrasjon