Angular Academy · Lektion

Översikt över E2E-testning

Förstå rollen för end-to-end-tester.

Lektion 1 av 413 steg

Översikt över E2E-testning är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad end-to-end-testning innebär

End-to-end-tester (E2E-tester) testar applikationen på samma sätt som en verklig användare gör: de startar appen i en riktig webbläsare, navigerar mellan sidor, klickar på knappar, skriver i formulär och verifierar det som är synligt. De kontrollerar att hela stacken fungerar tillsammans, inte bara en enskild enhet.

Testpyramiden

En välbalanserad testsvit har många snabba enhetstester, färre integrationstester och ett litet antal långsamma men värdefulla E2E-tester. E2E-testerna finns högst upp: mest täckning per test, men också högst kostnad att köra och underhålla.

Enhet: en funktion eller komponent isolerat
Integration: flera enheter tillsammans
E2E: den körande appen från början till slut

Vad E2E fångar som enhetstester missar

E2E-tester fångar problem som endast syns när verkliga delar kopplas ihop: routingfel, bruten API-integration, DOM som saknas efter en driftsättning, CSS som döljer en knapp eller en omdirigeringsloop för autentisering. Enhetstester med mockade beroenden kan passera samtidigt som den verkliga appen är trasig.

Angulars och E2E-testningens historia

Äldre versioner av Angular levererades med Protractor för E2E-testning. Protractor föråldrades och togs bort från nya projekt. I dag låter Angular CLI dig välja en E2E-testkörning från tredje part; Playwright och Cypress är de populäraste alternativen.

Varför Playwright

Playwright är ett modernt och snabbt E2E-ramverk från Microsoft. Det styr Chromium, Firefox och WebKit, väntar automatiskt på element, isolerar tester med nya webbläsarkontexter och har utmärkta verktyg för felsökning. Den här kursen använder Playwright.

Lägga till Playwright i Angular

Du kan skapa ett grundläggande Playwright-projekt med dess eget installationsprogram. Det skapar en playwright.config.ts och en mapp med exempeltester.

npm init playwright@latest
# creates playwright.config.ts and tests/ with example specs

Ett E2E-tests uppbyggnad

Ett E2E-test startar appen, utför användaråtgärder och verifierar sidan. Flödet är: förbered (navigera), agera (interagera), verifiera (kontrollera synligt resultat).

import { test, expect } from '@playwright/test';

test('home shows title', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading')).toHaveText('Welcome');
});

E2E körs mot en riktig server

E2E-testning kräver att Angular-appen faktiskt körs. Vanligtvis startar konfigurationen ng serve (eller serverar en produktionsbyggd version) och pekar testerna på den URL:en via baseURL och en post för webServer.

// playwright.config.ts
export default {
  use: { baseURL: 'http://localhost:4200' },
  webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};

Håll E2E-testsviter små och kritiska

Eftersom E2E-tester är långsamma och kan vara instabila bör du endast täcka kritiska användarflöden: inloggning, betalning och den huvudsakliga lyckade vägen. Flytta detaljerade kantfall till enhets- och integrationstester, där de körs snabbare och mer tillförlitligt.

Instabilitet och determinism

Den största utmaningen med E2E är instabilitet, det vill säga tester som misslyckas sporadiskt. Undvik fasta sleep-fördröjningar och förlita dig i stället på Playwrights automatiska väntande assertioner. Kontrollera testdatan så att varje körning startar från ett känt tillstånd.

E2E kontra komponenttestning

Angulars komponentstester (TestBed) kontrollerar en komponent i en simulerad miljö. E2E testar den driftsatta appen i en riktig webbläsare. De kompletterar varandra: använd TestBed för snabba kontroller av logik och DOM, och E2E för att säkerställa att hela produkten fungerar.

Snabb kontroll

Vad skiljer E2E-tester från enhetstester?

Besvara frågan i den interaktiva lektionen

Sammanfattning

E2E-tester kör hela appen i en riktig webbläsare för att fånga integrations- och routingfel som enhetstester missar. De finns högst upp i testpyramiden: få, långsamma och värdefulla. Angular-projekt använder nu testkörningar som Playwright, som startar servern och driver kritiska användarflöden.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Översikt över E2E-testning” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Översikt över E2E-testning”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Översikt över E2E-testning”?

Förstå rollen för end-to-end-tester. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Översikt över E2E-testning”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy