Unable to upload a file to the "browse" button using sendKeys() in Selenium Java

Question

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>

Could you add more html? maybe you should get attached to the parent elements — Evgeniy Chiruk
– Evgeniy Chiruk, Commented Jan 23, 2020 at 10:20
@Evgeniy Even if i try getting the parent element and attach to it, nothing happens. The sendKeys() does not work. I thought maybe that's becuase i only have to attach it to the input element? — PratikshaB
– PratikshaB, Commented Jan 23, 2020 at 11:13
@EvgeniyChiruk I have added additional HTML to the question. Please check that and help me. — PratikshaB
– PratikshaB, Commented Jan 23, 2020 at 11:20

Guy · Accepted Answer · 2020-01-23 11:43:24Z

2

The second element has multiple attribute, you can search for an element without it

By.xpath("//input[contains(@name,'qqfile')][not(@multiple)]")

Or with cssSelector

By.cssSelector("[name='qqfile']:not(multiple)")

The style attribute make the <input> field invisible. If it can't be made visible by UI action you can set the value attribute with JavaScript

String pathToFile = "path";
WebElement fileField = driver.findElement(By.xpath("//input[contains(@name,'qqfile')][not(@multiple)]"));
driver.executeScript("arguments[0].value = 'arguments[1]';", fileField, pathToFile);

edited Jan 23, 2020 at 11:43

answered Jan 23, 2020 at 10:26

Guy

51.2k10 gold badges49 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

PratikshaB Over a year ago

I tried what you asked but I'm getting an error org.openqa.selenium.ElementNotVisibleException: Element is not displayed (WARNING: The server did not provide any stacktrace information) But the element is present and loaded because if I try to get it's parent element it doesn't throw any error.

Guy Over a year ago

@PratikshaB The style attribute make it hidden, maybe you need to click something first to make it visible?

Guy Over a year ago

@PratikshaB You can see button "Choose File"?

PratikshaB Over a year ago

I can see the button "Browse"

Guy Over a year ago

@PratikshaB The browse in another element, the <div> before the <input>.

|

Evgeniy Chiruk · Accepted Answer · 2020-01-23 11:30:23Z

0

Try this xpath:

By.xpath("//div[@id='annUploadDoc']//input[contains(@name,'qqfile')]")

answered Jan 23, 2020 at 11:30

Evgeniy Chiruk

3581 silver badge10 bronze badges

2 Comments

PratikshaB Over a year ago

I tried the Xpath but I am getting the same error org.openqa.selenium.ElementNotVisibleException: Element is not displayed (WARNING: The server did not provide any stacktrace information) Can you please help me out with this? I am not sure why I am getting this error.

Evgeniy Chiruk Over a year ago

I think this link can help you: groups.google.com/forum/#!topic/selenium-users/LdM4hKdIfv4

Tanuj Vishnoi · Accepted Answer · 2020-01-23 12:02:16Z

0

The input is hidden because of the the parent div has the hidden attribute in style. I guess you are explicitly waiting for the visibility of input element(may be method your are using doing that). If your locator is correct , then simple do that using driver instance.

driver.findElement(By.cssSelector("your path")).sendKeys("file path")

It wont give you the element not visible exception atleast.

answered Jan 23, 2020 at 12:02

Tanuj Vishnoi

3292 silver badges10 bronze badges

13 Comments

PratikshaB Over a year ago

I tried your solution and I am not getting the element not visible exception its now: org.openqa.selenium.NoSuchElementException: Unable to find element with css selector == "//input[@name='qqfile'][not(@multiple)]"

Tanuj Vishnoi Over a year ago

Now its clear that the locator is incorrect. if not then there is a possibility that the element is in a frame or driver instance is on some other tab

PratikshaB Over a year ago

if you could help me with the locator. The element is not in a different frame. I checked that already. And the driver instance is on the same tab because its able to perform the next operations on the form.

Tanuj Vishnoi Over a year ago

the above shared html has only one input element with name attribute. It is very hard to guess locator without having full html of page. You can try the below css and see how many element you can see in dom. css: #annUploadDoc input[title][qq-button-id]

PratikshaB Over a year ago

I searched using your CSS. there's just one element with that css in the html page! can you help me identify locator now?

|

PratikshaB · Accepted Answer · 2020-01-31 11:15:58Z

0

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.

answered Jan 31, 2020 at 11:15

PratikshaB

376 bronze badges

Collectives™ on Stack Overflow

Unable to upload a file to the "browse" button using sendKeys() in Selenium Java

4 Answers 4

19 Comments

2 Comments

13 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

19 Comments

2 Comments

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related