End-to-end testing with Playwright in Remix - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is end-to-end testing?

End-to-end testing checks if the whole app works from start to finish, like a user would use it. It tests all parts together to find problems.

beginner

What is Playwright used for in testing?

Playwright is a tool that lets you write tests to control a browser and check if your web app works correctly, just like a real user.

intermediate

How do you start a Playwright test for a Remix app?

You write a test script that opens the Remix app URL in a browser, then simulate user actions like clicking buttons or filling forms, and check results.

intermediate

Why is it important to use selectors carefully in Playwright tests?

Good selectors find elements reliably and keep tests stable. Bad selectors break tests if the page changes a little.

beginner

What does a passing Playwright test report mean?

It means the test ran without errors and all checks matched expected results, so the app worked as tested.

What does end-to-end testing verify?

A Only the backend logic works

B The entire app works correctly from user start to finish

C Only the UI looks nice

D Only unit functions run without errors

End-to-end testing checks the full app flow, not just parts.

Which Playwright feature helps simulate user clicks?

A page.click(selector)

B page.load()

C page.test()

D page.open()

page.click(selector) simulates a user clicking an element.

Why should selectors be stable in Playwright tests?

A To increase test complexity

B To make tests run slower

C To avoid tests breaking when UI changes

D To hide elements from users

Stable selectors keep tests reliable even if UI changes.

What does a Playwright test assertion do?

A Checks if the app behaves as expected

B Runs the app server

C Starts the browser

D Writes test code

Assertions verify expected results during tests.

Which command starts a Playwright test script?

A git commit

B npm start

C node server.js

D npx playwright test

npx playwright test runs Playwright test scripts.

Explain how you would write a simple end-to-end test for a Remix app using Playwright.

Think about the steps a user takes and how Playwright can mimic them.

Describe why end-to-end testing is important for web apps built with Remix.

Consider what happens if only parts are tested separately.

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