End-to-end testing with Playwright in Remix

Introduction

End-to-end testing checks if your whole app works like a real user would use it. Playwright helps you do this by controlling a browser automatically.

You want to make sure a user can log in and see their dashboard.

You need to test if a form submits correctly and shows a success message.

You want to check navigation between pages works as expected.

You want to verify that buttons and links respond properly when clicked.

You want to catch bugs before users find them by testing the full app flow.

Syntax

Remix

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

test('test name', async ({ page }) => {
  await page.goto('http://your-app-url');
  await page.click('selector');
  await expect(page.locator('selector')).toHaveText('expected text');
});

Use page.goto() to open a page.

Use page.click() to simulate user clicks.

Examples

This test opens the homepage and checks the page title.

Remix

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

test('check homepage title', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page).toHaveTitle('My Remix App');
});

This test fills the login form and checks if a welcome message appears.

Remix

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

test('login form works', async ({ page }) => {
  await page.goto('http://localhost:3000/login');
  await page.fill('input[name="username"]', 'user1');
  await page.fill('input[name="password"]', 'pass123');
  await page.click('button[type="submit"]');
  await expect(page.locator('text=Welcome user1')).toBeVisible();
});

Sample Program

This test simulates a user opening the app, logging in, and visiting the dashboard. It checks important texts to confirm each step worked.

Remix

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

test('full user flow test', async ({ page }) => {
  // Open homepage
  await page.goto('http://localhost:3000');

  // Click login link
  await page.click('a[href="/login"]');

  // Fill login form
  await page.fill('input[name="username"]', 'testuser');
  await page.fill('input[name="password"]', 'mypassword');

  // Submit form
  await page.click('button[type="submit"]');

  // Check welcome message
  await expect(page.locator('text=Welcome testuser')).toBeVisible();

  // Navigate to dashboard
  await page.click('a[href="/dashboard"]');

  // Check dashboard heading
  await expect(page.locator('h1')).toHaveText('Dashboard');
});

Important Notes

Use clear and stable selectors like data-testid attributes for locating elements.

Run tests in headed mode to watch the browser during development by using npx playwright test --headed.

Keep tests small and focused on one user action or flow at a time.

Summary

End-to-end tests check the whole app like a real user.

Playwright controls browsers to run these tests automatically.

Write simple steps: open page, click, fill, check text.