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.

Are you able to identify the 'x' that appears next to the file name once uploaded? If so you could include code to wait for visibility of the 'x'. — Sai
– Sai, Commented Oct 17, 2016 at 14:47
If I could get the document to appear as uploaded, I would be able to, however, the problem is the document gets uploaded, but it does not get reflected in the dialog. The box remains the same as the first image showing Required — Dustin N.
– Dustin N., Commented Oct 17, 2016 at 14:55
Are there absolutely no changes on the UI when the path to the file is entered? — Sai
– Sai, Commented Oct 18, 2016 at 14:11
No, unfortunately not. The document does get uploaded and attached to the order, but nothing in this screen reflects that at that — Dustin N.
– Dustin N., Commented Oct 18, 2016 at 14:23
That's actually quite helpful. Once the input is enabled, try the script here stackoverflow.com/questions/12363038/… instead of a standard sendKeys and then click somewhere random to ensure that the action is actually performed. That did the trick on zamzar.com. Don't have the code handy at the moment. Will send it to you when I access my system. — Sai
– Sai, Commented Oct 20, 2016 at 19:17

piet.t · Accepted Answer · 2017-07-19 06:52:49Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related