Mistake 11/14: Your E2E tests are checking email format

if you are running 400 E2E tests and half of them validate form inputs like email format, you are burning browser time on logic that never needed a browser.

The inconsistency isn't obvious at first. These tests pass. They feel useful. But every one of them navigates to a login page, authenticates, clicks through menus, waits for redirects. All to verify that a regex rejects "not-an-email". That is 30 seconds of browser overhead for a check that has nothing to do with the browser.

BEFORE - E2E for email validation. 30 seconds of overhead.

// Every spec file repeats this flow
test('rejects invalid email', async ({ page }) => {
  await page.goto('/login');                          // navigate
  await page.getByLabel('Email').fill('not-an-email');// fill
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page.getByText('Invalid email')).toBeVisible(); // 30 sec for this
});

AFTER - Component test. Same assertion. 200ms

import { test } from '@playwright/experimental-ct-react';
import { LoginForm } from '../src/components/LoginForm';

test('rejects invalid email', async ({ mount }) => {
  const form = await mount(<LoginForm />);            // no navigation. no login.
  await form.getByLabel('Email').fill('not-an-email');
  await form.getByRole('button', { name: 'Sign in' }).click();
  await expect(form.getByText('Invalid email')).toBeVisible();
});

The distinction most teams miss is this: E2E tests exist to cover what only E2E can cover. Multi-page flows, payment processing, cross-service coordination. That is the territory.

Form validation, input constraints, UI state changes. Those belong at the component level.

When you separate them, everything gets faster and each layer actually earns its place. ⚡

What percentage of your E2E tests are actually testing component behavior? Drop it in the comments.