TestProject Forum
Powered by leading experts in the test automation community

[WEB] Browse file from local storage after "Upload" button click

Good day. I just wanted to ask if there’s a workaround for browsing a file to upload except from File Upload addon which is either I don’t know how to use or just not working. Kindly advise. Thanks!

Hi @gerard.benavides,

The File Upload addon is working fine.
You can use the action called “Upload File using XPath”. This action takes two input parameters:

  1. Path: The path to your locally stored file

  2. Xpath: The xpath of the element that uploads the file. Usually, it’s an input element and you can try using this xpath: //input[@name=‘file’]​

Let me know if it helped you,
Amit

Now that’s a quick response.

I’ve tried the Upload File using XPath addon but it seems it doesn’t work on my end. I think I’m not doing the right thing.

In my case:

  1. Path - C:\logo.png​
  2. Xpath - /html/body/gon-root/div/gon-challenge-draft/mat-drawer-container/mat-drawer-content/form/mat-grid-list[1]/div/mat-grid-tile[1]/figure/div/gon-image-upload/div/div/div/div/button​ (This is the “Upload” button)

Please refer to the attached

Thanks!

Hi @gerard.benavides,

Can you please try using this XPath: //input[@name = ‘file’] ?
If it’s still not working, please send me a screenshot of this input element’s attributes.

Kind regards,
Amit

Hello @amit.yahav, //input[@name = ‘file’] is not working for me.

Here’s the attributes of that element

Screenshot_2

Are you sure that this is the input element?
Can you please send me a screenshot of the input element from the Chrome dev tools?

I’m not really that sure but that button opens the File Explorer and is the only way to choose a file from my local storage. Here’s the UI for it Screenshot_3

I think that this button is merely wrapping the input element that opens the file explorer.
Could you please inspect this button and try to find the input element in it?
If it’s OK by you, I would like to get the URL of your website so that I will test it myself.

Hi @amit.yahav, unfortunately I can’t give the site to you since it’s an admin app.

My bad for giving you the wrong input element. I’ve asked my dev and gave me the input element which is <input _ngcontent-c19="" accept="image/png, image/jpeg" style="display: none" type="file">

Thanks!

That’s fine @gerard.benavides :slight_smile:
Can you please try using this XPath?

//input[@type = ‘file’]

I’m not sure what I’m doing wrong.
Image file path is valid and already tried //input[@type = ‘file’] as xpath :grimacing:

image

Thank you for your patience

What error are you getting?

Hi @amit.yahav, I was on a meeting and when I got back, my agent restarted and rerun my test and it works! I’m not sure how but it works, can’t compain! haha

I have 1 more question, what if I have 2 input elements for file in 1 page, how can I up upload a file to the other one?

Hi @gerard.benavides,
I’m really glad that it worked!

In case you have two input elements, you should be more specific with your XPath. You can combine more attributes to it or even use the ancestor elements in the XPath.

The best solution of course would be to ask your developers to add an id to each input element.

I was worried since 2 input elements has no id, I tried specifying each input element with their respective xpath and it works!

This is what I did ​/html/body/gon-root/div/gon-challenge-draft/mat-drawer-container/mat-drawer-content/form/mat-grid-list[1]/div/mat-grid-tile[1]/figure/div/gon-image-upload/div/input[@type='file'], I added the full xpath + [@type=‘file’]

Hope this also helps other testers.

Thank you for your help and patience throughout, @amit.yahav!

Thank you @gerard.benavides for sharing your solution!
I’m sure it will help others :slight_smile:

I’m really happy I could help you solve this issue. Feel free to reach out at any time!

Amit

1 Like