javascript - How to upload files in a WordPress post using Selenium Python? - Stack Overflow

I was trying to automate a WordPress post content creation using Selenium Webdriver (Python). Unfortunately, I can not upload files in the post content. I have searched for the solution but most of them used send_keys which is not applicable for WP insert media (see image below). In the insert media, there are two options:

1. Select files
2. Drag files

I need a solution which will work for cross-platform (Windows, Linux etc). I guess there might be a way using some jQuery, JS or something else. I am not very familiar with JS so I did not understand the solutions with JS.

P.S. I am working in Python, so a Python code will be helpful.

Here is the source for the media insert frame in case you need them:

<div class="media-frame-content">
    <div class="uploader-inline">

        <div class="uploader-inline-content no-upload-message">

            <div class="upload-ui">
                <h2 class="upload-instructions drop-instructions">Drop files anywhere to upload</h2>
                <p class="upload-instructions drop-instructions">or</p>
                <a href="#" class="browser button button-hero" style="display: inline; position: relative; z-index: 1;" id="__wp-uploader-id-1">Select Files</a>
            </div>

            <div class="upload-inline-status">
                <div class="media-uploader-status" style="display: none;">
                    <h2>Uploading</h2>
                    <button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text">Dismiss Errors</span>
                    </button>

                    <div class="media-progress-bar">
                        <div></div>
                    </div>
                    <div class="upload-details">
                        <span class="upload-count">
                <span class="upload-index"></span> / <span class="upload-total"></span>
                        </span>
                        <span class="upload-detail-separator">–</span>
                        <span class="upload-filename"></span>
                    </div>
                    <div class="upload-errors"></div>
                </div>
            </div>

            <div class="post-upload-ui">

                <p class="max-upload-size">Maximum upload file size: 32 MB.</p>

            </div>
        </div>
    </div>
</div>

I was trying to automate a WordPress post content creation using Selenium Webdriver (Python). Unfortunately, I can not upload files in the post content. I have searched for the solution but most of them used send_keys which is not applicable for WP insert media (see image below). In the insert media, there are two options:

1. Select files
2. Drag files

I need a solution which will work for cross-platform (Windows, Linux etc). I guess there might be a way using some jQuery, JS or something else. I am not very familiar with JS so I did not understand the solutions with JS.

P.S. I am working in Python, so a Python code will be helpful.

Here is the source for the media insert frame in case you need them:

<div class="media-frame-content">
    <div class="uploader-inline">

        <div class="uploader-inline-content no-upload-message">

            <div class="upload-ui">
                <h2 class="upload-instructions drop-instructions">Drop files anywhere to upload</h2>
                <p class="upload-instructions drop-instructions">or</p>
                <a href="#" class="browser button button-hero" style="display: inline; position: relative; z-index: 1;" id="__wp-uploader-id-1">Select Files</a>
            </div>

            <div class="upload-inline-status">
                <div class="media-uploader-status" style="display: none;">
                    <h2>Uploading</h2>
                    <button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text">Dismiss Errors</span>
                    </button>

                    <div class="media-progress-bar">
                        <div></div>
                    </div>
                    <div class="upload-details">
                        <span class="upload-count">
                <span class="upload-index"></span> / <span class="upload-total"></span>
                        </span>
                        <span class="upload-detail-separator">–</span>
                        <span class="upload-filename"></span>
                    </div>
                    <div class="upload-errors"></div>
                </div>
            </div>

            <div class="post-upload-ui">

                <p class="max-upload-size">Maximum upload file size: 32 MB.</p>

            </div>
        </div>
    </div>
</div>

• javascript
• python
• wordpress
• selenium
• file-upload

Share Improve this question Follow edited Mar 23, 2017 at 13:35 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Mar 23, 2017 at 11:24 zafi005zafi005 50011 gold badge55 silver badges1212 bronze badges 6

• Can you share URL if it is public page? – Andersson Commented Mar 23, 2017 at 11:33
• Why sendKeys is not applicable, what happens after you click on selectFiles? I doubt it that you will find a 'dragable' selenium solution. An alternative solution, will be to use their API instead of front end, but that is not much selenium, I guess. – Xwris Stoixeia Commented Mar 23, 2017 at 11:34
• @Andersson sorry, this is not a public page. – zafi005 Commented Mar 23, 2017 at 11:35
• Actually, there might be javaScript solutions out there notonlyanecmplace./… – Xwris Stoixeia Commented Mar 23, 2017 at 11:37
• @XwrisStoixeia When I click on select files it opens the window to select the files and after selecting, the file uploads automatically and redirect to the file listing page. SO the click upload button is missing (it's doing automatically with some JS may be). – zafi005 Commented Mar 23, 2017 at 11:38

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

Finally, I've got a solution for WP add media file upload. Actually, I have found that when the file selection window opens upon clicking the select files button, it generates a dynamic input field. Dynamic means, the ID for the input field is unique each time. Fortunately, the first part of the input field's ID remains same. For example, the ID is like html5_1bc7564i41pq5f7m1voce561a0e5. See the HTML below:

<input id="html5_1bc7564i41pq5f7m1voce561a0e5" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="" type="file"/>

So, what I did is, create an XPATH using the first part of the ID (html5_) and simply used send_keys and it worked perfectly. My XPATH is like:

input_file = "//input[starts-with(@id,'html5_')]"

The selenium code is:

driver.find_element_by_xpath(input_file).send_keys(file_path)

Here, file_path is the location of the file which I need to upload.

I missed the input field at the first place because it was not visible and did not realize that it is associated with the file upload. So I record the file upload steps with selenium IDE and found the dynamic input ID.

Thanks everyone, for all the suggestions and guidance.

drag and drop is possible: Python Selenium WebDriver drag-and-drop

you can try move mouse and click "manually": http://selenium-python.readthedocs.io/api.html#selenium.webdriver.mon.action_chains.ActionChains.move_to_element

Here is the solution for you using AutoIT.

1. WordPress provides a select button to Upload New Media. So let us take help of that functionality.
2. On clicking "Select Files", File Upload dialog box would open up.
3. Pass the properties of File Upload dialog box to AutoIT exe.
4. AutoIT will fill up the filepath area with the selected file.
5. Now let the WebDriver click on the "Upload" button.

Let me know if this answers your query.