Intellipaat Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
in DevOps and Agile by (19.7k points)

@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);

File is not showing uploaded

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:

enter image description here

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.

enter image description here

1 Answer

0 votes
by (62.9k points)

Follow the below process to install AutoIt:

To install AutoIt initial download the AutoIt exe file from the below location.

Click here to Download AutoIt exe file

About AutoIT: AutoIt v3 is a freeware BASIC-like scripting language designed for automating the Windows graphical user interface and general scripting.

Step 1:

Click on the download at AutoIt Full Installation

Step 2:

Click on the AutoIt Exe file.

AutoIt Setup

Step 3:

It will display the setup wizard screen and asks you to click on the Next button.

It will additionally show the version of AutoIt that your installing.

 

Click on Next button to proceed for installation

image

 

Step 4:

It will display the License Agreement screen. Click on 'I Agree' Button in order to accept the terms of the agreement if you want to continue the installation.

image

Step 5:

If you are running on a 64-bit Operating system, it will ask you to choose from the below two options.

1. Use native x64 tools by default

2. Use x86 tools by default (recommended for compatibility)

Choose the recommended one and click on 'Next' button

image

 

Step 6:

It will ask to pick a default after you 'double click' on the *.au3 (AutoIt file extension) files.

It will display with two options

1. Run the Script

2. Edit the Script

Choose whichever you are comfortable with and click on the 'Next' button

image

 

Step 7:

Next, it will ask you to choose what type of installation you want. It will also show you the amount of space that is required for the AutoIt.

Choose all and click on the 'Next' button, which will download all the AutoIt examples which will definitely help you writing the scripts

image

 

Step 8:

It will ask you to choose the location to install AutoIt. By default, it will take the destination folder as Program files. If you wish to change, you can change the destination folder.

Click on the 'Install' button to finish the installation

image

 

It will show a message as, 'Please wait.. installation is in progress'.

After that, it will display a message as "AutoIt vX.00 has been installed successfully on your computer".

image

After you have successfully installed Autoit and try the following.

Once you have installed Autoit, you can then perform the following steps:

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

enter image description here

Copy this and paste there. Note that this is for Firefox:

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

 

 

enter image description here

Compile it :

Tools -> Compile or Ctrl+F7

Create .exe file from .au3 file:

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

enter image description here

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();

 }

}

Browse Categories

...