Наведение курсора и hover эффекты

Одной из важнейших задач при автоматизации тестирования веб-приложений является проверка взаимодействия с элементами интерфейса. Одним из часто встречающихся взаимодействий является наведение курсора мыши на элементы, что вызывает различные эффекты, такие как изменение стилей, показ всплывающих подсказок, изменение содержимого или активизация кнопок. В Playwright, инструменте для автоматизации тестирования веб-приложений, взаимодействие с hover-эффектами выполняется с помощью различных методов API, которые позволяют имитировать действия пользователя.

Базовые принципы работы с hover в Playwright

Playwright предоставляет несколько методов для работы с hover-эффектами. В первую очередь, для наведения курсора на элемент используется метод hover(), который позволяет выполнить действия по аналогии с реальным пользователем.

const { test, expect } = require('@playwright/test');

test('hover effect', async ({ page }) => {
  await page.goto('https://example.com');
  const button = await page.locator('#hover-button');

  // Наведение курсора на элемент
  await button.hover();

  // Проверка, что элемент изменился
  const tooltip = await page.locator('#tooltip');
  await expect(tooltip).toBeVisible();
});

В приведённом примере происходит наведение курсора на кнопку с id hover-button, и проверяется, что после наведения отображается элемент с id tooltip. Метод hover() можно использовать для любых элементов, которые поддерживают hover-эффекты.

Работа с динамическими эффектами и задержками

В некоторых случаях элементы могут быть не сразу видимыми после наведения курсора, так как для их появления требуется время (например, анимации или задержки). Playwright позволяет учитывать эти моменты, используя методы ожидания и задержки.

test('hover with delay', async ({ page }) => {
  await page.goto('https://example.com');
  const button = await page.locator('#hover-button');

  // Наведение курсора на элемент
  await button.hover();

  // Ожидание, пока элемент станет видимым после наведения
  await page.waitForTimeout(500); // Ждём 500 миллисекунд

  const tooltip = await page.locator('#tooltip');
  await expect(tooltip).toBeVisible();
});

Использование waitForTimeout() позволяет явно задать задержку, но Playwright предоставляет и другие способы синхронизации с состоянием элементов, такие как waitForSelector(), которые предпочтительнее в реальных тестах.

await page.locator('#tooltip').waitFor({ state: 'visible' });

Этот код автоматически подождёт до тех пор, пока элемент не станет видимым, что предпочтительнее, чем использовать жёсткие временные задержки.

Работа с элементами, которые появляются по ховеру

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

Пример теста с элементом, который появляется после наведения:

test('hover reveals menu', async ({ page }) => {
  await page.goto('https://example.com');
  const menuButton = await page.locator('#menu-button');

  // Наведение курсора на кнопку меню
  await menuButton.hover();

  // Ожидание появления раскрытого меню
  const menu = await page.locator('#dropdown-menu');
  await expect(menu).toBeVisible();
});

Здесь элемент с id dropdown-menu появляется только после наведения на кнопку с id menu-button. Тест проверяет, что меню становится видимым после выполнения действия hover.

Проверка изменения стилей при наведении

Многие сайты используют изменения стилей (например, изменение цвета фона или текста) при наведении курсора на элементы. Playwright позволяет проверить такие изменения с помощью методов evaluate() и isVisible().

Пример проверки изменения стиля:

test('hover changes button color', async ({ page }) => {
  await page.goto('https://example.com');
  const button = await page.locator('#hover-button');

  // Получаем начальный стиль кнопки
  const initialColor = await button.evaluate(el => window.getComputedStyle(el).backgroundColor);

  // Наведение курсора на кнопку
  await button.hover();

  // Получаем новый стиль кнопки
  const hoverColor = await button.evaluate(el => window.getComputedStyle(el).backgroundColor);

  // Проверка, что цвет фона изменился
  expect(initialColor).not.toBe(hoverColor);
});

Этот тест проверяет, что цвет фона кнопки меняется при наведении курсора, сравнив начальный и изменённый стиль элемента.

Взаимодействие с элементами, скрытыми по умолчанию

Для элементов, которые изначально скрыты (например, всплывающие окна или меню), важно учитывать, что Playwright должен иметь возможность взаимодействовать с ними только после их появления. Если элемент скрыт и не видим в DOM, Playwright не сможет выполнить с ним действия, такие как клик или наведение. В таких случаях стоит использовать стратегию ожидания видимости элемента.

test('hover reveals and clicks hidden element', async ({ page }) => {
  await page.goto('https://example.com');
  const menuButton = await page.locator('#menu-button');

  // Наведение на кнопку, чтобы отобразить скрытое меню
  await menuButton.hover();

  const menuItem = await page.locator('#hidden-item');

  // Ожидание, пока элемент не станет видимым
  await menuItem.waitFor({ state: 'visible' });

  // Клик по элементу после его появления
  await menuItem.click();
});

Этот пример демонстрирует, как можно работать с элементами, которые становятся видимыми только после выполнения hover-эффекта. Для стабильных тестов важно правильно синхронизировать взаимодействие с элементами.

Практическое использование hover-эффектов в тестах

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

Оглавление