Upload document and display the document status - Selenium WebDriver - Java

Question

@Florent B. answered my question in regards to uploading a document where the element wasn't an input type="file" here

Now, I have another document upload section that I cannot get handled properly. There is an overlay on the screen with an input type="submit" button, so I use the solution from the hyperlink above, which does upload the document, however, it doesn't change the status showing a document was uploaded which is required to actually complete the order.

Here is my current code that gets the document uploaded, it just doesn't reflect that in the dialog:

// disable the click event on an `<input>` file ((JavascriptExecutor)getDriver()).executeScript(     "HTMLInputElement.prototype.click = function() {                     " +     "  if(this.type !== 'file') HTMLElement.prototype.click.call(this);  " +     "};                                                                  " );  // trigger the upload VOrderDetails.uploadReport_btn(getDriver()).click();  // change the visibility of the file input control WebElement elem = getDriver().findElement(By.id("UploadLib_Uploader_js")); String js = "arguments[0].style.height='auto'; arguments[0].style.visibility='visible';"; ((JavascriptExecutor) getDriver()).executeScript(js, elem);  Thread.sleep(1000);  getDriver().findElement(By.cssSelector("input[type=file]"))       .sendKeys(filePath); 

When you manually upload a document, the document appears like the following showing a Test PDF.pdf file was uploaded and allowing you to complete the order:

Is there a way to "fake" it to show a document has been uploaded on this overlay?

Here is the HTML for this piece:

<div id="divSetComplete" style="width: 594px; display: block; top: 316.5px;" class="MessageBox HideOldProgressBar">   <div class="DialogTitle">Complete assignment</div>   <div id="divSetCompleteFields" class="DialogSection dsBorder dsColor">     <img src="/Images/BlackOne.png" class="dsNumber" alt="">     <div class="dsCaption">       <span style="margin-right:2px">Upload the report for <span id="Dialogs_Dialogs_spnOrderAddress" class="VariableText">245 W Chantilly Way</span> to your client, <span id="Dialogs_Dialogs_spnOrderClient" class="VariableText">Automation Test User</span>.</span>     </div>     <div class="dsContent UploadFields">          <div id="Dialogs_Dialogs_divFile">         <div>           <div id="divProgressBarFile" class="ProgressBarDiv">             <div id="pbFile" style="display: inline-block; position: relative;">               <div id="pbFile_divEmpty" class="EmptyGradient BasicStyling" style="width: 371px; display: inline-block; height: 24px; line-height: 24px;">                 <div id="pbFile_divProgress" class="ProgressGradient" style="height: 22px;">                   <div class="ProgressBackground BasicStyling" style="width: 371px; height: 22px; line-height: 24px;">                     <label id="pbFile_ProgressText" class="ProgressText" style="width: 319px; height: 24px;"></label><i id="pbFile_ProgressIcon" onclick="ProgressBar.CancelUpload('pbFile','pbFile_Icon','Dialogs_Dialogs_uplFile',true,'Required');" class="fa fa-times ProgressIcon" style="left: 344px; line-height: 24px;"></i>                   </div>                 </div>                 <label class="EmptyText PlaceholderText" id="pbFile_EmptyText" style="width: 319px; height: 24px; line-height: 20px;">Required</label><i id="pbFile_Icon" class="fa fa-times EmptyIcon" onclick="ProgressBar.CancelUpload('pbFile','pbFile_Icon','Dialogs_Dialogs_uplFile',true,'Required');" style="line-height: 24px; display: none;"></i>               </div>             </div>           </div>           <div class="SkinButtonDiv">             <input type="submit" name="ctl00$ctl00$Dialogs$Dialogs$btnUploadFile" value="Upload report" onclick="HideDialog();" id="Dialogs_Dialogs_btnUploadFile" class="MercuryButton Blue" style="height:24px;width:141px;">           </div>         </div>       </div>     </div>   </div>   <div id="divSetCompleteMessage" class="DialogSection dsBorder dsColor">     <span id="Dialogs_Dialogs_upSetComplete">                     <img src="/Images/BlackTwo.png" class="dsNumber" alt="">                     <div class="dsContent">                          <div>   <div id="Dialogs_Dialogs_ctlCompleteMessage_divNormal">     <div class="MercuryField">         <div class="smFieldLabel">Message to client</div>     </div>     <div class="MercuryField">         <div class="MercuryFieldInput">             <textarea name="ctl00$ctl00$Dialogs$Dialogs$ctlCompleteMessage$txtMessage" rows="2" cols="20" id="Dialogs_Dialogs_ctlCompleteMessage_txtMessage" class="MercuryInput smNormalComment"></textarea>             <div id="Dialogs_Dialogs_ctlCompleteMessage_hbStatusMessage_pnlHoverWrapper" class="hoverPopupMenu" style="background-color: white; position: absolute; visibility: hidden; left: 517px; top: 29px; z-index: 1000; display: none;">     <img src="/Images/QuickListImages/QL.png" id="Dialogs_Dialogs_ctlCompleteMessage_hbStatusMessage_btnHover" class="hoverImageBtn" onclick="MercuryNetwork.Common.Controls.QuickList.HoverButton.onClientClick(this, event);" data-client-event="Event_HoverButton_Click" data-target-control-i-d="txtMessage" data-target-control-client-i-d="Dialogs_Dialogs_ctlCompleteMessage_txtMessage" data-user-data=""> </div>         </div>     </div> </div>                         </div>                     </div>                     <div style="display:none">                                 <input id="Dialogs_Dialogs_uplEnv" name="ctl00$ctl00$Dialogs$Dialogs$uplEnv" type="hidden" autocomplete="off" isuploaderfield="1"><button>Upload&nbsp;a&nbsp;file</button><img uniqueid="ctl00$ctl00$Dialogs$Dialogs$uplEnv" namespace="CuteWebUI" root="/" verticks="635229096420000000" filetoolargemsg="{0} cannot be uploaded!  File size ({1}) is too large. The maximum file size allowed is set to: {2}." windowsdialoglimitmsg="Unable to select so many files at once. The total file name length cannot exceed 32kb." canceluploadmsg="Cancel upload" cancelallmsg="Cancel all Uploads" uploadingmsg="Uploading.." uploadaddonbuttonmode="Auto" advancedoptionnosilverlight="true" uploadtype="Auto" uploadcursor="Auto" uploadtypepriority="Silverlight,HTML5,Flash,IFrame" maxfileslimit="1" uploadedfilecount="0" showprogressinfo="1" progresstexttemplate="%SEND% of %SIZE%; %T% seconds left" panelwidth="360" barheight="20" infostyle="padding-left:3px;font:normal 12px Tahoma;" barstyle="Continuous" borderstyle="border:1px solid #444444;" postbackeventreference="__doPostBack('ctl00$ctl00$Dialogs$Dialogs$uplEnv','')" insertbuttonid="Dialogs_Dialogs_btnUploadEnv" cancelbuttonid="Dialogs_Dialogs_uplEnv__Cancel" progresstextid="Dialogs_Dialogs_uplEnv__ProgressText" progressctrlid="Dialogs_Dialogs_uplEnv__Progress" maxsizekb="51200" extensions="env" inserttext="Upload a file" inputboxcsstext="" contextvalue="!3wEWAQVQXFxzczEuaW50ZXJuYWwuYWQubWVyY3VyeXZtcC5jb21cU2hhcmVkIFN0b3JhZ2VcbWVyY3VyeS5hbGFtb2RlLmNvbVxVcGxvYWRlclRlbXBqJn5!30YJ9bQs4t7i2cbnRNiNu2w!2!2" serverlang="AspNet" id="Dialogs_Dialogs_uplEnvImage_unique" resourcehandler="/CuteWebUI_Uploader_Resource.axd" onload="this.style.display=&quot;none&quot; ; if(!window.CuteWebUI_AjaxUploader_Initialize){var xh=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHttp');xh.open('GET','/CuteWebUI_Uploader_Resource.axd?type=script&amp;_ver=635229096420000000',false);xh.send('');eval(xh.responseText)}CuteWebUI_AjaxUploader_Initialize(this.id);" onerror="this.onload()" src="/CuteWebUI_Uploader_Resource.axd?type=file&amp;file=continuous.gif" style="display:none;"><div id="Dialogs_Dialogs_uplEnv__Progress" style="display:none;">     <span id="Dialogs_Dialogs_uplEnv__ProgressText" style="display: none;">Uploading...</span>     <input type="submit" name="ctl00$ctl00$Dialogs$Dialogs$uplEnv$_Cancel" value="Cancel" id="Dialogs_Dialogs_uplEnv__Cancel" style="display: none;">   </div>   <input id="Dialogs_Dialogs_uplMismo" name="ctl00$ctl00$Dialogs$Dialogs$uplMismo" type="hidden" autocomplete="off" isuploaderfield="1">   <button>Upload&nbsp;a&nbsp;file</button>   <img uniqueid="ctl00$ctl00$Dialogs$Dialogs$uplMismo" namespace="CuteWebUI" root="/" verticks="635229096420000000" filetoolargemsg="{0} cannot be uploaded!  File size ({1}) is too large. The maximum file size allowed is set to: {2}." windowsdialoglimitmsg="Unable to select so many files at once. The total file name length cannot exceed 32kb." canceluploadmsg="Cancel upload" cancelallmsg="Cancel all Uploads"   uploadingmsg="Uploading.." uploadaddonbuttonmode="Auto" advancedoptionnosilverlight="true" uploadtype="Auto" uploadcursor="Auto" uploadtypepriority="Silverlight,HTML5,Flash,IFrame" maxfileslimit="1" uploadedfilecount="0" showprogressinfo="1" progresstexttemplate="%SEND% of %SIZE%; %T% seconds left"   panelwidth="360" barheight="20" infostyle="padding-left:3px;font:normal 12px Tahoma;" barstyle="Continuous" borderstyle="border:1px solid #444444;" postbackeventreference="__doPostBack('ctl00$ctl00$Dialogs$Dialogs$uplMismo','')" insertbuttonid="Dialogs_Dialogs_btnUploadMismo"   cancelbuttonid="Dialogs_Dialogs_uplMismo__Cancel" progresstextid="Dialogs_Dialogs_uplMismo__ProgressText" progressctrlid="Dialogs_Dialogs_uplMismo__Progress" maxsizekb="51200" extensions="xml" inserttext="Upload a file" inputboxcsstext="" contextvalue="!3wEWAQVQXFxzczEuaW50ZXJuYWwuYWQubWVyY3VyeXZtcC5jb21cU2hhcmVkIFN0b3JhZ2VcbWVyY3VyeS5hbGFtb2RlLmNvbVxVcGxvYWRlclRlbXBqJn5!30YJ9bQs4t7i2cbnRNiNu2w!2!2"   serverlang="AspNet" id="Dialogs_Dialogs_uplMismoImage_unique" resourcehandler="/CuteWebUI_Uploader_Resource.axd" onload="this.style.display=&quot;none&quot; ; if(!window.CuteWebUI_AjaxUploader_Initialize){var xh=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHttp');xh.open('GET','/CuteWebUI_Uploader_Resource.axd?type=script&amp;_ver=635229096420000000',false);xh.send('');eval(xh.responseText)}CuteWebUI_AjaxUploader_Initialize(this.id);"   onerror="this.onload()" src="/CuteWebUI_Uploader_Resource.axd?type=file&amp;file=continuous.gif" style="display:none;">   <div id="Dialogs_Dialogs_uplMismo__Progress" style="display:none;">     <span id="Dialogs_Dialogs_uplMismo__ProgressText" style="display: none;">Uploading...</span>     <input type="submit" name="ctl00$ctl00$Dialogs$Dialogs$uplMismo$_Cancel" value="Cancel" id="Dialogs_Dialogs_uplMismo__Cancel" style="display: none;">   </div>   <input id="Dialogs_Dialogs_uplPdf" name="ctl00$ctl00$Dialogs$Dialogs$uplPdf" type="hidden" autocomplete="off" isuploaderfield="1">   <button>Upload&nbsp;a&nbsp;file</button>   <img uniqueid="ctl00$ctl00$Dialogs$Dialogs$uplPdf" namespace="CuteWebUI" root="/" verticks="635229096420000000" filetoolargemsg="{0} cannot be uploaded!  File size ({1}) is too large. The maximum file size allowed is set to: {2}." windowsdialoglimitmsg="Unable to select so many files at once. The total file name length cannot exceed 32kb." canceluploadmsg="Cancel upload" cancelallmsg="Cancel all Uploads"   uploadingmsg="Uploading.." uploadaddonbuttonmode="Auto" advancedoptionnosilverlight="true" uploadtype="Auto" uploadcursor="Auto" uploadtypepriority="Silverlight,HTML5,Flash,IFrame" maxfileslimit="1" uploadedfilecount="0" showprogressinfo="1" progresstexttemplate="%SEND% of %SIZE%; %T% seconds left"   panelwidth="360" barheight="20" infostyle="padding-left:3px;font:normal 12px Tahoma;" barstyle="Continuous" borderstyle="border:1px solid #444444;" postbackeventreference="__doPostBack('ctl00$ctl00$Dialogs$Dialogs$uplPdf','')" insertbuttonid="Dialogs_Dialogs_btnUploadPdf"   cancelbuttonid="Dialogs_Dialogs_uplPdf__Cancel" progresstextid="Dialogs_Dialogs_uplPdf__ProgressText" progressctrlid="Dialogs_Dialogs_uplPdf__Progress" maxsizekb="51200" extensions="pdf" inserttext="Upload a file" inputboxcsstext="" contextvalue="!3wEWAQVQXFxzczEuaW50ZXJuYWwuYWQubWVyY3VyeXZtcC5jb21cU2hhcmVkIFN0b3JhZ2VcbWVyY3VyeS5hbGFtb2RlLmNvbVxVcGxvYWRlclRlbXBqJn5!30YJ9bQs4t7i2cbnRNiNu2w!2!2"   serverlang="AspNet" id="Dialogs_Dialogs_uplPdfImage_unique" resourcehandler="/CuteWebUI_Uploader_Resource.axd" onload="this.style.display=&quot;none&quot; ; if(!window.CuteWebUI_AjaxUploader_Initialize){var xh=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHttp');xh.open('GET','/CuteWebUI_Uploader_Resource.axd?type=script&amp;_ver=635229096420000000',false);xh.send('');eval(xh.responseText)}CuteWebUI_AjaxUploader_Initialize(this.id);"   onerror="this.onload()" src="/CuteWebUI_Uploader_Resource.axd?type=file&amp;file=continuous.gif" style="display:none;">   <div id="Dialogs_Dialogs_uplPdf__Progress" style="display:none;">     <span id="Dialogs_Dialogs_uplPdf__ProgressText" style="display: none;">Uploading...</span>     <input type="submit" name="ctl00$ctl00$Dialogs$Dialogs$uplPdf$_Cancel" value="Cancel" id="Dialogs_Dialogs_uplPdf__Cancel" style="display: none;">   </div>   <input id="Dialogs_Dialogs_uplFile" name="ctl00$ctl00$Dialogs$Dialogs$uplFile" type="hidden" autocomplete="off" isuploaderfield="1">   <img uniqueid="ctl00$ctl00$Dialogs$Dialogs$uplFile" namespace="CuteWebUI" root="/" verticks="635229096420000000" filetoolargemsg="{0} cannot be uploaded!  File size ({1}) is too large. The maximum file size allowed is set to: {2}." windowsdialoglimitmsg="Unable to select so many files at once. The total file name length cannot exceed 32kb." canceluploadmsg="Cancel upload" cancelallmsg="Cancel all Uploads"   uploadingmsg="Uploading.." uploadaddonbuttonmode="Auto" advancedoptionnosilverlight="true" uploadtype="Auto" uploadcursor="Auto" uploadtypepriority="Silverlight,HTML5,Flash,IFrame" maxfileslimit="1" uploadedfilecount="0" showprogressinfo="1" progresstexttemplate="%SEND% of %SIZE%; %T% seconds left"   panelwidth="360" barheight="20" infostyle="padding-left:3px;font:normal 12px Tahoma;" barstyle="Continuous" borderstyle="border:1px solid #444444;" postbackeventreference="__doPostBack('ctl00$ctl00$Dialogs$Dialogs$uplFile','')" insertbuttonid="Dialogs_Dialogs_btnUploadFile"   cancelbuttonid="Dialogs_Dialogs_uplFile__Cancel" progresstextid="Dialogs_Dialogs_uplFile__ProgressText" progressctrlid="Dialogs_Dialogs_uplFile__Progress" maxsizekb="51200" extensions="pdf,xml" inserttext="Upload a file" inputboxcsstext="" contextvalue="!3wEWAQVQXFxzczEuaW50ZXJuYWwuYWQubWVyY3VyeXZtcC5jb21cU2hhcmVkIFN0b3JhZ2VcbWVyY3VyeS5hbGFtb2RlLmNvbVxVcGxvYWRlclRlbXBqJn5!30YJ9bQs4t7i2cbnRNiNu2w!2!2"   serverlang="AspNet" id="Dialogs_Dialogs_uplFileImage_unique" resourcehandler="/CuteWebUI_Uploader_Resource.axd" onload="this.style.display=&quot;none&quot; ; if(!window.CuteWebUI_AjaxUploader_Initialize){var xh=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHttp');xh.open('GET','/CuteWebUI_Uploader_Resource.axd?type=script&amp;_ver=635229096420000000',false);xh.send('');eval(xh.responseText)}CuteWebUI_AjaxUploader_Initialize(this.id);"   onerror="this.onload()" src="/CuteWebUI_Uploader_Resource.axd?type=file&amp;file=continuous.gif" style="display:none;">   <div id="Dialogs_Dialogs_uplFile__Progress" style="display:none;">     <span id="Dialogs_Dialogs_uplFile__ProgressText" style="display: none;">Uploading...</span>     <input type="submit" name="ctl00$ctl00$Dialogs$Dialogs$uplFile$_Cancel" value="Cancel" id="Dialogs_Dialogs_uplFile__Cancel" style="display: none;">   </div> </div> </span> </div> <div class="DialogFooter">   <div class="MessageBoxButton">     <a id="Dialogs_Dialogs_btnSetCompleteCancel" onclick="return ButtonVerifyEnabled(this, ResetComplete(true));" class="SkinButton sbGray" onmouseover="ButtonHover(this,30);" onmouseout="ButtonLeave(this);" onmousedown="ButtonDown(this,30);" onmouseup="ButtonHover(this,30);"     skinheight="30" style="color:Black;width:72px;height:30px;line-height:30px;">       <div class="SkinButtonLeft"></div>       <div class="SkinButtonRight"></div>Cancel</a>   </div>   <div class="MessageBoxButton">     <a id="Dialogs_Dialogs_btnSetCompleteOK" onclick="return ButtonVerifyEnabled(this, SetStatusComplete());" class="SkinButton sbBlue" onmouseover="ButtonHover(this,30);" onmouseout="ButtonLeave(this);" onmousedown="ButtonDown(this,30);" onmouseup="ButtonHover(this,30);"     skinheight="30" style="color:White;width:72px;height:30px;line-height:30px;">       <div class="SkinButtonLeft"></div>       <div class="SkinButtonRight"></div>OK</a>   </div> </div> </div> 

Here is the HTML after the file upload:

<div id="pbFile_divEmpty" class="EmptyGradient BasicStyling" style="width: 371px; display: inline-block; height: 24px; line-height: 24px;">   <div id="pbFile_divProgress" class="ProgressGradient" style="height: 22px; width: 100%;">     <div class="ProgressBackground BasicStyling" style="width: 371px; height: 22px; line-height: 24px;">       <label id="pbFile_ProgressText" class="ProgressText" style="width: 319px; height: 24px;">Test PDF.pdf</label><i id="pbFile_ProgressIcon" onclick="ProgressBar.CancelUpload('pbFile','pbFile_Icon','Dialogs_Dialogs_uplFile',true,'Required');" class="fa fa-times ProgressIcon" style="left: 344px; line-height: 24px;"></i>     </div>   </div>   <label class="EmptyText " id="pbFile_EmptyText" style="width: 319px; height: 24px; line-height: 20px;">Test PDF.pdf</label><i id="pbFile_Icon" class="fa fa-times EmptyIcon" onclick="ProgressBar.CancelUpload('pbFile','pbFile_Icon','Dialogs_Dialogs_uplFile',true,'Required');" style="line-height: 24px; display: inline-block;"></i> </div> 

I was able to capture the screenshot below once I hit the upload button when uploading a document.

Answer 1

Install Autoit and try the following.

How to install autoit, You can install using this link.

Once you installed.Then do the following things:

Start menu -> All Programs -> AutoIt V3 -> SciTE Script Editor

Copy this and paste there : This is for fire fox

ControlFocus("File Upload","","Edit") Sleep(2000) send("test.txt") Sleep(2000) send("{ENTER}") 

Compile it :

Tools -> Compile or Cntr+F7

Create .exe file from .au3 file:

Start -> All Program -> AutoIt v3 -> Compile Script to .exe

Once you run this .exe file will be created under the folder where .au3 file is located.You need to refer this file in you test code.

My html file

    <html> <body> <script> function uploadOnChange(e) {     var filename = e.value;var lastIndex = filename.lastIndexOf("\\");     if (lastIndex >= 0) {         filename = filename.substring(lastIndex +1);     }     document.getElementById('filename').value = filename; } </script> <input id="upload" type="file" onChange="uploadOnChange(this)" /> <input id="filename" type="text" />   </body> </html> 

My Test code :

    import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.firefox.FirefoxDriver; import org.testng.annotations.Test;  import java.io.IOException; import java.util.concurrent.TimeUnit;  public class FileUploadTest {      private static WebDriver driver = null;      @Test     public void testFileUpload() throws IOException, InterruptedException, IOException {          driver = new FirefoxDriver();          driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);          driver.get("file:///C:/Users/sv/Desktop/uploadDoc.html");          driver.findElement(By.id("upload")).click();          Runtime.getRuntime().exec("<exe file path>");          Thread.sleep(6000);          System.out.println(driver.findElement(By.id("filename")).getText());          driver.close();      } } 

For more info, Please refer this link