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.