20. Assertions в Playwright

Web-first Assertions

Playwright использует автоматическое ожидание в assertions — не нужно явно ждать элементы.

// ─── Страница ──────────────────────────────────────────────
await expect(page).toHaveURL('/dashboard');
await expect(page).toHaveURL(/dashboard/);
await expect(page).toHaveTitle('My App — Dashboard');
await expect(page).toHaveTitle(/my app/i);

// ─── Локатор (элемент) ─────────────────────────────────────
const button = page.getByRole('button', { name: 'Submit' });

await expect(button).toBeVisible();
await expect(button).toBeHidden();
await expect(button).toBeEnabled();
await expect(button).toBeDisabled();
await expect(button).toBeFocused();
await expect(button).toBeEditable();
await expect(button).toBeChecked();     // checkbox
await expect(button).not.toBeChecked();

// ─── Текст ─────────────────────────────────────────────────
await expect(page.locator('h1')).toHaveText('Welcome, Alice');
await expect(page.locator('.message')).toContainText('success');
await expect(page.locator('.items')).toHaveText(['Item 1', 'Item 2', 'Item 3']);

// ─── Атрибуты ──────────────────────────────────────────────
await expect(button).toHaveAttribute('type', 'submit');
await expect(page.locator('input')).toHaveValue('[email protected]');
await expect(page.locator('input')).toHaveValue(/alice/);
await expect(page.locator('select')).toHaveValue('ru');

// ─── CSS ───────────────────────────────────────────────────
await expect(button).toHaveClass('btn-primary');
await expect(button).toHaveClass(/btn/);
await expect(page.locator('.card')).toHaveCSS('background-color', 'rgb(0, 0, 0)');

// ─── Количество ────────────────────────────────────────────
await expect(page.locator('.product-card')).toHaveCount(12);

// ─── Screenshot (визуальный тест) ──────────────────────────
await expect(page).toHaveScreenshot('homepage.png');
await expect(page.locator('.chart')).toHaveScreenshot('chart.png');

Мягкие assertions (Soft Assertions)

// Продолжает тест после ошибки, собирает все ошибки
test('check all fields', async ({ page }) => {
  await page.goto('/profile');

  await expect.soft(page.locator('h1')).toHaveText('Profile');
  await expect.soft(page.locator('.avatar')).toBeVisible();
  await expect.soft(page.locator('.bio')).not.toBeEmpty();
  await expect.soft(page.locator('.email')).toContainText('@');

  // Если ни одна soft assertion не прошла — тест провалится в конце
});

Timeout для конкретного assertion

// Увеличить timeout для медленных операций
await expect(page.locator('.loaded-chart')).toBeVisible({
  timeout: 15000,
});

// Уменьшить timeout (быстрый fail)
await expect(page.locator('.cached-data')).toBeVisible({
  timeout: 500,
});

Проверка сетевых запросов

test('API called with correct data', async ({ page }) => {
  // Перехватить запрос
  const requestPromise = page.waitForRequest(req =>
    req.url().includes('/api/users') && req.method() === 'POST'
  );

  await page.goto('/register');
  await page.fill('[name="email"]', '[email protected]');
  await page.click('button[type="submit"]');

  const request = await requestPromise;
  const body = request.postDataJSON();

  expect(body).toMatchObject({ email: '[email protected]' });
});

test('API response is correct', async ({ page }) => {
  const responsePromise = page.waitForResponse('/api/products');

  await page.goto('/products');

  const response = await responsePromise;
  expect(response.status()).toBe(200);

  const data = await response.json();
  expect(data).toHaveLength(10);
});

Мокирование API в Playwright

// Перехватить и вернуть мок-ответ
test('shows error message on API fail', async ({ page }) => {
  await page.route('**/api/users', route => {
    route.fulfill({
      status: 500,
      contentType: 'application/json',
      body: JSON.stringify({ error: 'Server Error' }),
    });
  });

  await page.goto('/users');
  await expect(page.getByRole('alert')).toContainText('Server Error');
});

// Перехватить и модифицировать ответ
await page.route('**/api/products', async route => {
  const response = await route.fetch();
  const json = await response.json();

  // Добавить тестовый продукт
  json.push({ id: 999, name: 'Test Product' });

  await route.fulfill({ response, body: JSON.stringify(json) });
});

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

1. Протестируй таблицу данных: количество строк, содержимое ячеек
2. Замокируй API и проверь отображение ошибки сервера
3. Используй soft assertions для проверки нескольких элементов страницы

Итоги

• Web-first assertions автоматически ждут
• toHaveText, toBeVisible, toHaveURL — самые частые
• Soft assertions — когда нужно проверить всё и увидеть все ошибки
• page.route() — мокирование API на уровне сети