Formulare und Benutzerabläufe von Anfang bis Ende testen

Strategie zum Testen von Formularen von Anfang bis Ende

Page Object Model

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(); }
}

Das Page Object in Tests verwenden

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();
});

Validierungsfehler testen

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();
});

Tests für mehrstufige Formulare

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();
});

API in Playwright mocken

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');

Datei-Uploads testen

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();
});

Auth-Status wiederverwenden

// 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' }

Fehlerbehandlung testen

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();

Tastaturnavigation testen

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 für Testdaten

// 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`);
});

Parallele Testausführung

Kurzer Check

Zusammenfassung