{"id":3262,"date":"2025-01-16T04:28:56","date_gmt":"2025-01-16T04:28:56","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=3262"},"modified":"2025-01-17T10:39:01","modified_gmt":"2025-01-17T10:39:01","slug":"upload-file-using-playwright-java","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/16\/upload-file-using-playwright-java\/","title":{"rendered":"Upload file using Playwright Java"},"content":{"rendered":"<p><em>In this blog we will utilize playwright-java to dynamically generate and upload a fresh file at runtime. We will also learn to upload multiple files.<\/em><\/p>\n<p><strong>Topics that we will cover:<\/strong><\/p>\n<ul>\n<li>Upload existing file<\/li>\n<li>Generating and uploading a fresh file dynamically during runtime<\/li>\n<li>Upload multiple files<\/li>\n<li>Source code (upload existing file)<\/li>\n<li>Source code (create\/upload file during runtime)<\/li>\n<li>Source code (upload multiple files)<\/li>\n<\/ul>\n<p><strong>Upload existing file<\/strong><\/p>\n<p>We will now look at the process of uploading a pre-existing file with Playwright Java.<\/p>\n<p>Create dummy pdf file in the playwright project, see below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3265\" width=\"404\" data-init-width=\"870\" height=\"292\" data-init-height=\"628\" title=\"Screenshot 2025-01-16 at 10.00.15\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.00.15\u202fAM.png\" data-width=\"404\" data-height=\"292\" style=\"aspect-ratio: auto 870 \/ 628;\"><\/span><\/p>\n<p>&nbsp;We are going to upload this file to the site<\/p>\n<p><a href=\"https:\/\/the-internet.herokuapp.com\/upload\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/the-internet.herokuapp.com\/upload<\/a>&nbsp;<\/p>\n<p>Let us inspect \u2018Choose File\u2019 button<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3267\" width=\"508\" data-init-width=\"1172\" height=\"272\" data-init-height=\"628\" title=\"Screenshot 2025-01-16 at 10.01.09\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.01.09\u202fAM.png\" data-width=\"508\" data-height=\"272\" style=\"aspect-ratio: auto 1172 \/ 628;\"><\/span><\/p>\n<p>&nbsp;There is a \u2018<strong><em>setInputFiles<\/em><\/strong>\u2019 method in playwright that can be used to set the input file<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3268\" width=\"586\" data-init-width=\"1172\" height=\"97\" data-init-height=\"194\" title=\"Screenshot 2025-01-16 at 10.02.18\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.02.18\u202fAM.png\" data-width=\"586\" data-height=\"97\" style=\"aspect-ratio: auto 1172 \/ 194;\"><\/span><\/p>\n<p>&nbsp;Two arguments are required for this method: the selector, which is the locator of the &#8216;Choose File&#8217; button in the current case, and the file name (which is the input file that needs to be uploaded).<\/p>\n<p>Note: <em>import java.nio.file.Paths;<\/em>&nbsp;<\/p>\n<p>Code snippet so far<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3269\" width=\"619\" data-init-width=\"1172\" height=\"164\" data-init-height=\"310\" title=\"Screenshot 2025-01-16 at 10.03.01\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.03.01\u202fAM.png\" data-width=\"619\" data-height=\"164\" style=\"aspect-ratio: auto 1172 \/ 310;\"><\/span><\/p>\n<p>&nbsp;Execute.<\/p>\n<p>Note below that the file has been chosen successfully<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3270\" width=\"517\" data-init-width=\"1172\" height=\"233\" data-init-height=\"528\" title=\"Screenshot 2025-01-16 at 10.03.54\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.03.54\u202fAM.png\" data-width=\"517\" data-height=\"233\" style=\"aspect-ratio: auto 1172 \/ 528;\"><\/span><\/p>\n<p>&nbsp;Next we will click the \u2018Upload\u2019 button to upload the file.<\/p>\n<p>It is advisable to introduce a brief waiting period before proceeding to click on the &#8216;Upload&#8217; button<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3271\" width=\"563\" data-init-width=\"1172\" height=\"145\" data-init-height=\"302\" title=\"Screenshot 2025-01-16 at 10.04.23\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.04.23\u202fAM.png\" data-width=\"563\" data-height=\"145\" style=\"aspect-ratio: auto 1172 \/ 302;\"><\/span><\/p>\n<p>&nbsp;Execute.&nbsp;<\/p>\n<p>Note below that file has been uploaded<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3272\" width=\"585\" data-init-width=\"1172\" height=\"203\" data-init-height=\"406\" title=\"Screenshot 2025-01-16 at 10.05.08\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.05.08\u202fAM.png\" data-width=\"585\" data-height=\"203\" style=\"aspect-ratio: auto 1172 \/ 406;\"><\/span><\/p>\n<p>&nbsp;This is how uploading of an existing file is made simple with Playwright.<\/p>\n<p><strong>Generating and uploading a fresh file dynamically during runtime<\/strong><\/p>\n<p>Let us now create a new file and upload it at runtime.<\/p>\n<p>Go to <a href=\"https:\/\/cgi-lib.berkeley.edu\/ex\/fup.html\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/cgi-lib.berkeley.edu\/ex\/fup.html<\/a>&nbsp;<\/p>\n<p>We have to first inspect \u2018Choose File\u2019<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3273\" width=\"506\" data-init-width=\"1172\" height=\"324\" data-init-height=\"750\" title=\"Screenshot 2025-01-16 at 10.05.49\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.05.49\u202fAM.png\" data-width=\"506\" data-height=\"324\" style=\"aspect-ratio: auto 1172 \/ 750;\"><\/span><\/p>\n<p>&nbsp;For creating a new file at runtime, we can again make use of the \u2018<em>setInputFiles<\/em>\u2019 method with different set of arguments<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3274\" width=\"588\" data-init-width=\"1172\" height=\"273\" data-init-height=\"544\" title=\"Screenshot 2025-01-16 at 10.06.30\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.06.30\u202fAM.png\" data-width=\"588\" data-height=\"273\" style=\"aspect-ratio: auto 1172 \/ 544;\"><\/span><\/p>\n<p>&nbsp;Execute. Note below that the file is successfully chosen<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3275\" width=\"526\" data-init-width=\"1172\" height=\"422\" data-init-height=\"940\" title=\"Screenshot 2025-01-16 at 10.07.17\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.07.17\u202fAM.png\" data-width=\"526\" data-height=\"422\" style=\"aspect-ratio: auto 1172 \/ 940;\"><\/span><\/p>\n<p>&nbsp;We now press the \u2018Press\u2019 button to upload file<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3276\" width=\"489\" data-init-width=\"1172\" height=\"40\" data-init-height=\"96\" title=\"Screenshot 2025-01-16 at 10.07.59\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.07.59\u202fAM.png\" data-width=\"489\" data-height=\"40\" style=\"aspect-ratio: auto 1172 \/ 96;\"><\/span><\/p>\n<p>&nbsp;Execute.&nbsp;<\/p>\n<p>File gets uploaded, the file contents are clearly visible, see below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3277\" width=\"507\" data-init-width=\"1172\" height=\"300\" data-init-height=\"694\" title=\"Screenshot 2025-01-16 at 10.08.45\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.08.45\u202fAM.png\" data-width=\"507\" data-height=\"300\" style=\"aspect-ratio: auto 1172 \/ 694;\"><\/span><\/p>\n<p>&nbsp;<strong>Upload multiple files<\/strong><\/p>\n<p>Let us now see how to upload multiple files.&nbsp;<\/p>\n<p>First of all, let us add 2 files under src\/test\/resources\/files folder<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3278\" width=\"477\" data-init-width=\"1172\" height=\"211\" data-init-height=\"518\" title=\"Screenshot 2025-01-16 at 10.09.53\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.09.53\u202fAM.png\" data-width=\"477\" data-height=\"211\" style=\"aspect-ratio: auto 1172 \/ 518;\"><\/span><\/p>\n<p>&nbsp;We would be uploading these 2 files using playwright.<\/p>\n<p>Go to <a href=\"https:\/\/www.w3schools.com\/jsref\/tryit.asp?filename=tryjsref_fileupload_multiple\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/www.w3schools.com\/jsref\/tryit.asp?filename=tryjsref_fileupload_multiple<\/a>&nbsp;<\/p>\n<p>Inspect \u2018Choose Files\u2019 button. Notice that this element is a part of frame and the frame id is as seen below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3279\" width=\"501\" data-init-width=\"1172\" height=\"380\" data-init-height=\"890\" title=\"Screenshot 2025-01-16 at 10.10.45\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.10.45\u202fAM.png\" data-width=\"501\" data-height=\"380\" style=\"aspect-ratio: auto 1172 \/ 890;\"><\/span><\/p>\n<p>&nbsp;Make sure to import below 2 libraries<\/p>\n<p><em>import java.nio.file.Path;import java.nio.file.Paths;<\/em><\/p>\n<p>We can again make use of <em>setInputFiles<\/em> method with a different set of arguments as shown below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3280\" width=\"574\" data-init-width=\"1172\" height=\"158\" data-init-height=\"322\" title=\"Screenshot 2025-01-16 at 10.11.20\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.11.20\u202fAM.png\" data-width=\"574\" data-height=\"158\" style=\"aspect-ratio: auto 1172 \/ 322;\"><\/span><\/p>\n<p>&nbsp;Execute.<\/p>\n<p>Notice below that 2 files get uploaded.<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3281\" width=\"511\" data-init-width=\"1172\" height=\"267\" data-init-height=\"612\" title=\"Screenshot 2025-01-16 at 10.11.51\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-10.11.51\u202fAM.png\" data-width=\"511\" data-height=\"267\" style=\"aspect-ratio: auto 1172 \/ 612;\"><\/span><\/p>\n<p>&nbsp;This is how we can upload multiple files.<\/p>\n<p><strong>Source code (upload existing file)<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<\/p>\n<p><strong>import<\/strong> java.nio.file.Paths;<\/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> Blog15_UploadExistingFile {<\/p>\n<p>@Test<\/p>\n<p><strong>public<\/strong><strong>void<\/strong> PlaywrightJTest() <strong>throws<\/strong> InterruptedException {<\/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.navigate(&#8220;https:\/\/the-internet.herokuapp.com\/upload&#8221;);<\/p>\n<\/p>\n<p>pg.setInputFiles(&#8220;#file-upload&#8221;, Paths.<em>get<\/em>(&#8220;pwfile.pdf&#8221;));<\/p>\n<p>Thread.<em>sleep<\/em>(2000);<\/p>\n<p>pg.locator(&#8220;text = Upload&#8221;).last().click(); \/\/Upload<\/p>\n<p>pg.pause();<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<\/p>\n<p><strong>Source code (create\/upload file during runtime)<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<\/p>\n<p><strong>import<\/strong> java.nio.charset.StandardCharsets;<\/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><strong>import<\/strong> com.microsoft.playwright.options.FilePayload;<\/p>\n<\/p>\n<p><strong>public<\/strong><strong>class<\/strong> Blog15_CreateUploadFileDuringRuntime {<\/p>\n<p>@Test<\/p>\n<p><strong>public<\/strong><strong>void<\/strong> PlaywrightJTest() <strong>throws<\/strong> InterruptedException {<\/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.navigate(&#8220;https:\/\/cgi-lib.berkeley.edu\/ex\/fup.html&#8221;);<\/p>\n<p>pg.setInputFiles(&#8220;input[name=&#8217;upfile&#8217;]&#8221;, <strong>new<\/strong> FilePayload(&#8220;pwfile.text&#8221;,<\/p>\n<p>&#8220;text\/plain&#8221;,&#8221;Rahul Shetty Academy https:\/\/rahulshettyacademy.com\/&#8221;.getBytes(StandardCharsets.<strong><em>UTF_8<\/em><\/strong>)));<\/p>\n<p>pg.locator(&#8220;text = Press&#8221;).click();<\/p>\n<p>pg.pause();<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<\/p>\n<p><strong>Source code (upload multiple files)<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<\/p>\n<p><strong>import<\/strong> java.nio.file.Path;<\/p>\n<p><strong>import<\/strong> java.nio.file.Paths;<\/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> Blog15_MultipleFilesUpload {<\/p>\n<p>@Test<\/p>\n<p><strong>public<\/strong><strong>void<\/strong> PlaywrightJTest() <strong>throws<\/strong> InterruptedException {<\/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.navigate(&#8220;https:\/\/www.w3schools.com\/jsref\/tryit.asp?filename=tryjsref_fileupload_multiple&#8221;);<\/p>\n<p>pg.frameLocator(&#8220;#iframeResult&#8221;).locator(&#8220;#myFile&#8221;).setInputFiles(<strong>new<\/strong> Path[] {<\/p>\n<p>Paths.<em>get<\/em>(&#8220;.\/src\/test\/resources\/files\/file1.pdf&#8221;),<\/p>\n<p>Paths.<em>get<\/em>(&#8220;.\/src\/test\/resources\/files\/file2.jpeg&#8221;)<\/p>\n<p>});<\/p>\n<\/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 utilize playwright-java to dynamically generate and upload a fresh file at runtime. We will also learn to upload multiple files. Topics that we will cover: Upload existing file Generating and uploading a fresh file dynamically during runtime Upload multiple files Source code (upload existing file) Source code (create\/upload file during [&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-3262","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\/3262","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=3262"}],"version-history":[{"count":6,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3262\/revisions"}],"predecessor-version":[{"id":3715,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3262\/revisions\/3715"}],"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=3262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}