Playwright-это фреймворк-алкогольный инструмент для тестирования (также известный как E2E, или интеграционное тестирование) для веб-приложений. У драматурга отличный опыт разработчиков и делает написание хорошим и устойчивым к изменениям в изменениях тестов.

]

---

]

] 1. Установите драматург

]

, чтобы настроить Playwright, запустите следующую команду:
]

]

npm init playwright@latest

]

вы будете руководствоваться мастером настройки в вашем терминале. При запросе «где поставить ваши сквозные тесты?

] Добавить сценарии в package.json

]

в вашем пакете.

это позволяет вам запускать тесты как в средах разработки, так и в средах CI. ]

] Конфигурация драматурга

]

файл playwright.config.ts должен быть настроен следующим образом:

] Изменения ключей в конфигурации: ]

]

]

use.baseurl

: это устанавливает базовый URL вашего сервера разработки, поэтому вам не нужно писать его в каждом тесте.
• ] WebServer
: этот блок описывает, как запустить ваш сервер разработки. Это повторно использует уже работающий сервер, если вы не находитесь в среде CI.
• ] ] testdir
: каталог, где драматург должен искать ваши тесты E2E (в данном случае, src/tests/e2e).
• ] ] ] 2. Настройте MSW для тестирования браузера
]

До сих пор MSW была настроена для насмешливых ответов API в среде Node.js. Однако, поскольку Playwright использует реальный браузер для тестирования, вам необходимо настроить MSW для работы в среде браузера.

]

создать новый модуль JavaScript, который зарегистрирует службу MSW для тестов на основе браузеров:

]

] 3. Зарегистрируйте работника в режиме разработки ]

для запуска работника MSW, когда приложение работает в режиме разработки, добавьте следующее в корневой модуль вашего приложения (например, src/main.tsx):

]

обязательно установите переменную среды VITE_API_MOCK в вашем файле .ENV: ]

]

vite_api_mock = "true"
]

] 4. Напишите тест E2E

VITE_API_MOCK="true"

теперь вы можете написать тест E2E для потока в вашем приложении. Вот пример Playwright Test:

] 5. Запуск теста ]

, чтобы запустить тест E2E, используйте следующую команду:

]

]

npm run test: e2e: ci
]

это выполнит тест в режиме CI, который полезен для автоматических трубопроводов.

npm run test:e2e:ci

]

]