Playwright Tutorial | Perform Mouse Hover action in Playwright

• 00:00 Theoretical Explanation of Mouse Over Action
• 03:40 Practical Demonstration of Mouse Over Action
• 09:54 Summary and Conclusion

Welcome to the "Playwright with TypeScript" series on the Wish Infinite channel! In this video, we'll be exploring how to perform a mouse over action using Playwright.

Theoretical Explanation

To perform a mouse over action on the matching element in Playwright, we use the hover method. The syntax for this action requires the await keyword followed by the locator of the element, and then the .hover method. Here's a quick overview of the steps Playwright performs during this action:

1. Actionability Checks: Ensures the element is visible, stable (no ongoing animations), and capable of receiving events (not obscured by other elements).
2. Scrolling into View: Scrolls the element into view if it’s not visible on the page.
3. Hover Execution: Uses the page mouse to hover over the center of the element or a specified position.
4. Navigation Handling: Waits for any initiated navigations to either succeed or fail.

You can also use the force option to bypass actionability checks if needed.

Practical Example

In this video, we'll show a practical example using the demo website demo.opencart.com. Specifically, we'll perform a mouse over action on the "Components" element. Here's a step-by-step guide:

1. Script Setup: A test script file practice_mouse_over.spec.ts is created in VS Code.
2. Script Imports: Import the test module from Playwright.
3. Script Initialization: Initialize a test block with the name "Practice Mouse Over Action".
4. Website Navigation: Open the website using page.goto method.
5. Element Locator: Use the Pick Locator tool to find the locator for the "Components" element.
6. Hover Action: Perform the mouse over action using await page.locator(‘locator’).hover().

Example code:

import { test } from '@playwright/test';

test('Practice Mouse Over Action', async ({ page }) => {
  await page.goto('https://demo.opencart.com');
  await page.locator('locator_for_components').hover();
});

Additional Actions

After performing the hover action, you can execute further operations such as clicking on the element or making assertions. For example, to click on the "Show All Components" link:

await page.locator('locator_for_show_all_components').click();

Force Option

You can bypass actionability checks by passing the force option in the hover method:

await page.locator('locator').hover({ force: true });

Conclusion

In summary, the hover method in Playwright allows for efficient mouse over actions with multiple configurable options. Explore the official Playwright documentation for more details and options. If you have any questions or need further clarification, feel free to leave a comment below.

Stay tuned for more tutorials, and don't forget to like, share, and subscribe to the channel!

Click on the first card to watch the next video, or click on the second card to access the entire Playwright tutorial playlist. Thank you for watching, and have a great day!