{"id":3656,"date":"2025-01-17T09:44:17","date_gmt":"2025-01-17T09:44:17","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/17\/verify-tool-tip-set-focus-to-element-using-playwright-java\/"},"modified":"2025-01-17T09:44:17","modified_gmt":"2025-01-17T09:44:17","slug":"verify-tool-tip-set-focus-to-element-using-playwright-java","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/17\/verify-tool-tip-set-focus-to-element-using-playwright-java\/","title":{"rendered":"Verify \u201cTool Tip\u201d, Set focus to element using Playwright Java"},"content":{"rendered":"<p><html><body><\/p>\n<section class=\"tcb-post-content tcb-shortcode thrv_wrapper\" data-css=\"tve-u-16ec5d248bb\">\n<div class=\"tve_flt tcb-style-wrap\" id=\"tve_flt\">\n<div class=\"tve_shortcode_editor tar-main-content\" data-post-id=\"3656\" id=\"tve_editor\">\n<div class=\"thrv_wrapper thrv_text_element\">\n<p><em>In this blog we will be utilizing Playwright Java to verify title of \u201ctool tip\u201d and we will see how to set focus to a particular element.<\/em><\/p>\n<div class=\"code-block code-block-2\" style=\"margin: 8px auto; text-align: center; display: block; clear: both;\">\n<p><!-- horizontal responsive 2 --><br \/>\n<ins class=\"adsbygoogle\" data-ad-client=\"ca-pub-3231318496783163\" data-ad-format=\"auto\" data-ad-slot=\"2788468763\" data-full-width-responsive=\"true\" style=\"display:block\"><\/ins>\n<\/div>\n<p><strong>Topics that we will cover:<\/strong><\/p>\n<ul>\n<li>Assert tool tip<\/li>\n<li>Set focus to an element<\/li>\n<li>Source code (tool tip)<\/li>\n<li>Source code (focus an element)<\/li>\n<\/ul>\n<p><strong>Assert tool tip<\/strong><\/p>\n<p>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.<\/p>\n<p>Go to <a class=\"\" href=\"https:\/\/practice.expandtesting.com\/tooltips\" rel=\"noopener\" style=\"outline: none;\" target=\"_blank\">https:\/\/practice.expandtesting.com\/tooltips<\/a>\u00a0<\/p>\n<p>Mouse hover \u2018Tooltip on top\u2019. You can see a small description within orange colored rectangular box, see below<\/p>\n<\/div>\n<div class=\"thrv_wrapper tve_image_caption\" data-css=\"tve-u-19473a7e572\" style=\"\"><span class=\"tve_image_frame\"><img alt=\"\" class=\"tve_image wp-image-3659\" data-css=\"tve-u-19473a7f925\" data-height=\"378\" data-id=\"3659\" data-init-height=\"922\" data-init-width=\"1176\" data-width=\"482\" decoding=\"async\" height=\"378\" loading=\"lazy\" src=\"\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.15.22\u202fPM.png\" style=\"aspect-ratio: auto 1176 \/ 922;\" title=\"Screenshot 2025-01-17 at 3.15.22\u202fPM\" width=\"482\"\/><\/span><\/div>\n<div class=\"thrv_wrapper thrv_text_element\">\n<p>Inspect the mic, notice that the value of \u2018title\u2019 attribute matches the description of tool tip\u00a0<\/p>\n<\/div>\n<div class=\"thrv_wrapper tve_image_caption\" data-css=\"tve-u-19473a8b698\" style=\"\"><span class=\"tve_image_frame\"><img alt=\"\" class=\"tve_image wp-image-3660\" data-css=\"tve-u-19473a8c838\" data-height=\"183\" data-id=\"3660\" data-init-height=\"406\" data-init-width=\"1176\" data-width=\"531\" decoding=\"async\" height=\"183\" loading=\"lazy\" src=\"\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.16.12\u202fPM.png\" style=\"aspect-ratio: auto 1176 \/ 406;\" title=\"Screenshot 2025-01-17 at 3.16.12\u202fPM\" width=\"531\"\/><\/span><\/div>\n<div class=\"thrv_wrapper thrv_text_element\">\n<p>\u00a0This means we can fetch the value of \u2018title\u2019 attribute to assert the tool tip.\u00a0<\/p>\n<p>When we inspect \u2018Tooltip on top\u2019, the \u2018title\u2019 attribute cannot be seen in the inspection, however we can still fetch the value of \u2018title\u2019 attribute<\/p>\n<\/div>\n<div class=\"thrv_wrapper tve_image_caption\" data-css=\"tve-u-19473a9a88f\" style=\"\"><span class=\"tve_image_frame\"><img alt=\"\" class=\"tve_image wp-image-3661\" data-css=\"tve-u-19473a9bfd6\" data-height=\"185\" data-id=\"3661\" data-init-height=\"396\" data-init-width=\"1176\" data-width=\"549\" decoding=\"async\" height=\"185\" loading=\"lazy\" src=\"\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.17.16\u202fPM.png\" style=\"aspect-ratio: auto 1176 \/ 396;\" title=\"Screenshot 2025-01-17 at 3.17.16\u202fPM\" width=\"549\"\/><\/span><\/div>\n<div class=\"thrv_wrapper thrv_text_element\">\n<p>\u00a0See below. In line#30, we are fetching the \u2018title\u2019 attribute and storing it in a variable \u2018actualToolTipTitle\u2019. We than compare this value with the expected value (line#27) using if\/else loop. When we execute the below code, the assertion passes<\/p>\n<\/div>\n<div class=\"thrv_wrapper tve_image_caption\" data-css=\"tve-u-19473aa267e\" style=\"\"><span class=\"tve_image_frame\"><img alt=\"\" class=\"tve_image wp-image-3662\" data-css=\"tve-u-19473aa37ed\" data-height=\"361\" data-id=\"3662\" data-init-height=\"694\" data-init-width=\"1176\" data-width=\"612\" decoding=\"async\" height=\"361\" loading=\"lazy\" src=\"\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.18.02\u202fPM.png\" style=\"aspect-ratio: auto 1176 \/ 694;\" title=\"Screenshot 2025-01-17 at 3.18.02\u202fPM\" width=\"612\"\/><\/span><\/div>\n<div class=\"thrv_wrapper thrv_text_element\">\n<p>\u00a0This way we can assert the tool tip.<\/p>\n<p><strong>Set focus to an element<\/strong><\/p>\n<p>Go to <a class=\"\" href=\"https:\/\/demo.automationtesting.in\/Register.html\" rel=\"noopener\" style=\"outline: none;\" target=\"_blank\">https:\/\/demo.automationtesting.in\/Register.html<\/a>\u00a0<\/p>\n<p>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 \u00a0<\/p>\n<\/div>\n<div class=\"thrv_wrapper tve_image_caption\" data-css=\"tve-u-19473aabfb2\" style=\"\"><span class=\"tve_image_frame\"><img alt=\"\" class=\"tve_image wp-image-3663\" data-css=\"tve-u-19473aad48a\" data-height=\"332\" data-id=\"3663\" data-init-height=\"828\" data-init-width=\"1176\" data-width=\"472\" decoding=\"async\" height=\"332\" loading=\"lazy\" src=\"\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.18.40\u202fPM.png\" style=\"aspect-ratio: auto 1176 \/ 828;\" title=\"Screenshot 2025-01-17 at 3.18.40\u202fPM\" width=\"472\"\/><\/span><\/div>\n<div class=\"thrv_wrapper thrv_text_element\">\n<p>\u00a0 Let us suppose we want to focus on \u201cAddress\u201d field shown above. Let us first inspect this field and copy the css selector<\/p>\n<\/div>\n<div class=\"thrv_wrapper tve_image_caption\" data-css=\"tve-u-19473ab608f\" style=\"\"><span class=\"tve_image_frame\"><img alt=\"\" class=\"tve_image wp-image-3664\" data-css=\"tve-u-19473ab74ee\" data-height=\"499\" data-id=\"3664\" data-init-height=\"1064\" data-init-width=\"1176\" data-width=\"552\" decoding=\"async\" height=\"499\" loading=\"lazy\" src=\"\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.19.22\u202fPM.png\" style=\"aspect-ratio: auto 1176 \/ 1064;\" title=\"Screenshot 2025-01-17 at 3.19.22\u202fPM\" width=\"552\"\/><\/span><\/div>\n<div class=\"thrv_wrapper thrv_text_element\">\n<p>Execute.\u00a0<\/p>\n<p>Notice below that the cursor now points to \u201cAddress\u201d field. We can now type anything desired in this field<\/p>\n<\/div>\n<div class=\"thrv_wrapper tve_image_caption\" data-css=\"tve-u-19473ac084d\" style=\"\"><span class=\"tve_image_frame\"><img alt=\"\" class=\"tve_image wp-image-3665\" data-css=\"tve-u-19473ac201e\" data-height=\"560\" data-id=\"3665\" data-init-height=\"1216\" data-init-width=\"1176\" data-width=\"542\" decoding=\"async\" height=\"560\" loading=\"lazy\" src=\"\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.20.04\u202fPM.png\" style=\"aspect-ratio: auto 1176 \/ 1216;\" title=\"Screenshot 2025-01-17 at 3.20.04\u202fPM\" width=\"542\"\/><\/span><\/div>\n<div class=\"thrv_wrapper thrv_text_element\">\n<p>\u00a0Execute.<\/p>\n<p>Notice below that the cursor now points to \u201cFirst Name\u201d field.<\/p>\n<\/div>\n<div class=\"thrv_wrapper tve_image_caption\" data-css=\"tve-u-19473ac82bc\" style=\"\"><span class=\"tve_image_frame\"><img alt=\"\" class=\"tve_image wp-image-3666\" data-css=\"tve-u-19473ac92e3\" data-height=\"205\" data-id=\"3666\" data-init-height=\"554\" data-init-width=\"1176\" data-width=\"436\" decoding=\"async\" height=\"205\" loading=\"lazy\" src=\"\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.20.39\u202fPM.png\" style=\"aspect-ratio: auto 1176 \/ 554;\" title=\"Screenshot 2025-01-17 at 3.20.39\u202fPM\" width=\"436\"\/><\/span><\/div>\n<div class=\"thrv_wrapper thrv_text_element\">\n<p>\u00a0<\/p>\n<p>This is how we can use the \u2018focus\u2019 method.<\/p>\n<p><strong>Source code (tool tip)<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<p><\/p>\n<p><strong>import<\/strong> org.testng.annotations.AfterMethod;<\/p>\n<p><strong>import<\/strong> org.testng.annotations.BeforeMethod;<\/p>\n<p><strong>import<\/strong> org.testng.annotations.Test;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Browser;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Locator;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Page;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n<p><strong>public<\/strong><br \/>\n<strong>class<\/strong> Blog39_VerifyToolTip {<\/p>\n<p><strong>private<\/strong> Browser browser;<\/p>\n<p><strong>private<\/strong> Page page;<\/p>\n<p>@BeforeMethod<\/p>\n<p><strong>public<\/strong><br \/>\n<strong>void<\/strong> setUp() {<\/p>\n<p>Playwright playwright = Playwright.<em>create<\/em>();\u00a0<\/p>\n<p>browser = playwright.chromium().launch(<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>));<\/p>\n<p>page = browser.newPage();<\/p>\n<p>}<\/p>\n<p>@Test<\/p>\n<p><strong>public<\/strong><br \/>\n<strong>void<\/strong> test_1() {<\/p>\n<p>page.navigate(&#8220;https:\/\/practice.expandtesting.com\/tooltips&#8221;);<\/p>\n<p>String expectedToolTipTitle = &#8220;Tooltip on top&#8221;;<\/p>\n<p>Locator elem = page.locator(&#8220;#btn1&#8221;);<\/p>\n<p>String actualToolTipTitle = elem.getAttribute(&#8220;title&#8221;);<\/p>\n<p>System.<strong><em>out<\/em><\/strong>.println(&#8220;Actual Title of Tool Tip:&#8211;&gt;&#8221; + actualToolTipTitle);<\/p>\n<p><strong>if<\/strong>(actualToolTipTitle.equals(expectedToolTipTitle)) {\u00a0<\/p>\n<p>System.<strong><em>out<\/em><\/strong>.println(&#8220;Assertion Passed&#8221;);\u00a0<\/p>\n<p>}<\/p>\n<p><strong>else<\/strong>\u00a0<\/p>\n<p>System.<strong><em>out<\/em><\/strong>.println(&#8220;Assertion Failed&#8221;);\u00a0<\/p>\n<p>}<\/p>\n<p>@AfterMethod<\/p>\n<p><strong>public<\/strong><br \/>\n<strong>void<\/strong> tearDown() {<\/p>\n<p>page.pause();<\/p>\n<p>browser.close();<\/p>\n<p>page.close();<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p><\/p>\n<p><strong>Source code (focus an element)<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<p><\/p>\n<p><strong>import<\/strong> org.testng.annotations.AfterMethod;<\/p>\n<p><strong>import<\/strong> org.testng.annotations.BeforeMethod;<\/p>\n<p><strong>import<\/strong> org.testng.annotations.Test;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Browser;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Page;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n<p><\/p>\n<p><strong>public<\/strong><br \/>\n<strong>class<\/strong> Blog39_ElementFocus {<\/p>\n<p><strong>private<\/strong> Browser browser;<\/p>\n<p><strong>private<\/strong> Page page;<\/p>\n<p>@BeforeMethod<\/p>\n<p><strong>public<\/strong><br \/>\n<strong>void<\/strong> setUp() {<\/p>\n<p>Playwright playwright = Playwright.<em>create<\/em>();\u00a0<\/p>\n<p>browser = playwright.chromium().launch(<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>));<\/p>\n<p>page = browser.newPage();<\/p>\n<p>}<\/p>\n<p>@Test<\/p>\n<p><strong>public<\/strong><br \/>\n<strong>void<\/strong> test_1() {<\/p>\n<p>page.navigate(&#8220;https:\/\/demo.automationtesting.in\/Register.html&#8221;);<\/p>\n<p>page.focus(&#8220;#basicBootstrapForm &gt; div:nth-child(2) &gt; div &gt; textarea&#8221;);<\/p>\n<p>page.focus(&#8220;#basicBootstrapForm &gt; div:nth-child(1) &gt; div:nth-child(2) &gt; input&#8221;);<\/p>\n<p>}<\/p>\n<p>@AfterMethod<\/p>\n<p><strong>public<\/strong><br \/>\n<strong>void<\/strong> tearDown() {<\/p>\n<p>page.pause();<\/p>\n<p>browser.close();<\/p>\n<p>page.close();<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p><\/p>\n<p>Thanks.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"tcb_flag\" style=\"display: none\"><\/div>\n<\/section>\n<p><\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog we will be utilizing Playwright Java to verify title of \u201ctool tip\u201d 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,9],"tags":[],"class_list":["post-3656","post","type-post","status-publish","format-standard","hentry","category-java","category-playwright","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3656"}],"version-history":[{"count":0,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3656\/revisions"}],"wp:attachment":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}