E2E testing with Playwright in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the test result of this Playwright code snippet?

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

Svelte

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

test('login button is enabled after input', async ({ page }) => {
  await page.goto('http://localhost:5173/login');
  await page.fill('input[name="username"]', 'user1');
  await page.fill('input[name="password"]', 'pass123');
  const isEnabled = await page.isEnabled('button#login-btn');
  expect(isEnabled).toBe(true);
});

A Test fails due to a timeout error on page.goto.

B Test fails because the selector 'button#login-btn' is invalid in Playwright.

C Test fails because page.fill does not work with input[name="username"].

D Test passes because the login button becomes enabled after filling inputs.

💡 Hint

Think about how Playwright interacts with form inputs and button states.

The test navigates to the login page, fills username and password inputs, then checks if the login button is enabled. The selector 'button#login-btn' is valid, and filling inputs enables the button, so the test passes.

❓ locator

intermediate

Which locator correctly selects the submit button in a Svelte form?

You want to select the submit button in a Svelte form for Playwright testing. The button has class 'submit-btn' and text 'Submit'. Which locator is best?

A page.locator('button.submit-btn:has-text("Submit")')

B page.locator('button.submit-btn')

C page.locator('button:has-text("Submit")')

D page.locator('button[role="submit"]')

💡 Hint

Combine class and visible text for precise selection.

Option A combines the class selector and the visible text filter, ensuring the locator matches the button with class 'submit-btn' and text 'Submit'. This is the most precise and reliable locator.

❓ assertion

advanced

What assertion verifies a success message is visible after form submission?

After submitting a form, a success message with id 'success-msg' should appear. Which assertion correctly verifies this in Playwright?

A await expect(page.locator('#success-msg')).toBeVisible();

B await expect(page.locator('#success-msg')).toHaveText('Success');

C await expect(page.locator('#success-msg')).toContainText('Success');

D await expect(page.locator('#success-msg')).not.toBeHidden();

💡 Hint

Check for visibility explicitly.

Option A uses toBeVisible() which directly checks if the element is visible on the page. Other options check text content but do not guarantee visibility.

🔧 Debug

advanced

Why does this Playwright test fail with a timeout error?

This test fails with a timeout error. What is the most likely cause? Code: import { test, expect } from '@playwright/test'; test('check welcome text', async ({ page }) => { await page.goto('http://localhost:5173/home'); await expect(page.locator('text=Welcome')).toBeVisible({ timeout: 1000 }); });

A The locator 'text=Welcome' is invalid syntax in Playwright.

B The page does not contain the text 'Welcome' within 1 second timeout.

C The page.goto URL is incorrect causing navigation failure.

D The expect statement is missing await keyword.

💡 Hint

Consider the timeout duration and page content loading.

The test waits only 1 second for the 'Welcome' text to appear. If the page or element loads slower, the test times out. The locator syntax and await usage are correct.

❓ framework

expert

How to implement a reusable Playwright test fixture for authenticated Svelte app sessions?

You want to create a Playwright fixture that logs in once and reuses the authenticated session for multiple tests in a Svelte app. Which approach is correct?

A Use beforeEach hook to login before every test without sharing session data.

B Call login steps inside each test to ensure fresh authentication every time.

C Use test.extend to create a fixture that performs login once and shares storageState across tests.

D Store username and password in environment variables and pass them directly to page.goto.

💡 Hint

Think about session reuse and test speed optimization.

Using test.extend to create a fixture that logs in once and saves the storageState allows reusing the authenticated session, speeding up tests and avoiding repeated logins.

Practice

1. What is the main purpose of E2E testing with Playwright in a Svelte app?

easy

A. To test the app from the user's point of view by automating browser actions

B. To check only the backend API responses without UI interaction

C. To write unit tests for individual Svelte components

D. To manually test the app by clicking buttons in the browser

Solution

1. Step 1: Understand E2E testing purpose

   E2E testing simulates real user actions to verify the whole app works correctly.

2. Step 2: Role of Playwright in E2E testing

   Playwright automates browsers to perform user-like actions and check results automatically.

3. Final Answer:

   To test the app from the user's point of view by automating browser actions -> Option A

4. Quick Check:

   E2E testing = user perspective automation [OK]

Hint: E2E tests mimic user actions in a real browser [OK]

Common Mistakes:

• Confusing E2E with unit or API testing
• Thinking E2E tests run only backend checks
• Assuming manual testing is E2E automation

2. Which of the following is the correct way to launch a browser and open a page in Playwright for a Svelte app test?

easy

A. const page = await playwright.newPage(); const browser = await page.launch();

B. const page = await browser.launch(); const browser = await playwright.newPage();

C. const browser = playwright.launch(); const page = browser.newPage();

D. const browser = await playwright.chromium.launch(); const page = await browser.newPage();

Solution

1. Step 1: Correct Playwright browser launch syntax

   Playwright requires launching the browser first with await playwright.chromium.launch().

2. Step 2: Creating a new page from the browser

   After launching, create a new page with await browser.newPage().

3. Final Answer:

   const browser = await playwright.chromium.launch(); const page = await browser.newPage(); -> Option D

4. Quick Check:

   Launch browser then open page [OK]

Hint: Launch browser first, then create page with await [OK]

Common Mistakes:

• Calling newPage() before launching browser
• Missing await causing promise errors
• Mixing order of browser and page creation

3. Given this Playwright test snippet for a Svelte app:

await page.goto('http://localhost:3000');
await page.click('button#submit');
const text = await page.textContent('div#result');
console.log(text);

What will be logged if clicking the button updates the div#result to 'Success'?

medium

A. Error: selector not found

B. undefined

C. 'Success'

D. '' (empty string)

Solution

1. Step 1: Understand page.goto and click

   The test navigates to the page and clicks the button with id 'submit'.

2. Step 2: Check textContent after click

   Click updates div#result text to 'Success', so textContent returns 'Success'.

3. Final Answer:

   'Success' -> Option C

4. Quick Check:

   Click updates text, so textContent = 'Success' [OK]

Hint: Click updates text, textContent reads updated text [OK]

Common Mistakes:

• Assuming textContent returns undefined if element exists
• Not waiting for page navigation or updates
• Confusing selector syntax causing errors

4. Identify the error in this Playwright test code for a Svelte app:

await page.goto('http://localhost:3000');
await page.click('button.submit');
await expect(page.locator('div#result')).toHaveText('Success');

Why might this test fail even if the button click works?

medium

A. The selector 'button.submit' is incorrect if the button has id 'submit', not class 'submit'

B. The expect assertion syntax is invalid and will cause a syntax error

C. page.goto is missing await causing navigation failure

D. toHaveText cannot be used with page.locator

Solution

1. Step 1: Check selector correctness

   'button.submit' selects a button with class 'submit', but if button has id 'submit', selector should be 'button#submit'.

2. Step 2: Verify assertion and syntax

   expect with toHaveText on page.locator is valid syntax in Playwright.

3. Final Answer:

   The selector 'button.submit' is incorrect if the button has id 'submit', not class 'submit' -> Option A

4. Quick Check:

   Selector must match element attribute type [OK]

Hint: Match selector type: # for id, . for class [OK]

Common Mistakes:

• Using class selector when element has id
• Missing await on async calls
• Misunderstanding Playwright assertion syntax

5. You want to write a Playwright test for a Svelte app that fills a form with name and email, submits it, and checks for a success message. Which sequence of actions is correct?

hard

A. await expect(page.locator('div#message')).toHaveText('Form submitted!'); await page.fill('input#name', 'Alice'); await page.fill('input#email', '[e-mail]'); await page.click('button#submit');

B. await page.fill('input#name', 'Alice'); await page.fill('input#email', '[e-mail]'); await page.click('button#submit'); await expect(page.locator('div#message')).toHaveText('Form submitted!');

C. await page.fill('input#email', '[e-mail]'); await page.click('button#submit'); await page.fill('input#name', 'Alice'); await expect(page.locator('div#message')).toHaveText('Form submitted!');

D. await page.click('button#submit'); await page.fill('input#name', 'Alice'); await page.fill('input#email', '[e-mail]'); await expect(page.locator('div#message')).toHaveText('Form submitted!');

Solution

1. Step 1: Fill form fields before submitting

   Fill the name and email inputs first to provide data.

2. Step 2: Click submit and check success message

   After filling, click submit button, then assert the success message appears.

3. Final Answer:

   Fill inputs, click submit, then check message -> Option B

4. Quick Check:

   Fill before submit, then assert success [OK]

Hint: Fill inputs first, then submit, then check result [OK]

Common Mistakes:

• Clicking submit before filling inputs
• Checking success message before submit
• Filling inputs after submit