Verify “Tool Tip”, Set focus to element using Playwright Java

In this blog we will be utilizing Playwright Java to verify title of “tool tip” and we will see how to set focus to a particular element.

Topics that we will cover:

Assert tool tip
Set focus to an element
Source code (tool tip)
Source code (focus an element)

Assert tool tip

When a user hovers over or clicks on an item, a tooltip in the GUI appears, providing additional information about that item. In close proximity to the element, you will typically find a small rectangular box that contains text or image, offering valuable context or clarification regarding its purpose or function. To provide users with quick help or guidance on software usage, tooltips are commonly integrated into web applications.

Go to https://practice.expandtesting.com/tooltips

Mouse hover ‘Tooltip on top’. You can see a small description within orange colored rectangular box, see below

Inspect the mic, notice that the value of ‘title’ attribute matches the description of tool tip

This means we can fetch the value of ‘title’ attribute to assert the tool tip.

When we inspect ‘Tooltip on top’, the ‘title’ attribute cannot be seen in the inspection, however we can still fetch the value of ‘title’ attribute

See below. In line#30, we are fetching the ‘title’ attribute and storing it in a variable ‘actualToolTipTitle’. We than compare this value with the expected value (line#27) using if/else loop. When we execute the below code, the assertion passes

This way we can assert the tool tip.

Set focus to an element

Go to https://demo.automationtesting.in/Register.html

You would notice that none of the fields is in focus viz the cursor is not blinking in any field. Sometimes we may want to focus a specific field before clicking/typing onto that field

Let us suppose we want to focus on “Address” field shown above. Let us first inspect this field and copy the css selector

Execute.

Notice below that the cursor now points to “Address” field. We can now type anything desired in this field

Execute.

Notice below that the cursor now points to “First Name” field.

This is how we can use the ‘focus’ method.

Source code (tool tip)

package com.rsa.playwrightjava;

import org.testng.annotations.AfterMethod;

import org.testng.annotations.BeforeMethod;

import org.testng.annotations.Test;

import com.microsoft.playwright.Browser;

import com.microsoft.playwright.BrowserType;

import com.microsoft.playwright.Locator;

import com.microsoft.playwright.Page;

import com.microsoft.playwright.Playwright;

public class Blog39_VerifyToolTip {

private Browser browser;

private Page page;

@BeforeMethod

public void setUp() {

Playwright playwright = Playwright.create();

browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));

page = browser.newPage();

}

@Test

public void test_1() {

page.navigate("https://practice.expandtesting.com/tooltips");

String expectedToolTipTitle = "Tooltip on top";

Locator elem = page.locator("#btn1");

String actualToolTipTitle = elem.getAttribute("title");

System.out.println("Actual Title of Tool Tip:-->" + actualToolTipTitle);

if(actualToolTipTitle.equals(expectedToolTipTitle)) {

System.out.println("Assertion Passed");

}

else

System.out.println("Assertion Failed");

}

@AfterMethod

public void tearDown() {

page.pause();

browser.close();

page.close();

}

Source code (focus an element)