19. Actions и навигация

Локаторы (Locators)

// Рекомендуемые локаторы (стабильные)
page.getByRole('button', { name: 'Submit' });
page.getByLabel('Email');
page.getByPlaceholder('Search...');
page.getByText('Welcome');
page.getByAltText('Logo');
page.getByTitle('Close dialog');
page.getByTestId('submit-btn');   // data-testid

// CSS и XPath (менее предпочтительны)
page.locator('.submit-button');
page.locator('#email-input');
page.locator('input[type="email"]');
page.locator('//button[@type="submit"]');

// Комбинирование
page.locator('.user-card').getByRole('button', { name: 'Edit' });
page.getByRole('listitem').filter({ hasText: 'Alice' });
page.locator('.card').first();
page.locator('.card').nth(2);
page.locator('.card').last();

Клики и взаимодействие

// Обычный клик
await page.click('button');
await page.getByRole('button').click();

// Двойной клик
await page.dblclick('.item');

// Правый клик
await page.click('.item', { button: 'right' });

// Клик по координатам
await page.click('.canvas', { position: { x: 100, y: 200 } });

// Hover
await page.hover('.dropdown-toggle');

// Drag and Drop
await page.dragAndDrop('#source', '#target');

// Focus
await page.focus('input[name="email"]');

Работа с формами

// Заполнить поле (очищает перед заполнением)
await page.fill('[name="email"]', '[email protected]');
await page.getByLabel('Email').fill('[email protected]');

// Тип (посимвольно)
await page.type('[name="search"]', 'hello', { delay: 50 });

// Очистить
await page.fill('[name="email"]', '');

// Нажать клавишу
await page.press('[name="email"]', 'Enter');
await page.press('body', 'Escape');

// Select
await page.selectOption('select[name="country"]', 'ru');
await page.selectOption('select', { label: 'Russia' });
await page.selectOption('select', ['ru', 'us']); // multi-select

// Checkbox
await page.check('[name="agree"]');
await page.uncheck('[name="agree"]');
await page.getByRole('checkbox').check();

// File input
await page.setInputFiles('input[type="file"]', './test-image.jpg');
await page.setInputFiles('input[type="file"]', ['./file1.pdf', './file2.pdf']);

// Загрузка файла через диалог
const [fileChooser] = await Promise.all([
  page.waitForEvent('filechooser'),
  page.click('button:has-text("Upload")'),
]);
await fileChooser.setFiles('./my-file.pdf');

Навигация

// Перейти по URL
await page.goto('https://example.com');
await page.goto('/login', { waitUntil: 'networkidle' });

// Назад / Вперёд
await page.goBack();
await page.goForward();

// Перезагрузить
await page.reload();

// Ждать URL
await page.waitForURL('/dashboard');
await page.waitForURL('**/dashboard', { timeout: 5000 });

// Ждать навигацию после действия
await Promise.all([
  page.waitForNavigation(),
  page.click('a[href="/next"]'),
]);

// Получить текущий URL
const url = page.url();

Ожидания

// Playwright автоматически ждёт элемент
// Явные ожидания только при необходимости

// Ждать видимость
await page.waitForSelector('.modal', { state: 'visible' });

// Ждать скрытие
await page.waitForSelector('.loader', { state: 'hidden' });

// Ждать появление текста
await page.waitForFunction(() => document.title.includes('Loaded'));

// Ждать сетевой запрос
const [response] = await Promise.all([
  page.waitForResponse('**/api/users'),
  page.click('button:has-text("Load Users")'),
]);
const data = await response.json();

// Ждать конкретный статус ответа
await page.waitForResponse(
  res => res.url().includes('/api/data') && res.status() === 200
);

// Timeout кастомный
await page.waitForSelector('.lazy-content', { timeout: 10000 });

Скроллинг

// Прокрутить к элементу
await page.locator('.footer').scrollIntoViewIfNeeded();

// Прокрутить страницу
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));

// Прокрутить внутри элемента
await page.locator('.scrollable-list').evaluate(el => el.scrollTop = 500);

Работа с iframes

const frame = page.frameLocator('#payment-iframe');
await frame.getByLabel('Card Number').fill('4242 4242 4242 4242');
await frame.getByLabel('Expiry').fill('12/26');
await frame.getByRole('button', { name: 'Pay' }).click();

Практические задания

1. Напиши тест для корзины: добавь товар → проверь количество → удали
2. Протестируй форму с file input (загрузка аватара)
3. Протестируй бесконечную прокрутку (scroll → loadMore)

Итоги

• getByRole, getByLabel — стабильные локаторы
• fill() для форм, click() для кнопок
• waitForResponse() — перехват API вызовов
• Promise.all() для действия + ожидания