End-to-end testing with Playwright in Remix - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the test result of this Playwright snippet?

Consider this Playwright test code for a Remix app login page. What will be the test execution result?

Remix

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

test('login button is visible', async ({ page }) => {
  await page.goto('/login');
  const loginButton = page.locator('button[type="submit"]');
  await expect(loginButton).toBeVisible();
});

A Test passes if the login button is present and visible on the /login page

B Test passes even if the button is hidden

C Test fails due to missing await before page.goto

D Test fails because the locator syntax is incorrect

💡 Hint

Check the locator syntax and the use of await for asynchronous calls.

The locator 'button[type="submit"]' correctly selects the submit button. The test waits for the page to load and asserts visibility. The await keyword is correctly used before page.goto and expect.

❓ locator

intermediate

Choose the best locator for a navigation link in Remix

You want to select a navigation link with the text 'Dashboard' in a Remix app for your Playwright test. Which locator is best practice?

A page.locator('a:has-text("Dashboard")')

B page.locator('a[href="/dashboard"]')

C page.locator('text=Dashboard')

D page.locator('a').filter({ hasText: 'Dashboard' })

💡 Hint

Consider stability and specificity of locators in tests.

Using the href attribute is more stable and specific than text-based locators, which can change. Option B targets the exact link by URL.

❓ assertion

advanced

Which assertion correctly verifies an error message appears?

You want to check that an error message with text 'Invalid credentials' appears after a failed login in your Remix app test. Which assertion is correct?

Remix

const errorMessage = page.locator('.error-message');

A await expect(errorMessage).toHaveValue('Invalid credentials');

B await expect(errorMessage).toBeVisible('Invalid credentials');

C await expect(errorMessage).toContainText('Invalid credentials');

D await expect(errorMessage).toHaveText('Invalid credentials');

💡 Hint

Check the Playwright assertion methods for text content.

toContainText checks if the element's text includes the given string, which is suitable for error messages. toHaveText requires exact match. toBeVisible does not accept text argument. toHaveValue is for input elements.

🔧 Debug

advanced

Why does this Playwright test fail intermittently?

This test sometimes fails with a timeout error. What is the likely cause? Code: await page.goto('/profile'); await page.click('button#load-data'); await expect(page.locator('.data-loaded')).toBeVisible();

A The test does not wait for the data to load after clicking the button

B The page.goto URL is wrong causing navigation failure

C The locator '.data-loaded' is incorrect and does not exist

D The button selector 'button#load-data' is invalid syntax

💡 Hint

Think about asynchronous actions after clicking a button.

Clicking the button triggers data loading asynchronously. The test must wait for the data to appear. Without explicit wait, the assertion may run too early causing timeout.

❓ framework

expert

How to integrate Playwright tests in a Remix app CI pipeline?

Which approach correctly integrates Playwright end-to-end tests into a Remix app continuous integration (CI) pipeline?

A Only run Playwright tests locally, not in CI

B Run Playwright tests before building the Remix app in CI

C Run Playwright tests without building the Remix app in CI

D Run 'npm run build' then 'npx playwright test' after Remix app build in CI

💡 Hint

Consider the app state required for end-to-end tests.

Playwright tests require the built app to be available. Running tests after building ensures the app is ready. Running tests before build or without build will fail.

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