Menus that appear on hover. Tooltips that show on mouseover. Preview cards that pop up when you rest your cursor. These are all hover interactions. In Playwright, you use locator.hover(). Simple. But there are gotchas.
import { test, expect } from '@playwright/test';
test('hover shows tooltip', async ({ page }) => {
await page.goto('/topics/hovers');
// Hover over the element
await page.getByTestId('info-icon').hover();
// Tooltip should now be visible
await expect(page.getByRole('tooltip')).toBeVisible();
await expect(page.getByRole('tooltip')).toHaveText('This is additional information');
});
test('hover reveals dropdown menu', async ({ page }) => {
await page.goto('/topics/hovers');
// Hover over the menu trigger
await page.getByRole('button', { name: 'Account' }).hover();
// Dropdown menu appears
const menu = page.getByRole('menu');
await expect(menu).toBeVisible();
// Click an item in the dropdown
await menu.getByRole('menuitem', { name: 'Settings' }).click();
await expect(page).toHaveURL(/\/settings/);
});import { test, expect } from '@playwright/test';
test('hover shows user profile card', async ({ page }) => {
await page.goto('/topics/hovers');
// Hover over username
await page.getByText('@shivam').hover();
// Profile card appears after a short delay
const card = page.getByTestId('profile-card');
await expect(card).toBeVisible();
await expect(card.getByText('Shivam Kumar')).toBeVisible();
await expect(card.getByText('QA Engineer')).toBeVisible();
// Move mouse away -- card should disappear
await page.mouse.move(0, 0);
await expect(card).not.toBeVisible();
});Some tooltips use role="tooltip" in the DOM. Use getByRole('tooltip') to find them. For custom tooltips without proper ARIA roles, use getByTestId or text locators. Always check what ARIA role your tooltip uses before writing the locator.
Hover does not work in mobile emulation. Touch devices do not have hover events. If your tests run on mobile viewports, you need a different approach -- usually a tap or long-press. Check your playwright.config.ts projects to know which devices you target.
Q: How do you verify tooltip text in Playwright?
A: I hover over the trigger element using locator.hover(), then assert the tooltip is visible with expect(tooltip).toBeVisible(). I locate tooltips using getByRole('tooltip') if they have proper ARIA roles, or getByTestId for custom ones. To verify the tooltip disappears, I move the mouse away with page.mouse.move(0, 0) and assert not.toBeVisible(). One caveat: hover does not work in mobile emulation since touch devices do not have hover events.
Key Point: Use locator.hover() to trigger hover effects. Verify tooltip visibility and text. Move mouse away to verify disappearance. Hover does not work in mobile emulation.