How to automate file-uploading dialog in web automation?

[seanren]

When generating web automation, you may come across a situation where you need to handle a dialog, such as saving or uploading or printing a file. The issue is that the libraries for web automation normally do not support you automating these dialogs.

Let’s explore two different approaches to handle file dialogs in python, Selenium + Pyautoit vs. Clicknium, by taking web email as the example.

The file uploading dialog pops up when selecting a file as an email attachment. It is part of the chrome browser, not part of the web page. Check out 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.
• 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
• 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 Serviceoptions = 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.google.com/mail/u/0/#inbox?compose=new")

With the above email web URL, there will be an email composing pop-up after opening the page. So let’s 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, please leave a comment if you have any suggestions about writing a stable selector for this button).
# sleep 3 seconds for the page to get ready
sleep(3)
# click the "attach files" button
browser.find_element(By.XPATH, "//*[@id=':tk']").click()

When the upload dialog is pop up, use pyautoit to automatically select a file and upload it.
import autoitautoit.control_send("[CLASS:#32770]","Edit1","C:\\test\\files\\attachment1.txt")
autoit.control_click("[CLASS:#32770]", "Button1")

The full code is displayed 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.google.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

Now let’s use Clicknium to automate web pages and file uploading 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:
• Start chrome browser as normal, install a clicknium extension for chrome browser;
• Attach to the chrome browser by clicknium
from clicknium import clicknium as cc, locator, uibrowser = cc.chrome.attach_by_title_url(url="https://mail.google.com/*")

• Automate clicking the “attach files” button. The locators can be captured by using this visual studio code extension
browser.find_element(locator.chrome.mail.attach).click(by="mouse-emulation")

• 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()

The full code is as following with Clicknium:

• Install python package
pip install clicknium

• Full python code

from clicknium import clicknium as cc, locator, uibrowser = cc.chrome.attach_by_title_url(url="https://mail.google.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 take the same approach as above. For print dialog, it could be a different one, stay tuned and we will share in the next post.

Gribouillis write Jul-29-2022, 03:41 AM:
Please post all code, output and errors (it it's entirety) between their respective tags. Refer to BBCode help topic on how to post. Use the "Preview Post" button to make sure the code is presented as you expect before hitting the "Post Reply/Thread" button.

[sharmajaafar]

Thank you. I tested and it's great.