Случалось, что ваш тест Playwright ведёт себя странно? Например, иногда не проходит по непонятной причине. Или проходит у вас, но не проходит там, где собирается код.
Часто дело в одной мелочи: вы забыли добавить await.
Это довольно распространённая ошибка в асинхронном коде, который чего-то ждёт. В тестах из-за неё могут возникать так называемые «гонки» (когда что-то происходит не по порядку) и результаты становятся ненадёжными.
Проблема: пропущенные await’ы
Рассмотрим простой пример. Мы нажимаем на кнопку и ожидаем появления модального окна:
await page.getByRole('button', { name: 'Submit' }).click();
expect(page.getByRole('dialog')).toBeVisible(); // ❌ Missing 'await'
Вызов expect() возвращает промис, но мы не ожидали его (не было await‘а), поэтому Playwright переходит к следующему действию до того, как завершится предыдущее. Иногда модальное окно появляется вовремя. Иногда нет. Что мы получаем? Ненадежный тест.
Еще хуже то, что VS Code по дефолту не предупреждает об этом.
Фикс: ESLint, который подхватывает «плавающие» промисы
К счастью, можно настроить правило в TypeScript ESLint, которое поможет отлавливать такие ошибки автоматически. Правило называется @typescript-eslint/no-floating-promises, и оно выделяет любой промис, который не обрабатывается должным образом.
Как его настроить:
1. Установите ESLint и поддержку TypeScript
Если вы этого еще не сделали (убедитесь, что у вас есть ESLint v9+ и TypeScript):
npm install --save-dev eslint typescript-eslint typescript
2. Создайте файл tsconfig.json (если необходимо)
Правило @typescript-eslint/no-floating-promises требует информации о типе. Убедитесь, что в корне проекта есть файл tsconfig.json. Если нет, создайте базовый:
// tsconfig.json
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true // Important for linting without compiling
// Здесь можете добавить другие опции, релевантные вашему проекту (например "jsx": "react-jsx")
},
"include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.mjs"],
"exclude": ["node_modules"]
}
3. Настройте ESLint в eslint.config.mjs
Создайте или обновите eslint.config.mjs в корне проекта, чтобы включить линтинг с учетом типов:
// eslint.config.mjs
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
export default tseslint.config(
eslint.configs.recommended,
// Используйте recommendedTypeChecked для правил, в которых нужен тип
...tseslint.configs.recommendedTypeChecked,
{
// Настраиваем опции языка для проверки типа
languageOptions: {
parserOptions: {
project: true, // Use the tsconfig.json in the root
},
},
rules: {
'@typescript-eslint/no-floating-promises': 'error',
// Здесь добавляем другие правила
},
},
{
// Здесь указываем, какие файлы и папки игнорировать
ignores: ['dist/**', 'node_modules/**', 'playwright.config.ts'], // Adjust as needed
}
);
В ESLint v9+ используется новый формат файла конфигурации. Для более подробной информации почитайте документацию ESLint.
4. Установите расширение ESLint VS Code
Чтобы видеть ошибки непосредственно в IDE, убедитесь, что в VS Code установлено официальное расширение ESLint. Найдите dbaeumer.vscode-eslint в представлении «Расширения» и нажмите «Установить».
Если предупреждения ESLint не появляются сразу после изменения конфигурации, попробуйте перезагрузить окно VS Code (Команды: Developer: Перезагрузить окно).
Результат: мгновенный фидбек в VS Code
Теперь, если вы забыли где-то await, VS Code подчеркнет эту проблему до запуска теста.
Вот исправленная версия кода из примера:
await page.getByRole('button', { name: 'Submit' }).click();
await expect(page.getByRole('dialog')).toBeVisible(); // ✅ Correct!
Одно пропущенное ключевое слово может иметь огромное значение, но теперь вы больше никогда его не пропустите.
Бонус: добавьте проверку типов в CI-конвейер
Хотите дополнительную защиту? Добавьте проверку TypeScript в ваш CI-конвейер:
npx eslint && tsc
Он гарантирует, что ваш код компилируется чисто, и выявляет проблемы с асинхронностью, если вы включили строгие настройки.
Скажите гудбай нестабильным тестам
И это всё. Больше никаких проблем с await, которые так мешают в Playwright. Настройте ESLint, и это сэкономит много времени.
