PricingLoginStart free
React Academy · leksjon

Teste skjemaer og brukerflyter fra ende til ende

Automatiser innsending av flerstegsskjemaer og navigasjonsflyter med Playwright page objects.

Leksjon 4 av 414 trinn

Teste skjemaer og brukerflyter fra ende til ende er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Strategi for ende-til-ende-testing av skjemaer

E2E-tester av skjemaer simulerer hele brukerreisen: åpne siden, fylle ut felter, sende inn skjemaet, håndtere valideringsfeil og kontrollere at resultatet er vellykket.

Page Object Model

Page Object Model (POM) samler selektorer og samhandling for en side i en klasse. Det gjør testene mer lesbare og reduserer duplisering.

class LoginPage {
  constructor(private page: Page) {}

  async goto() { await this.page.goto('/login'); }
  async fillEmail(email: string) { await this.page.getByLabel('Email').fill(email); }
  async fillPassword(pw: string) { await this.page.getByLabel('Password').fill(pw); }
  async submit() { await this.page.getByRole('button', { name: /log in/i }).click(); }
  async getError() { return this.page.getByRole('alert').textContent(); }
}

Bruk Page Object i tester

Ved bruk av page objects blir testene beskrivende på intensjonsnivå og uttrykker brukerhandlinger på en måte som er enkel å lese og vedlikeholde.

test('successful login redirects to dashboard', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.fillEmail('alice@example.com');
  await loginPage.fillPassword('password123');
  await loginPage.submit();
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});

Testing av valideringsfeil

Send inn ugyldige eller tomme data, og kontroller feilmeldingene som brukergrensesnittet viser.

test('shows validation errors on empty submit', async ({ page }) => {
  await page.goto('/register');
  await page.getByRole('button', { name: 'Create account' }).click();
  await expect(page.getByText('Email is required')).toBeVisible();
  await expect(page.getByText('Password must be at least 8 characters')).toBeVisible();
});

Testing av flertrinnsskjemaer

For veivisere med flere trinn går du gjennom hvert trinn og kontrollerer at skjemaet går videre og beholder tidligere inndata.

test('completes 3-step signup', async ({ page }) => {
  await page.goto('/signup');
  // Step 1
  await page.getByLabel('First Name').fill('Alice');
  await page.getByRole('button', { name: 'Next' }).click();
  // Step 2
  await page.getByLabel('Plan').selectOption('pro');
  await page.getByRole('button', { name: 'Next' }).click();
  // Step 3
  await page.getByLabel('Card Number').fill('4242424242424242');
  await page.getByRole('button', { name: 'Complete' }).click();
  await expect(page.getByText('Welcome, Alice!')).toBeVisible();
});

Mocking av API i Playwright

Bruk page.route() til å fange opp API-kall og returnere mockede svar. Dette er nyttig for å teste spesielle tilfeller uten en ekte backend.

await page.route('/api/register', async route => {
  await route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ token: 'fake-token' }),
  });
});

await page.goto('/register');
// ...fill and submit form
await expect(page).toHaveURL('/dashboard');

Testing av filopplastinger

Bruk setInputFiles() til å simulere en filopplasting i Playwright.

test('uploads a profile photo', async ({ page }) => {
  await page.goto('/profile');
  const fileInput = page.getByLabel('Profile photo');
  await fileInput.setInputFiles('./fixtures/avatar.png');
  await page.getByRole('button', { name: 'Upload' }).click();
  await expect(page.getByAltText('Profile photo')).toBeVisible();
});

Gjenbruk av autentiseringstilstand

Logg inn én gang, lagre nettleserens lagringstilstand og bruk den på nytt i flere tester for å hoppe over gjentatte innloggingsflyter.

// auth.setup.ts
test('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('alice@example.com');
  await page.getByLabel('Password').fill('password');
  await page.getByRole('button', { name: 'Log in' }).click();
  await page.context().storageState({ path: 'e2e/.auth/user.json' });
});

// playwright.config.ts — use storageState in other tests
use: { storageState: 'e2e/.auth/user.json' }

Testing av feilhåndtering

Simuler nettverksfeil, og kontroller at brukeren kan prøve på nytt eller får en nyttig feilmelding.

await page.route('/api/submit', route => route.abort());
await page.getByRole('button', { name: 'Submit' }).click();
await expect(page.getByText('Network error. Please try again.')).toBeVisible();
await page.unroute('/api/submit');
// Now the real request goes through
await page.getByRole('button', { name: 'Retry' }).click();

Testing av tastaturnavigering

Test at skjemaer er fullt tilgjengelige med tastatur, ved å gå gjennom feltene med Tab og sende inn med Enter.

test('submits form with keyboard only', async ({ page }) => {
  await page.goto('/contact');
  await page.keyboard.press('Tab'); // focus name
  await page.keyboard.type('Alice');
  await page.keyboard.press('Tab'); // focus email
  await page.keyboard.type('alice@example.com');
  await page.keyboard.press('Tab'); // focus submit
  await page.keyboard.press('Enter');
  await expect(page.getByText('Message sent!')).toBeVisible();
});

Fixtures for testdata

Bruk Playwright-fixtures til å dele oppsettslogikk, for eksempel oppretting av en testbruker, på en ryddig måte mellom flere tester.

// fixtures.ts
const test = base.extend<{ testUser: User }>({ 
  testUser: async ({}, use) => {
    const user = await createTestUser();
    await use(user);
    await deleteTestUser(user.id);
  },
});

// In a test file:
test('edits profile', async ({ page, testUser }) => {
  await page.goto(`/users/${testUser.id}/edit`);
});

Parallell testkjøring

Playwright kjører som standard tester parallelt på tvers av arbeidere. Bruk test.describe.serial bare for tester som må kjøres i en bestemt rekkefølge.

Sjekk forståelsen

Hva er den viktigste fordelen med Page Object Model (POM) i E2E-testing?

Besvar den i den interaktive leksjonen

Oppsummering

E2E-tester av skjemaer bruker Page Objects for god vedlikeholdbarhet, page.route() for mocking av API-er, setInputFiles() for opplastinger og lagringstilstand for å gjenbruke autentiserte økter. Test validering, flertrinnsforløp og tastaturnavigering for å dekke realistiske brukerreiser.

Gratis å komme i gang

Lær deg React 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
88
Leksjoner
324
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Teste skjemaer og brukerflyter fra ende til ende» gratis?

Ja – hele teksten i «Teste skjemaer og brukerflyter fra ende til ende» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Teste skjemaer og brukerflyter fra ende til ende»?

Automatiser innsending av flerstegsskjemaer og navigasjonsflyter med Playwright page objects. Du øver på React 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 React Academy?

Ingen tidligere erfaring er nødvendig. React 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 4 av 4.

Hvor lang tid tar leksjonen «Teste skjemaer og brukerflyter fra ende til ende»?

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 React Academy-leksjonen?

Ja. Alle React 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

  1. Integrasjonstesting med React Testing Library
  2. Teste asynkront brukergrensesnitt og API-kall med MSW
  3. Kom i gang med Playwright for React
  4. Teste skjemaer og brukerflyter fra ende til ende
← Tilbake til React Academy