Chargement d'une image via une fenêtre MacOS avec Selenium

Question

Mise en place

J'utilise Python 3.x et Selenium pour travailler sur le back-end d'une boutique en ligne.

J'ai besoin de télécharger une image de produit depuis mon ordinateur sur le back-end de la plateforme.

---

Problème

Le bouton de téléchargement d'image est cliquable avec Selenium, mais le clic entraîne l'apparition d'un sélecteur de fichiers MacOS.

Selenium ne fonctionne pas sur le sélecteur de fichiers de MacOS. J'ai cherché comment résoudre ce problème et j'ai trouvé les réponses suivantes,

1. https://stackoverflow.com/a/6129464/7326714
2. http://www.seleniumstutorial.com/uploading-a-file-in-selenium-with-python/
3. https://stackoverflow.com/a/10472542/7326714

Cependant, rien de tout cela ne fonctionne.

Le code html autour du bouton est le suivant,

<td class="control">

<div class="hide-input">
    <input data-val="true" data-val-required="The Image field is required." id="FileName" name="FileName" type="text" value="File636578585362423712.png">
</div>

<div id="uploadifive-FileNameUpload" class="uploadifive-button" style="height: 18px; line-height: 18px; overflow: hidden; position: relative; text-align: center; width: 50px;">Upload<input id="FileNameUpload" type="file" name="FileNameUpload" data-editor="#FileName" data-url="http://also-inc.demohoster.com/upload/uploadfile" data-path="~/UserFiles/Products/Images/" data-maxsize="10240" data-extensions="*.jpg;*.jpeg;*.png;*.gif;*.bmp;" data-thumbnailwidth="128" data-thumbnailheight="128" data-thumbnailpath="/UserFiles/Products/Images/Preview/" data-uniquename="True" data-preview="/UserFiles/Products/Images/Preview/File636578585362423712.png" data-isnew="false" data-auth="2CDE59B99D5F034087CA006254189C31F4388BA02DDE1CD1752A2FCFDE6EB556406CAF9D82DE4E02AC4D7D9813E2CF8B2A1413EF7CE8CA22FDD9822130B4EC239F1BD305F8AA1E5F6E9EFD1CD64138B8A621A88A675A3A528B7DF2F0388C36C473CBAD080CF826A28A3464FB719D039690241E38" data-session="jx134u0kcaxfu4jz1darurvg" class="file-uploader hide-input" style="display: none;"><input type="file" style="font-size: 18px; opacity: 0; position: absolute; right: -3px; top: -3px; z-index: 999;"></div>
<div id="uploadifive-FileNameUpload-queue" class="uploadifive-queue"></div>
</td>

---

Essais

J'ai essayé de cliquer sur le bouton et d'envoyer les clés,

browser.find_element_by_id('uploadifive-FileNameUpload').click()
browser.find_element_by_id('uploadifive-FileNameUpload').send_keys('path/to/MyImage.jpeg')

(a également essayé id 'uploadifive-FileNameUpload-queue' et id 'FileName' dans toutes les combinaisons possibles)

Et j'ai essayé d'envoyer sans cliquer, c'est-à-dire browser.find_element_by_id('uploadifive-FileNameUpload').send_keys('path/to/MyImage.jpeg') . Encore une fois pour toutes les clés.

Quoi que je fasse, j'obtiens toujours un ElementNotInteractableException .

---

C'est la première fois que j'essaie de télécharger une image de cette manière, et je suis bloqué.

Comment résoudre ce problème ?

Answer 1

Désactiver le sélecteur de fichiers et appeler sendKeys sur un <input type="file"> qui est, de par sa conception, le seul type d'élément autorisé à recevoir/tenir un fichier :

# disable the OS file picker
browser.execute_script("""
    document.addEventListener('click', function(evt) {
      if (evt.target.type === 'file')
        evt.preventDefault();
    }, true)
    """)

# make an <input type="file"> available
browser.find_element_by_id('uploadifive-FileNameUpload')\
    .click()

# assign the file to the <input type="file">
browser.find_element_by_css_selector('input[type=file]')\
    .send_keys('path/to/MyImage.jpeg')