Mouse Hover Action in playwright

 In this example, we will explore how to perform mouse hover actions using Playwright, illustrated with a practical example. In Playwright, performing a mouse hover action is pretty straightforward using the .hover() method. This method moves the mouse over the center of the element, which can trigger things like tooltips, dropdowns, or other hover-dependent UI behavior.

✅ Syntax

// Hover over the products dropdown toggle
  await page.locator("#products-dd-toggle").hover();

OR 

await page.hover(selector);

How to perform Mouse Hover Action in playwright

Mouse hover refers to the action of moving the mouse pointer over a specific element on a webpage without clicking.

simple example demonstrating how to perform mouse hover actions using Playwright:

// @ts-check
import { test, expect } from '@playwright/test';

test("mouse hover example", async ({ page }) => {
    await page.goto("https://www.browserstack.com/guide/mouse-hover-in-selenium");
  
    // Hover over the products dropdown toggle
    await page.locator("#products-dd-toggle").hover();

    // Hover over the 'Live' link within the dropdown
    await page.locator("//a[@title='Live']//div[contains(text(),'Cross')]").hover(); 
   
  });

💡 Tips

1. If the element isn't visible right away, make sure it’s present in the DOM before calling .hover().
2. Combine hover() with waitForSelector() when waiting for hover-triggered elements.

✅ Real World Use cases

1. Testing navigation menus with dropdowns.
2. Triggering hover cards/tooltips for validation.
3. Activating hover animations or effects for visual tests.

Mouse hover actions in Playwright provide a powerful way to simulate user interactions and validate UI behavior effectively. With tools like Playwright, automating these tests becomes straightforward and efficient, allowing teams to focus on building robust applications.