End-to-end testing with Playwright in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to launch a browser in Playwright.

Remix

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.[1]();
  await browser.close();
})();

Drag options to blanks, or click blank then click option'

Alaunch

Bstart

Copen

Dinit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'start' or 'open' instead of 'launch' causes errors.

The launch() method starts a new browser instance in Playwright.

2fill in blank

medium

Complete the code to navigate to a URL in Playwright.

Remix

const page = await browser.newPage();
await page.[1]('https://example.com');

Drag options to blanks, or click blank then click option'

Anavigate

BgoTo

Cgoto

Dvisit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'goTo' or 'navigate' causes method not found errors.

The correct method to navigate to a URL is goto() in Playwright.

3fill in blank

hard

Fix the error in the assertion to check page title.

Remix

const title = await page.title();
expect(title).[1]('Welcome');

Drag options to blanks, or click blank then click option'

Aequals

BtoBe

Cis

DequalTo

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'equals' or 'equalTo' causes assertion errors.

The Playwright test assertion uses toBe() to check equality.

4fill in blank

hard

Fill both blanks to wait for a button and click it.

Remix

await page.[1]('button#submit');
await page.[2]('button#submit');

Drag options to blanks, or click blank then click option'

AwaitForSelector

Bclick

CwaitForLoadState

Dpress

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'press' instead of 'click' causes wrong action.

First, waitForSelector() waits for the button to appear, then click() clicks it.

5fill in blank

hard

Fill all three blanks to create a test that opens a page, fills a form, and submits it.

Remix

test('submit form', async ({ page }) => {
  await page.[1]('https://example.com/form');
  await page.fill('[2]', 'John Doe');
  await page.[3]('button[type=submit]');
});

Drag options to blanks, or click blank then click option'

Agoto

B#name

Cclick

DwaitForSelector

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong selectors or methods causes test failures.

The test navigates with goto, fills the input with selector #name, then clicks the submit button with click.

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