Sveltejs Academy · Lektion

Testa formulär och navigering

Testa formulärinsändningar, omdirigeringar och användarflöden över flera sidor från början till slut.

Lektion 3 av 413 steg

Testa formulär och navigering är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Skicka formulär

Fyll i fälten och skicka formuläret. Kontrollera sedan resultatet.

await page.getByLabel("Email").fill("a@b.com");
await page.getByRole("button", { name: "Submit" }).click();
await expect(page).toHaveURL("/dashboard");

Valideringsfel

Testa att ogiltiga indata ger synliga felmeddelanden.

await page.getByRole("button", { name: "Submit" }).click();
await expect(page.getByText("Email required")).toBeVisible();

Fel på serversidan

Mocka API:et eller fyll databasen med testdata för att utlösa valideringsflöden på serversidan.

Omdirigeringsflöden

Efter inloggningen kontrollerar du den nya URL:en och element som är unika för målsidan.

Webbläsarnavigering

Använd page.goBack() och page.goForward() för att testa historiken.

Cookies och autentisering

Logga in en gång och återanvänd tillståndet med storageState för snabbare testsviter.

CSRF

SvelteKits inbyggda CSRF-skydd hanteras automatiskt när du använder riktiga formulärinskickningar.

Progressiv förbättring

Testa att formulär fungerar även när JavaScript är inaktiverat genom att ändra webbläsarens inställningar.

Flerstegsformulär

Använd ett Page Object för att kapsla in stegen. Kontrollera mellanliggande tillstånd vid behov.

Nätverksmockning

Avlyssna API-anrop med page.route() för deterministiska tester.

await page.route("**/api/items", route => route.fulfill({ json: [] }));

Visuell regression

Ta ögonblicksbilder av viktiga sidor efter formulärinskickningen för att upptäcka oavsiktliga ändringar i gränssnittet.

Snabb kontroll

Hur återanvänder du inloggningstillstånd mellan tester?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Testa kompletta användarflöden: formulär, navigering och feltillstånd. Använd mockning och storageState för att hålla testsviterna snabba och tillförlitliga.

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: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Testa formulär och navigering” gratis?

Ja – hela texten till ”Testa formulär och navigering” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Testa formulär och navigering”?

Testa formulärinsändningar, omdirigeringar och användarflöden över flera sidor från början till slut. Ni övar på Sveltejs 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 Sveltejs Academy?

Du behöver inga förkunskaper. Utbildningen i Sveltejs 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 3 av 4.

Hur lång tid tar lektionen ”Testa formulär och navigering”?

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 Sveltejs Academy-lektionen?

Ja. Varje Sveltejs 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 Sveltejs Academy