I am trying to automate the upload file function. I have tried using different xpaths to get input element
but it seems that I am probably not doing something right.
My input element does not have an id
<input name="qqfile" title="file input" style="margin: 0px; padding: 0px; top: 0px; height: 100%; right: 0px; font-family: Arial; font-size: 3500px; position: absolute; cursor: pointer; opacity: 0;" type="file" qq-button-id="7ca76e6f-e8ac-49f4-ab1e-c143e4af60d8">
And there is another input element in the same html with the same name.
<input name="qqfile" title="file input" style="margin: 0px; padding: 0px; top: 0px; height: 100%; right: 0px; font-family: Arial; font-size: 3500px; position: absolute; cursor: pointer; opacity: 0;" type="file" multiple="" qq-button-id="b5ebbdcb-6f33-4f10-a569-5dba94f54d0e">
Hence when I use, By.xpath("//input[contains(@name,'qqfile')]
I get an Element not visible exception
I think this is because of the 2 elements present with same name in the context.
How can I uniquely identify each of the elements?
Additional HTML code:
<div tabindex="15" id="annUploadDoc"><div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container qq-hide">
<div class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" style="display: none;" qq-hide-dropzone="">
<span>Drop files here to upload</span>
</div>
<div class="qq-upload-button-selector qq-upload-button" style="overflow: hidden; position: relative; direction: ltr;">
<div class="btn upload btn-style-3">
<div>Browse</div>
</div>
<input name="qqfile" title="file input" style="margin: 0px; padding: 0px; top: 0px; height: 100%; right: 0px; font-family: Arial; font-size: 3500px; position: absolute; cursor: pointer; opacity: 0;" type="file" qq-button-id="fd389870-bdb2-480e-8138-8f2ff762de22"></div>
<span class="qq-drop-processing-selector qq-drop-processing qq-hide">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals"></ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<a class="qq-cancel-button-selector" href="javascript:void(0)">Close</a>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<a class="qq-cancel-button-selector" href="javascript:void(0)">No</a>
<a class="qq-ok-button-selector" href="javascript:void(0)">Yes</a>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<a class="qq-cancel-button-selector" href="javascript:void(0)">Cancel</a>
<a class="qq-ok-button-selector" href="javascript:void(0)">Ok</a>
</div>
</dialog>
</div></div>
I found the solution to my problem. It was the IEDriver that I was using. Apparently, IEDriver renders the webpage elements in a certain way. After switching to the ChromeDriver the upload using SendKeys() worked fine.