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.

Practice

1. What is the main purpose of end-to-end testing with Playwright in a Remix app?

easy

A. To run unit tests on individual functions

B. To simulate real user actions and verify the entire app works correctly

C. To check the app's code style and formatting

D. To test only the backend API responses

Solution

1. Step 1: Understand end-to-end testing goal

   End-to-end testing simulates real user actions to check the whole app's behavior.

2. Step 2: Identify Playwright's role

   Playwright automates browser actions to perform these user-like tests.

3. Final Answer:

   To simulate real user actions and verify the entire app works correctly -> Option B

4. Quick Check:

   End-to-end testing = simulate user actions [OK]

Hint: End-to-end tests mimic user steps in the browser [OK]

Common Mistakes:

• Confusing end-to-end with unit testing
• Thinking Playwright tests only backend
• Assuming it checks code style

2. Which of the following is the correct way to navigate to the homepage in a Playwright test?

easy

A. page.navigate('https://example.com')

B. page.visit('https://example.com')

C. await browser.open('https://example.com')

D. await page.goto('https://example.com')

Solution

1. Step 1: Recall Playwright navigation method

   Playwright uses page.goto(url) to open a page.

2. Step 2: Check syntax correctness

   Only await page.goto('https://example.com') is valid syntax.

3. Final Answer:

   await page.goto('https://example.com') -> Option D

4. Quick Check:

   Navigate with page.goto() [OK]

Hint: Use await page.goto(url) to open pages [OK]

Common Mistakes:

• Using non-existent methods like navigate or visit
• Forgetting to await async calls
• Calling browser.open instead of page.goto

3. Consider this Playwright test snippet:

await page.goto('https://example.com');
await page.click('button#submit');
const message = await page.textContent('div#result');
console.log(message);

What will be logged if the button triggers a success message 'Success!' inside div#result?

medium

A. 'Success!'

B. undefined

C. Error: selector not found

D. '' (empty string)

Solution

1. Step 1: Understand the test flow

   The test opens the page, clicks the submit button, then reads text from div#result.

2. Step 2: Analyze expected result

   If clicking triggers 'Success!' text in div#result, page.textContent returns 'Success!'.

3. Final Answer:

   'Success!' -> Option A

4. Quick Check:

   page.textContent() returns visible text [OK]

Hint: page.textContent(selector) returns visible text content [OK]

Common Mistakes:

• Assuming textContent returns undefined if element exists
• Confusing selector errors with normal flow
• Expecting empty string when text is present

4. You wrote this Playwright test:

await page.goto('https://example.com');
await page.click('button.submit');
await expect(page.locator('div.result')).toHaveText('Success!');

But the test fails with timeout error. What is the most likely cause?

medium

A. The selector 'button.submit' does not match any element

B. The page.goto URL is incorrect

C. The expect assertion syntax is wrong

D. The test forgot to import Playwright

Solution

1. Step 1: Analyze failure reason

   Timeout usually means the element was not found or text did not appear.

2. Step 2: Check selectors and syntax

   If button.submit selector matches no element, click does nothing and result never updates.

3. Final Answer:

   The selector 'button.submit' does not match any element -> Option A

4. Quick Check:

   Timeout often means selector missing [OK]

Hint: Check selectors carefully if test times out [OK]

Common Mistakes:

• Assuming syntax error causes timeout
• Ignoring selector correctness
• Blaming URL without checking selectors

5. You want to test a Remix app form that requires filling two fields and submitting. Which Playwright code snippet correctly fills 'name' and 'email' inputs and submits the form?

hard

A. await page.fill('#name', 'Alice');
await page.fill('#email', '[e-mail]');
await page.press('button', 'Enter');

B. await page.type('name', 'Alice');
await page.type('email', '[e-mail]');
await page.submit('form');

C. await page.fill('input[name="name"]', 'Alice');
await page.fill('input[name="email"]', '[e-mail]');
await page.click('button[type="submit"]');

D. await page.setValue('input[name="name"]', 'Alice');
await page.setValue('input[name="email"]', '[e-mail]');
await page.click('submit');

Solution

1. Step 1: Identify correct Playwright methods

   page.fill(selector, value) fills inputs; page.click(selector) clicks buttons.

2. Step 2: Validate selectors and actions

   await page.fill('input[name="name"]', 'Alice'); await page.fill('input[name="email"]', '[e-mail]'); await page.click('button[type="submit"]'); uses correct selectors and methods: fills inputs by name attribute and clicks submit button by type.

3. Final Answer:

   await page.fill('input[name="name"]', 'Alice'); await page.fill('input[name="email"]', '[e-mail]'); await page.click('button[type="submit"]'); -> Option C

4. Quick Check:

   Use page.fill() and page.click() with proper selectors [OK]

Hint: Use page.fill() for inputs and page.click() for buttons [OK]

Common Mistakes:

• Using non-existent methods like setValue or submit
• Wrong selectors like IDs when none exist
• Using page.type() which is deprecated in Playwright