E2E testing with Playwright in Svelte

Introduction

E2E testing checks if your whole app works well from a user's view. Playwright helps you do this by controlling a browser to test your app automatically.

You want to make sure clicking buttons and filling forms works as expected.

You need to test your app on different browsers like Chrome and Firefox.

You want to catch bugs before users find them by simulating real user actions.

You want to test navigation between pages in your Svelte app.

You want to check that your app looks and behaves correctly after changes.

Syntax

Svelte

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

test('test name', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.click('selector');
  await expect(page.locator('selector')).toHaveText('expected text');
});

Use page.goto(url) to open your app in the browser.

Use page.click(selector) to simulate user clicks.

Examples

This test opens the homepage and checks the page title.

Svelte

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

test('check homepage title', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page).toHaveTitle('My Svelte App');
});

This test clicks a button and checks if a message appears.

Svelte

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

test('click button and check text', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.click('button#submit');
  await expect(page.locator('p#message')).toHaveText('Submitted!');
});

Sample Program

This test opens the Svelte app, clicks a button that increases a counter, and checks if the counter shows '1'.

Svelte

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

test('E2E test for Svelte app button click', async ({ page }) => {
  // Open the app
  await page.goto('http://localhost:3000');

  // Click the button with id 'increment'
  await page.click('button#increment');

  // Check if the counter text updated to '1'
  await expect(page.locator('span#count')).toHaveText('1');
});

Important Notes

Use clear and stable selectors like IDs or data-test attributes for locating elements.

Run your app locally before running Playwright tests to avoid connection errors.

Playwright can test on multiple browsers; specify them in the config for wider coverage.

Summary

E2E testing checks your app from the user's point of view.

Playwright automates browsers to run these tests easily.

Write tests that open pages, interact with elements, and check results.