Настройка Playwright в SvelteKit
Установите и настройте Playwright для проекта SvelteKit с помощью официальной интеграции.
«Настройка Playwright в SvelteKit» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Что такое Playwright
Playwright — современный фреймворк сквозного тестирования с поддержкой Chromium, Firefox и WebKit.
Установка
Мастер create-svelte в SvelteKit может добавить Playwright; в противном случае установите его вручную.
npm init playwright@latestКонфигурация
Мастер создаёт файл playwright.config.js с настройками браузера, каталогом тестов и хуком webServer для запуска приложения.
Настройка webServer
Playwright может автоматически запускать npm run build && npm run preview перед тестами.
webServer: { command: "npm run build && npm run preview", port: 4173 }Структура каталогов
Тесты хранятся в tests/ или e2e/. Обычно для каждой функции создают отдельный файл.
Запуск тестов
Используйте сценарий npm для запуска.
npm run test:e2eРежим интерфейса
Режим интерфейса Playwright предоставляет отладку с перемоткой во времени.
npx playwright test --uiСоздание тестов
Команда codegen записывает взаимодействия и создаёт для вас тесты.
npx playwright codegen http://localhost:5173Кроссбраузерное тестирование
Тесты выполняются параллельно в нескольких браузерах, обеспечивая широкое покрытие.
Просмотр трассировок
Для неудачных тестов создаются трассировки, которые можно просматривать с помощью playwright show-trace для быстрой отладки.
Интеграция с CI
Playwright работает в GitHub Actions, GitLab CI и других системах с официальными образами контейнеров.
Быстрая проверка
Что делает webServer в Playwright?
Итоги
Настройте Playwright с помощью мастера. Настройте webServer для автоматического запуска приложения и запускайте тесты с помощью npm run test:e2e.
Часто задаваемые вопросы
Урок «Настройка Playwright в SvelteKit» бесплатный?
Да — полный текст урока «Настройка Playwright в SvelteKit» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Настройка Playwright в SvelteKit»?
Установите и настройте Playwright для проекта SvelteKit с помощью официальной интеграции. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Настройка Playwright в SvelteKit»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка Playwright в SvelteKit
- Написание тестов взаимодействия со страницей
- Тестирование форм и навигации
- Интеграция с CI