Настройка VS Code для Playwright: расширения, настройки и советы по продуктивности

Официальное расширение Playwright для VS Code добавляет кнопку «Pick locator»: нажимаешь, кликаешь элемент в запущенном браузере, получаешь правильный локатор. Больше не нужно тратить время на ручное написание селекторов. Расширение также подключает дебаггер: можно поставить брейкпоинт и вводить await page.title() или await page.locator('...').isVisible() прямо в Debug Console, не перезапуская тест. Статья разбирает пять расширений которые стоит установить, настройки VS Code снижающие трение в работе, и ежедневные рабочие процессы по дебаггингу и записи тестов.

Необходимые расширения

1. Playwright Test for VS Code (официальное)

Издатель: Microsoft
ID расширения: ms-playwright.playwright

Единственное обязательное расширение. Добавляет:

• Сайдбар Test Explorer: все тесты организованы по файлам, запуск в один клик
• Запуск отдельного теста: кнопка воспроизведения рядом с любым блоком test(...)
• Дебаггинг тестов: брейкпоинты, пошаговое выполнение, инспекция состояния page
• Запись новых тестов: запуск Playwright Codegen прямо из VS Code
• Отображение браузера: запуск тестов с видимым браузером
• Pick locator: клик по элементу в браузере, получаешь правильный Playwright-локатор

После установки найди иконку Playwright в левом сайдбаре (выглядит как театральная маска). Тесты должны появиться автоматически если в корне проекта есть playwright.config.ts.

Как использовать

Открой панель Testing (Ctrl+Shift+P → "Show Testing"), разверни тестовые файлы и нажми ▶ для запуска или иконку жука для дебаггинга.

2. ESLint

ID расширения: dbaeumer.vscode-eslint

Подсвечивает проблемы в коде по мере набора. Для TypeScript/Playwright-проектов настраивается так:

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Создай .eslintrc.json:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "rules": {
    "no-unused-vars": "warn",
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

3. Prettier

ID расширения: esbenp.prettier-vscode

Автоматически форматирует код при сохранении. Нужен для единого стиля кода. Установка:

npm install -D prettier

Создай .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

В настройках VS Code включи форматирование при сохранении:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

4. GitLens

ID расширения: eamodio.gitlens

Показывает кто последний менял каждую строку, полную историю git, сравнение веток. Не специфично для Playwright, но незаменимо в командном проекте. Особенно полезно при дебаггинге: «кто изменил этот тест и почему?»

5. Error Lens

ID расширения: usernamehw.errorlens

Показывает ошибки TypeScript и ESLint прямо на строке где они произошли, а не только в панели Problems. Ошибки замечаешь быстрее.

Настройки VS Code для Playwright-проектов

Открой Settings JSON (Ctrl+Shift+P → "Open User Settings JSON") и добавь:

{
  // Форматирование при сохранении
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  // TypeScript
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  
  // Авто-импорты
  "typescript.suggest.autoImports": true,
  
  // Чище редактор
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.rulers": [100],
  
  // Ассоциации файлов
  "files.associations": {
    "*.spec.ts": "typescript"
  },
  
  // Терминал
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  
  // Проводник
  "explorer.confirmDelete": false
}

Playwright-специфичные рабочие процессы в VS Code

Запуск тестов из редактора

Три способа запустить тест. Панель Test Explorer: полный список тестов, запуск всех, запуск по файлу, запуск по тегу. Зелёная кнопка воспроизведения: наведи на строку test(, нажми ▶. Терминал: npx playwright test (используй флаги --headed, --debug).

Test Explorer лучше подходит для запуска полного сьюта. Встроенная кнопка воспроизведения подходит для быстрого запуска одного теста.

Дебаггинг падающего теста

1. Поставь брейкпоинт на падающей строке (клик по левому отступу)
2. В Test Explorer кликни правой кнопкой по тесту → "Debug Test"
3. VS Code остановится на брейкпоинте
4. В Debug Console можно вводить команды Playwright:
   • await page.title(): текущий заголовок страницы
   • await page.locator('[data-testid="btn"]').isVisible(): состояние элемента
   • page.url(): где сейчас Playwright

Это намного эффективнее чем добавлять console.log и перезапускать тест.

Playwright Inspector из VS Code

Правый клик по тесту → "Debug Test". Либо запусти PWDEBUG=1 npx playwright test в терминале.

Playwright Inspector открывается рядом с браузером. Можно пошагово проходить действия, видеть что возвращает локатор в реальном времени и выбирать новые локаторы кликом по элементам.

Запись нового теста

1. В сайдбаре Playwright-расширения нажми "Record new"
2. Откроется браузер
3. Выполни действия которые хочешь автоматизировать
4. Нажми "Copy" чтобы получить сгенерированный код
5. Вставь в файл теста, потом доработай селекторы

Хороший способ получить отправную точку, но всегда доработай сгенерированные селекторы под атрибуты data-testid.

Структура проекта в VS Code

Чистая структура Playwright-проекта с которой VS Code удобно работает:

my-playwright-project/
├── tests/
│   ├── e2e/
│   │   ├── login.spec.ts
│   │   ├── checkout.spec.ts
│   ├── api/
│   │   ├── users-api.spec.ts
│   ├── fixtures/
│   │   ├── auth.fixture.ts
│   │   └── index.ts
├── pages/
│   ├── LoginPage.ts
│   ├── DashboardPage.ts
├── playwright.config.ts
├── tsconfig.json
├── package.json
└── .env

Проводник VS Code хорошо сворачивает папки, поэтому в такой структуре легко ориентироваться.

Горячие клавиши которые стоит знать

Самое важное для дебаггинга Playwright: F5 запускает дебаггинг, F10 переход через, F11 переход в, F5 снова продолжает до следующего брейкпоинта.

Работа с .env файлами

Не коммить секреты. Создай .env для локальных переменных окружения:

BASE_URL=https://staging.yourapp.com
ADMIN_EMAIL=admin@test.com
ADMIN_PASSWORD=TestAdmin1
API_KEY=your-test-api-key

Добавь в .gitignore:

.env
.env.local
.env.*.local

В конфиге Playwright:

import { defineConfig } from '@playwright/test';
import dotenv from 'dotenv';

dotenv.config();

export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
  },
});

Установи dotenv: npm install -D dotenv

Советы по продуктивности

Используй терминал внутри VS Code. Переключение на внешний терминал ломает рабочий поток. Встроенный терминал (Ctrl+`) остаётся в той же директории.

Разделяй панели. Тестовый файл слева, Page Object справа. View → Editor Layout → Two Columns.

Используй задачи для частых команд. Создай .vscode/tasks.json чтобы запускать npx playwright test одним шорткатом.

Дзен-режим для концентрации. View → Appearance → Zen Mode скрывает всё кроме редактора. Хорошо для написания тест-кейсов без отвлечений.

Правильная настройка VS Code убирает трение из ежедневной работы по автоматизации тестов. Начни с установки Playwright-расширения, всё остальное можно добавлять по мере необходимости.

→ См. также: Как установить Playwright: пошаговая инструкция | Файл конфигурации Playwright: все опции, которые нужно знать | Запуск тестов Playwright из CLI: флаги, фильтры и отладка | Playwright Codegen: записывайте тесты без написания кода