| title | id | slug | sidebar_label | description | hide_table_of_contents | level | number | publish_date | image | tags | category | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
How To Upload a File |
1-upload-a-file |
/1-upload-a-file |
How To Upload a File |
Uploading a file is a common piece of functionality found on the web but when trying to automate it, you get prompted with a dialog box that is just out of reach of your automation script. |
true |
1 |
1 |
2015-07-19 |
img/cards/1-upload-a-file.png |
|
|
Uploading a file is a common piece of functionality found on the web but when trying to automate it, you get prompted with a dialog box that is just out of reach of your automation script.
In these cases people often look to a third-party tool to manipulate this window (e.g., AutoIt). While this can help solve your short-term need, it sets you up for failure later by chaining you to a specific platform (e.g., AutoIt only works on Windows), effectively limiting your ability to test this functionality on different browser & operating system combinations.
A work-around for this problem is to side-step the system dialog box entirely. We can do this by inserting the full path of the file we want to upload (as text) into the form and then submit the form.
Let's step through an example.
NOTE: We are using a file upload example found on the-internet.
import DisplayTips from '@site/src/components/displayTips';
<DisplayTips languages={[ {label: 'Python', value: 'python'}, {label: 'C#', value: 'csharp'}, {label: 'Java', value: 'java'}, {label: 'JavaScript', value: 'javascript'}, {label: 'Ruby', value: 'ruby'}, {label: 'Selenide', value: 'selenide'}, ]}/>
After executing the test, this is what will happen:
- Open the browser
- Visit the upload form page
- Inject the file path into the form and submit it
- Page displays the uploaded filename
- Grab the text from the page and assert it's what we expect
- Close the browser
This approach will work across all browsers. If you want to use it with a remote instance (e.g., on Selenium Grid or Sauce Labs) then you'll want to have a look at remote uploads.
Happy Testing!
import DefaultAvatar from "@site/src/components/defaultAvatar";
<DefaultAvatar name="Mike Millgate" imgSrc={"https://github.com/trabulmonkee.png"} description={"Contributed the Python code for this tip."} url={"https://github.com/trabulmonkee"} /> <DefaultAvatar name="Isaul Vargas" imgSrc={"https://github.com/isaulv.png"} description={"Python code review"} url={"https://github.com/isaulv"} /> <DefaultAvatar name="Peter Bittner" imgSrc={"https://github.com/bittner.png"} description={"Python code review"} url={"https://github.com/bittner"} /> <DefaultAvatar name="Jonathan Taylor" imgSrc={"https://github.com/jtay2380.png"} description={"Contributed the initial C# code for this tip."} url={"https://github.com/jtay2380"} /> <DefaultAvatar name="Manoj Kumar" imgSrc={"https://github.com/manoj9788.png"} description={"Contributed the initial JavaScript code for this tip."} url={"https://github.com/manoj9788"} /> <DefaultAvatar name="Roman Isko" imgSrc={"https://github.com/sturman.png"} description={"Contributed the initial Java code for this tip."} url={"https://github.com/sturman"} /> <DefaultAvatar name="Andrei Solntsev" imgSrc={"https://github.com/asolntsev.png"} description={"Contributed the Selenide code for this tip."} url={"https://github.com/asolntsev"} />
<DefaultAvatar name="Dave Piacente" imgSrc={"https://github.com/tourdedave.png"} description={"Original creator of Elemental Selenium"} url={"https://github.com/tourdedave"} author={true} />
<DefaultAvatar name="Diego Molina" imgSrc={"https://github.com/diemol.png"} description={"Current maintainer of Elemental Selenium"} url={"https://github.com/diemol"} author={true} />
