{"id":3137,"date":"2025-01-15T19:00:20","date_gmt":"2025-01-15T19:00:20","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=3137"},"modified":"2025-01-17T10:33:57","modified_gmt":"2025-01-17T10:33:57","slug":"understand-explicit-timeout-in-playwright-java","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/15\/understand-explicit-timeout-in-playwright-java\/","title":{"rendered":"Understand Explicit timeout in Playwright Java"},"content":{"rendered":"<p><em>In this blog, we will study Playwright Java&#8217;s ability to set a timeout explicitly for actions.<\/em><\/p>\n<p><strong>Topics that we will cover:<\/strong><\/p>\n<ul>\n<li>Playwright Java\u2019s explicit timeout for specific actions&nbsp;<\/li>\n<li>Source code<\/li>\n<\/ul>\n<p><strong>Playwright Java\u2019s explicit timeout for specific actions&nbsp;<\/strong><\/p>\n<p>We have already seen setting up of global default timeout.<\/p>\n<p>We will examine the procedure for establishing an explicit timeout for a specific element in playwright-java.<\/p>\n<p>Let us again go to <a href=\"http:\/\/uitestingplayground.com\/ajax\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">http:\/\/uitestingplayground.com\/ajax<\/a>&nbsp;<\/p>\n<p>According to the scenario description, after pressing the button, the ajax data will become visible after a 15-second delay, implying a wait time of 15 seconds<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3140\" width=\"547\" data-init-width=\"1196\" height=\"179\" data-init-height=\"392\" title=\"Screenshot 2025-01-16 at 12.31.48\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.31.48\u202fAM.png\" data-width=\"547\" data-height=\"179\" style=\"aspect-ratio: auto 1196 \/ 392;\"><\/span><\/p>\n<p>In other words, by clicking the blue button, the ajax data will be loaded after a delay of 15 seconds<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3141\" width=\"537\" data-init-width=\"1196\" height=\"466\" data-init-height=\"1038\" title=\"Screenshot 2025-01-16 at 12.32.37\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.32.37\u202fAM.png\" data-width=\"537\" data-height=\"466\" style=\"aspect-ratio: auto 1196 \/ 1038;\"><\/span><\/p>\n<p>&nbsp;Next, the AJAX data output can be identified using class \u2018bg-success\u2019 or by text \u2018Data loaded with AJAX get request\u2019&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3142\" width=\"596\" data-init-width=\"1196\" height=\"536\" data-init-height=\"1076\" title=\"Screenshot 2025-01-16 at 12.33.19\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.33.19\u202fAM.png\" data-width=\"596\" data-height=\"536\" style=\"aspect-ratio: auto 1196 \/ 1076;\"><\/span><\/p>\n<p>&nbsp;Before we set the explicit wait timeout, let us first comment default timeout (line#27 in above snapshot).&nbsp;<\/p>\n<p>In this use case, the idea of explicit wait timeout is that, we will wait explicitly for ajax data output element.<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3143\" width=\"519\" data-init-width=\"1196\" height=\"43\" data-init-height=\"100\" title=\"Screenshot 2025-01-16 at 12.34.38\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.34.38\u202fAM.png\" data-width=\"519\" data-height=\"43\" style=\"aspect-ratio: auto 1196 \/ 100;\"><\/span><\/p>\n<p>Once the element is visble, we will than fetch the innertext of ajax data output (line#32 in above snapshot).<\/p>\n<p>You can utilize the <em>waitForSelector()<\/em> method by providing the selector and the timeout as its arguments<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3144\" width=\"602\" data-init-width=\"1196\" height=\"217\" data-init-height=\"432\" title=\"Screenshot 2025-01-16 at 12.35.31\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.35.31\u202fAM.png\" data-width=\"602\" data-height=\"217\" style=\"aspect-ratio: auto 1196 \/ 432;\"><\/span><\/p>\n<p>&nbsp;The locator of the ajax data output will be stored in the selector argument, as it represents the element we need to wait for<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3145\" width=\"567\" data-init-width=\"1196\" height=\"205\" data-init-height=\"432\" title=\"Screenshot 2025-01-16 at 12.36.13\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.36.13\u202fAM.png\" data-width=\"567\" data-height=\"205\" style=\"aspect-ratio: auto 1196 \/ 432;\"><\/span><\/p>\n<p>&nbsp;Below is the syntax for the second &#8216;timeout&#8217; argument. We will specify a timeout duration of 16 seconds<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3146\" width=\"591\" data-init-width=\"1196\" height=\"244\" data-init-height=\"494\" title=\"Screenshot 2025-01-16 at 12.36.53\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.36.53\u202fAM.png\" data-width=\"591\" data-height=\"244\" style=\"aspect-ratio: auto 1196 \/ 494;\"><\/span><\/p>\n<p>&nbsp;Execute the code.&nbsp;<\/p>\n<p>The test will be successful. The console prints the ajax output message<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3147\" width=\"595\" data-init-width=\"1196\" height=\"312\" data-init-height=\"628\" title=\"Screenshot 2025-01-16 at 12.37.36\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.37.36\u202fAM.png\" data-width=\"595\" data-height=\"312\" style=\"aspect-ratio: auto 1196 \/ 628;\"><\/span><\/p>\n<p>&nbsp;Execute the code.&nbsp;<\/p>\n<p>The test fails this time, because the ajax data is loaded after 15 seconds, exceeding the timeout limit of 14 seconds that we have set up<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3148\" width=\"585\" data-init-width=\"1196\" height=\"459\" data-init-height=\"938\" title=\"Screenshot 2025-01-16 at 12.38.34\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.38.34\u202fAM.png\" data-width=\"585\" data-height=\"459\" style=\"aspect-ratio: auto 1196 \/ 938;\"><\/span><\/p>\n<p>Execute the code.<\/p>\n<p>The test is expected to fail because the default timeout of 15 seconds matches the timeout required to display ajax data within 15 seconds<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3149\" width=\"568\" data-init-width=\"996\" height=\"447\" data-init-height=\"784\" title=\"Screenshot 2025-01-16 at 12.39.28\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-12.39.28\u202fAM.png\" data-width=\"568\" data-height=\"447\" style=\"aspect-ratio: auto 996 \/ 784;\"><\/span><\/p>\n<p>&nbsp;This is how the explicit timeout functions for a specific element.<\/p>\n<p><strong>Source code&nbsp;<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<p><strong>import<\/strong> org.junit.jupiter.api.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.BrowserType.LaunchOptions;<\/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> Blog9_ExplicitTimeout {<\/p>\n<p>@Test<\/p>\n<p><strong>public<\/strong><strong>void<\/strong> PlaywrightJTest() {<\/p>\n<p>Playwright pt = Playwright.<em>create<\/em>();<\/p>\n<p>LaunchOptions lo = <strong>new<\/strong> LaunchOptions();<\/p>\n<p>lo.setChannel(&#8220;msedge&#8221;);<\/p>\n<p>lo.setHeadless(<strong>false<\/strong>);<\/p>\n<p>BrowserType btype = pt.chromium();<\/p>\n<p>Browser b = btype.launch((<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>)));<\/p>\n<p>Page pg = b.newPage();<\/p>\n<p>\/\/pg.setDefaultTimeout(14000);<\/p>\n<p>\/\/pg.setDefaultTimeout(16000);<\/p>\n<p>\/\/pg.setDefaultTimeout(15000);<\/p>\n<p>pg.navigate(&#8220;http:\/\/uitestingplayground.com\/ajax&#8221;);<\/p>\n<p>&nbsp; &nbsp; pg.locator(&#8220;text=Button Triggering AJAX Request&#8221;).click();<\/p>\n<p>&nbsp; &nbsp;<\/p>\n<p>&nbsp; &nbsp; \/\/set explicit timeout<\/p>\n<p>&nbsp; &nbsp; \/\/pg.waitForSelector(&#8220;.bg-success&#8221;, new Page.WaitForSelectorOptions().setTimeout(16000));<\/p>\n<p>&nbsp; &nbsp; \/\/pg.waitForSelector(&#8220;.bg-success&#8221;, new Page.WaitForSelectorOptions().setTimeout(14000));<\/p>\n<p>&nbsp; &nbsp; pg.waitForSelector(&#8220;.bg-success&#8221;, <strong>new<\/strong> Page.WaitForSelectorOptions().setTimeout(15000));<\/p>\n<p>&nbsp; &nbsp;<\/p>\n<p>&nbsp; &nbsp; String ajmsg =&nbsp; pg.locator(&#8220;.bg-success&#8221;).innerText();<\/p>\n<p>&nbsp; &nbsp; &nbsp; System.<strong><em>out<\/em><\/strong>.println(ajmsg);<\/p>\n<p>pg.pause();<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<\/p>\n<p>Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we will study Playwright Java&#8217;s ability to set a timeout explicitly for actions. Topics that we will cover: Playwright Java\u2019s explicit timeout for specific actions&nbsp; Source code Playwright Java\u2019s explicit timeout for specific actions&nbsp; We have already seen setting up of global default timeout. We will examine the procedure for establishing an [&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-3137","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\/3137","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=3137"}],"version-history":[{"count":6,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3137\/revisions"}],"predecessor-version":[{"id":3703,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3137\/revisions\/3703"}],"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=3137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}