This step-by-step guide will show you how to hover over element in Playwright using the hover() method. Learn how to simulate mouse hover actions to reveal hidden elements or trigger tooltips in your automation tests.
When automating UI tests, it’s essential to handle hover over element interactions, especially for dynamic elements like dropdowns, tooltips, hidden buttons, and animated components. These elements are often triggered only when a user hovers over them, so simulating that interaction is crucial for accurate test coverage.
Playwright provides powerful and effective methods to test hover effects, making it easy to validate elements that appear or animate on hover.
In this guide, you’ll learn how to hover over an element in Playwright using the hover() method with practical examples. We’ll also cover advanced techniques such as force hovering, hovering at specific positions, and simulating mouse movement, all with easy-to-follow examples.
Hover Over Element Using Hover() Method In Playwright
The simplest and most effective way to hover over an element in Playwright is by using the hover() method. This method simulates a mouse hover over the specified element, allowing you to interact with dynamic content triggered on hover.
Let’s see how the hover() method works in Playwright with a practical example.
Example of Hover Over Element Using Hover() method in Playwright
const { test, expect } = require('@playwright/test');
test('Example: Hover over element in playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2015/03/chart.html');
//Locate and hover element.
await page.getByRole('link', { name: 'Hover over me' }).hover();
//Locate tooltip and wait for visible
const tooltip = page.locator('.ui-tooltip-content');
await expect(tooltip).toBeVisible();
//fetch the tooltip text and log in console
const tooltipText = await tooltip.innerText();
console.log('Text of tooltip is:', tooltipText);
});
Code Breakdown
await page.getByRole('link', { name: 'Hover over me' }).hover();- This line finds a link element by its accessible role (link) and visible name (Hover over me) using Playwright’s built-in accessibility selectors.
const tooltip = page.locator('.ui-tooltip-content');- This line defines a locator for the tooltip element, identified here by the CSS class .ui-tooltip-content.
await expect(tooltip).toBeVisible();- Waits and asserts that the tooltip becomes visible after the hover action. This verifies that the hover interaction successfully triggered the tooltip display.
const tooltipText = await tooltip.innerText();- This line retrieves the visible text content of the tooltip using the innerText() method. It waits until the tooltip is present and extracts the text for verification or logging.
console.log('Text of tooltip is:', tooltipText);- Outputs the tooltip text to the console. This is helpful for debugging or validating that the tooltip content is correct.
Advanced Hover Techniques
Force Hover
If an element is hidden or not interactable by default, and a regular hover() action doesn’t work, you can use force hover in Playwright. This forces the hover action even if the element isn’t visible or hoverable in the usual way.
await page.locator('.element-hover').hover({ force: true });Hover at a Specific Position
If you need to hover over a specific position within an element, such as the top-left corner or a custom offset, you can pass x and y coordinates to the hover() method in Playwright. This allows you to simulate a more precise mouse interaction.
await page.locator('.large-image').hover({
position: { x: 50, y: 100 } // Hover at (50px, 100px)
});Simulate Mouse Movement
If you want to simulate a mouse movement in Playwright automation, independent of element selectors, you can use the mouse.move() method along with x and y coordinates. This allows you to move the virtual mouse pointer to any position on the page.
const element = await page.locator('.slider').boundingBox();
await page.mouse.move(
element.x + element.width / 2, // Center X
element.y + element.height / 2 // Center Y
);Final Thoughts
In this guide, we learned how to hover over elements using the hover() method in Playwright. We also explored advanced techniques such as force hover, hovering at specific positions, and simulating mouse movements using mouse.move().
You can use any of these methods in your Playwright automation tests based on your specific testing needs.
Related Articles
- Wait for Element to Be Enabled in Playwright
- Check Element Enabled in Playwright
- Check if Checkbox is Checked or Not in Playwright
Hi, I’m Aravind, a seasoned Automation Test Engineer with 17+ years of industry experience. I specialize in tools like Selenium, JMeter, Appium, and Excel automation. Through this blog, I share practical tutorials, tips, and real-world insights to help testers and developers sharpen their automation skills.
