{"id":3656,"date":"2025-01-17T09:44:17","date_gmt":"2025-01-17T09:44:17","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=3656"},"modified":"2025-01-17T11:01:21","modified_gmt":"2025-01-17T11:01:21","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><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<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 href=\"https:\/\/practice.expandtesting.com\/tooltips\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/practice.expandtesting.com\/tooltips<\/a>&nbsp;<\/p>\n<p>Mouse hover \u2018Tooltip on top\u2019. You can see a small description within orange colored rectangular box, see below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3659\" width=\"482\" data-init-width=\"1176\" height=\"378\" data-init-height=\"922\" title=\"Screenshot 2025-01-17 at 3.15.22\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.15.22\u202fPM.png\" data-width=\"482\" data-height=\"378\" style=\"aspect-ratio: auto 1176 \/ 922;\"><\/span><\/p>\n<p>Inspect the mic, notice that the value of \u2018title\u2019 attribute matches the description of tool tip&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3660\" width=\"531\" data-init-width=\"1176\" height=\"183\" data-init-height=\"406\" title=\"Screenshot 2025-01-17 at 3.16.12\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.16.12\u202fPM.png\" data-width=\"531\" data-height=\"183\" style=\"aspect-ratio: auto 1176 \/ 406;\"><\/span><\/p>\n<p>&nbsp;This means we can fetch the value of \u2018title\u2019 attribute to assert the tool tip.&nbsp;<\/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<p><span><img decoding=\"async\" alt=\"\" data-id=\"3661\" width=\"549\" data-init-width=\"1176\" height=\"185\" data-init-height=\"396\" title=\"Screenshot 2025-01-17 at 3.17.16\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.17.16\u202fPM.png\" data-width=\"549\" data-height=\"185\" style=\"aspect-ratio: auto 1176 \/ 396;\"><\/span><\/p>\n<p>&nbsp;See 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<p><span><img decoding=\"async\" alt=\"\" data-id=\"3662\" width=\"612\" data-init-width=\"1176\" height=\"361\" data-init-height=\"694\" title=\"Screenshot 2025-01-17 at 3.18.02\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.18.02\u202fPM.png\" data-width=\"612\" data-height=\"361\" style=\"aspect-ratio: auto 1176 \/ 694;\"><\/span><\/p>\n<p>&nbsp;This way we can assert the tool tip.<\/p>\n<p><strong>Set focus to an element<\/strong><\/p>\n<p>Go to <a href=\"https:\/\/demo.automationtesting.in\/Register.html\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/demo.automationtesting.in\/Register.html<\/a>&nbsp;<\/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 &nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3663\" width=\"472\" data-init-width=\"1176\" height=\"332\" data-init-height=\"828\" title=\"Screenshot 2025-01-17 at 3.18.40\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.18.40\u202fPM.png\" data-width=\"472\" data-height=\"332\" style=\"aspect-ratio: auto 1176 \/ 828;\"><\/span><\/p>\n<p>&nbsp; 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<p><span><img decoding=\"async\" alt=\"\" data-id=\"3664\" width=\"552\" data-init-width=\"1176\" height=\"499\" data-init-height=\"1064\" title=\"Screenshot 2025-01-17 at 3.19.22\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.19.22\u202fPM.png\" data-width=\"552\" data-height=\"499\" style=\"aspect-ratio: auto 1176 \/ 1064;\"><\/span><\/p>\n<p>Execute.&nbsp;<\/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<p><span><img decoding=\"async\" alt=\"\" data-id=\"3665\" width=\"542\" data-init-width=\"1176\" height=\"560\" data-init-height=\"1216\" title=\"Screenshot 2025-01-17 at 3.20.04\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.20.04\u202fPM.png\" data-width=\"542\" data-height=\"560\" style=\"aspect-ratio: auto 1176 \/ 1216;\"><\/span><\/p>\n<p>&nbsp;Execute.<\/p>\n<p>Notice below that the cursor now points to \u201cFirst Name\u201d field.<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3666\" width=\"436\" data-init-width=\"1176\" height=\"205\" data-init-height=\"554\" title=\"Screenshot 2025-01-17 at 3.20.39\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-3.20.39\u202fPM.png\" data-width=\"436\" data-height=\"205\" style=\"aspect-ratio: auto 1176 \/ 554;\"><\/span><\/p>\n<p>&nbsp;<\/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>\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><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><strong>void<\/strong> setUp() {<\/p>\n<p>Playwright playwright = Playwright.<em>create<\/em>();&nbsp;<\/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><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)) {&nbsp;<\/p>\n<p>System.<strong><em>out<\/em><\/strong>.println(&#8220;Assertion Passed&#8221;);&nbsp;<\/p>\n<p>}<\/p>\n<p><strong>else<\/strong>&nbsp;<\/p>\n<p>System.<strong><em>out<\/em><\/strong>.println(&#8220;Assertion Failed&#8221;);&nbsp;<\/p>\n<p>}<\/p>\n<p>@AfterMethod<\/p>\n<p><strong>public<\/strong><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>\n<p><strong>Source code (focus an element)<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<\/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>\n<p><strong>public<\/strong><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><strong>void<\/strong> setUp() {<\/p>\n<p>Playwright playwright = Playwright.<em>create<\/em>();&nbsp;<\/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><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><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>\n<p>Thanks.<\/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":750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41],"tags":[],"class_list":["post-3656","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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":6,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3656\/revisions"}],"predecessor-version":[{"id":3765,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3656\/revisions\/3765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/750"}],"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}]}}