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.