Join Slack

Automate upload file dialog in web automation

Table of contents

Overview

Sometimes there could be a dialog that needs to be handled when doing web automation, like file upload dialog, print dialog, or save as dialog. The problem is that the libraries that we use to do web automation normally do not support automating these dialogs.

I will introduce two different ways of handling file upload dialog in web automation here.

I am taking web email as an example to introduce two different ways to handle upload file dialog in python.

  • selenium + pyautoit
  • clicknium

Walkthrough

The upload file dialog is pop up when selecting a file as an email attachment. The dialog is part of the chrome browser, not part of the web page. Check the image as below.

Selenium + Pyautoit​

Selenium is used to automate web pages, and pyautoit for dialog. Steps overview as below:

  • Start a chrome browser and log into the account;
  • Attach to the chrome browser by selenium;
  • Use selenium to automate clicking the email attach files button to pop up file upload dialog;
  • Use pyautoit to automate the upload file dialog;

To focus on automating the key part, I didn’t start with opening a new browser and logging into the email account. Instead, I open the browser and login email manually, then automate it by attaching it with selenium.

  1. Start chrome browser as debugging mode with the below command, then login to the email account in this browser.
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=8888
  1. Start selenium driver with debugger options, code as below.
from time import sleep
from selenium import webdriver
from selenium.webdriver import ChromeOptions
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
options = ChromeOptions()
options.debugger_address = "127.0.0.1:" + '8888'
browser = webdriver.Chrome(service=Service(executable_path="C:\\Program Files\\Google\\Chrome\\Application\\chromedriver.exe"), options=options)
browser.get("https://mail.contoso.com/mail/u/0/#inbox?compose=new")
  1. With the above email web url, there will be an email composing popup after opening the page. So I will use selenium to directly click the “attach files” button (notice the selector in the below code may not be working since the page could be changing).
# sleep 3 seconds for the page to get ready
sleep(3)
# click the "attach files" button
browser.find_element(By.XPATH, "//*[@id=':tk']").click()
  1. When the upload dialog is pop up, use pyautoit to automatically select a file and upload it.
import autoit
autoit.control_send("[CLASS:#32770]","Edit1","C:\\test\\files\\attachment1.txt")
autoit.control_click("[CLASS:#32770]", "Button1")

Full code as below with selenium + pyautoit

  • Install python packages
pip install selenium
pip install pyautoit
  • Full python code
from time import sleep
from selenium import webdriver
from selenium.webdriver import ChromeOptions
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
import autoit

# attach to the existing browser
options = ChromeOptions()
options.debugger_address = "127.0.0.1:" + '8888'
browser = webdriver.Chrome(service=Service(executable_path="C:\\Program Files\\Google\\Chrome\\Application\\chromedriver.exe"), options=options)
browser.get("https://mail.contoso.com/mail/u/0/#inbox?compose=new")
sleep(3)

# click the "attach files" button
browser.find_element(By.XPATH, "//*[@id=':tk']").click()

# input file path and click the "open" button
sleep(3)
autoit.control_send("[CLASS:#32770]", "Edit1", "C:\\test\\files\\attachment1.txt")
autoit.control_click("[CLASS:#32770]", "Button1")

Clicknium​

Clicknium can be used to automate web pages and upload dialog. Steps overview as below:

  • Start a chrome browser and log into the account
  • Attach to the chrome browser by clicknium
  • Use clicknium to automate clicking the email “attach files” button to pop up a file upload dialog
  • Use clicknium to automate the upload file dialog

Details of each step and code are as follows:

  1. Start chrome browser as normal, install a clicknium extension for chrome browser
  2. Attach to the chrome browser by clicknium
from clicknium import clicknium as cc, locator, ui
browser = cc.chrome.attach_by_title_url(url="https://mail.contoso.com/*")
  1. Automate clicking the “attach files” button. The locators can be captured by using clicknium visual studio code extension
browser.find_element(locator.chrome.mail.attach).click(by="mouse-emulation")
  1. When the upload dialog is pop up, automatically select a file and upload it
ui(locator.chrome.file_path).set_text("C:\\test\\files\\attachment1.txt")
ui(locator.chrome.button_open).click()

Full code as below with clicknium​

  • Install python package
pip install clicknium
  • Full python code
from clicknium import clicknium as cc, locator, ui
browser = cc.chrome.attach_by_title_url(url="https://mail.contoso.com/*")
browser.find_element(locator.chrome.mail.attach).click(by="mouse-emulation")
ui(locator.chrome.file_path).set_text("C:\\test\\files\\attachment1.txt")
ui(locator.chrome.button_open).click()

If you are automating the Save As dialog in web automation, you can probably try the same way as above. For print dialog of a web page, it could be a different way, which I will share in the next post.

What are your feelings