E2E testing with Playwright in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is E2E testing?

E2E (End-to-End) testing checks if the whole app works correctly from start to finish, like a user would use it.

beginner

What role does Playwright play in E2E testing?

Playwright is a tool that automates browsers to simulate user actions and check if the app behaves as expected.

intermediate

How do you select elements in Playwright tests for a Svelte app?

Use stable selectors like data-testid attributes or roles, not CSS classes that might change.

intermediate

Why is it important to wait for elements before interacting in Playwright?

Waiting ensures the element is ready and visible, preventing test failures due to timing issues.

beginner

What is a good practice for writing assertions in Playwright E2E tests?

Write clear assertions that check visible text or element states to confirm the app works as expected.

What does E2E testing primarily verify?

A Individual functions work correctly

B Code style follows guidelines

C The entire app works as a user expects

D Unit tests run fast

E2E testing checks the whole app flow, not just parts or code style.

Which selector is best for Playwright tests in Svelte apps?

A CSS classes that change often

B data-testid attributes

C Random element IDs

D Inline styles

data-testid attributes are stable and meant for testing selectors.

What should you do before clicking a button in Playwright?

A Clear browser cache

B Immediately click without checks

C Reload the page

D Wait for the button to be visible and enabled

Waiting ensures the button is ready to interact, avoiding errors.

Which Playwright feature helps simulate user typing?

A page.type()

B page.waitForTimeout()

C page.goto()

D page.click()

page.type() simulates typing text into input fields.

What is a sign of a good assertion in Playwright tests?

A Checking if an element is visible with expected text

B Checking if an element exists in the DOM

C Checking console logs

D Checking network requests only

Assertions should confirm visible UI changes that users see.

Explain how you would write a simple Playwright E2E test for a Svelte login form.

Think about user steps and how Playwright simulates them.

Describe why waiting for elements is important in Playwright tests and how to do it.

Consider how web pages load content dynamically.