Файлы, диалоги, трейсы и мобильная эмуляция

Набор практичных приёмов: загрузка файлов, всплывающие диалоги, отладка через трейсы и эмуляция мобильного устройства.

Эти возможности нужны не в каждом тесте, но без них не обойтись в реальных сценариях — от загрузки аватара до отладки упавшего теста в CI.

Загрузка файлов

Для <input type="file"> используют setInputFiles — путь к файлу подставляется напрямую, без открытия системного окна выбора файла (которое автоматизировать было бы сложно).

await page.getByLabel('Аватар').setInputFiles('tests/fixtures/avatar.png');
await expect(page.getByText('avatar.png')).toBeVisible();

// несколько файлов
await page.getByLabel('Документы').setInputFiles([
  'tests/fixtures/doc1.pdf',
  'tests/fixtures/doc2.pdf',
]);

Диалоги: alert, confirm, prompt

Браузерные диалоги (alert, confirm) блокируют страницу, поэтому обработчик вешают заранее — до действия, которое их вызовет.

// заранее решаем, что нажать в диалоге
page.on('dialog', (dialog) => dialog.accept());

await page.getByRole('button', { name: 'Удалить аккаунт' }).click();
// confirm появился — обработчик нажал ОК автоматически

Для отмены — dialog.dismiss(); прочитать текст — dialog.message(). Без обработчика Playwright по умолчанию отклоняет диалог, чтобы тест не завис.

Скриншоты

Скриншот помогает увидеть состояние страницы — особенно в CI, где браузер невидим.

await page.screenshot({ path: 'screenshot.png' });            // вся страница
await page.getByRole('main').screenshot({ path: 'main.png' }); // один элемент

Трейсы: главный инструмент отладки

Трейс — это полная запись прогона: снимки DOM на каждом шаге, действия, сетевые запросы, консоль.

Когда тест упал в CI и непонятно почему, трейс показывает всё по шагам. Включается в конфиге.

// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'on-first-retry',  // записывать трейс при первом ретрае
  },
});

Открыть записанный трейс — командой trace viewer:

npx playwright show-trace trace.zip

Откроется интерфейс с таймлайном: можно «промотать» прогон, навести на любой шаг и увидеть снимок страницы в этот момент, посмотреть, какие запросы шли и что было в консоли. Для расследования флаки-тестов это незаменимо: вы буквально видите, в каком состоянии была страница, когда тест упал.

Мобильная эмуляция

Playwright умеет притворяться мобильным устройством: задаёт размер экрана, user-agent и тач-события. Готовые пресеты лежат в devices.

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

test.use({ ...devices['iPhone 13'] });

test('мобильное меню работает', async ({ page }) => {
  await page.goto('/');
  // на узком экране виден бургер-меню
  await page.getByRole('button', { name: 'Меню' }).click();
  await expect(page.getByRole('navigation')).toBeVisible();
});

Чаще мобильную эмуляцию настраивают на уровне проекта в конфиге — об этом в следующем разделе.

Итог

• setInputFiles загружает файлы без системного окна.
• Обработчик диалога вешают до действия; accept/dismiss решают за пользователя.
• Трейс записывает прогон целиком; show-trace открывает trace viewer — лучший инструмент отладки.
• Мобильную эмуляцию задают через готовые пресеты devices.