Playwright Java Tutorial: Web Automation Testing | How to perform Mouse Hover action?

In the previous Playwright tutorial, we learnt working with text fields. In this tutorial blog, we will learn to perform mocuse hover actions over a WebElement.

Mouse Hover Actions

It is the most common action that is normally used in the website on the navigation bars, probably to open the menu item list. A user hovers the mouse over the menu name and accordingly the sub-menus items are displayed. These sub-menus are finally clicked to navigate to the respective screen.

The following is an example of Mouse Hover on the LambdaTest e-commerce playground website. When the user hovers the mouse over the My account link, the sub-menus Login and Register are displayed.

Testing Mouse Hover Actions using Playwright Java

Mouse Hover actions can be performed using the hover() method provided by Playwright framework. This method performs hover over the matching element.

Let’s consider the following test scenarios to learn how to perform mouse hover action using Playwright Java

Test Scenario 1

1. Navigate to the home page of LambdaTest E-Commerce Playground website
2. Locate the My account link and perform mouse hover over it
3. Click on the Login link
4. Assert that the Login Page has the text “Returning Customer” on it

Implementation

A new test class named MouseHoverTest.java has been created in the existing project. The first step is setting up the test and configuring it to run on the Chrome browser in headed mode.

public class MouseHoverTest {

    private Playwright playwright;
    private Page page;
    //..

}

The following method — setup() will configure Playwright and set it up to run a new instance of Chrome browser.

@BeforeClass
public void setup() {
    this.playwright = Playwright.create();
    final Browser browser = playwright.chromium()
            .launch(new BrowserType.LaunchOptions()
             .setHeadless(false)
             .setChannel("chrome"));
    this.page = browser.newPage();
}

The setup() method has the @BeforeClass annotation mentioned over it. It means that this method will be executed before the execution of any test method in the current class. This will allow the configuration to take place smoothly before the test execution begins.

Likewise, the tearDown() method will be called after all the tests are executed. This will help in gracefully closing the browser sessions.

@AfterClass
public void tearDown() {
    this.page.close();
    this.playwright.close();
}

The test scenario is implemented by creating a new test method testMouseHoverOnMyAccountLink().

@Test
public void testMouseHoverOnMyAccountLink() {
    page.navigate("https://ecommerce-playground.lambdatest.io/");
    Locator myAccountLink = page.locator("#widget-navbar-217834 > ul > li:nth-child(6) > a");
    myAccountLink.hover();
    Locator loginLink = page.locator("#widget-navbar-217834 > ul > li:nth-child(6) > ul > li:nth-child(1) > a");
    loginLink.click();
    Locator pageHeader = page.getByRole(AriaRole.HEADING, new Page.GetByRoleOptions().setName("Returning Customer"));
    assertThat(pageHeader).hasText("Returning Customer");
}

This test method will navigate to the home page of the LambdaTest E-Commerce playground website and locate the My account link using the CSS Selector #widget-navbar-217834 > ul > li:nth-child(6) > a.

The hover() method will be called next that will perform Mouse Hover action and open the sub-menus. The Login link is displayed after the sub-menus are opened. In order to inspect the Login WebElement, we need to right click on the Login menu and then select the “Inspect” menu from the right click options.

The Login link is located using the CSS Selector and finally a click action is performed to navigate to the Login Page.

The assertion will be performed next to check that the Login Page was successfully navigated to. The getByRole() locator strategy is used to locate the Heading “Returning Customer” and perform assertion on it.

Locator pageHeader = page.getByRole(AriaRole.HEADING, 
new Page.GetByRoleOptions().setName("Returning Customer"));

assertThat(pageHeader).hasText("Returning Customer");

Test Execution

The following screenshot shows the successful test execution using IntelliJ IDE

Summary

In most of the websites like financial, banking, e-commerce menu items are displayed on which mouse hover action needs to be performed in order to open the sub-menus. It is an important step in test automation and equally important to learn performing mouse hovers. I hope this tutorial blog covers this important step and helps us smoothly perform the mouse hover action.

I would recommend trying this at your end.

Happy Testing!