Python Selenium automation test unable to upload file on Mac

Question

I'm trying to fix a Python test script and make it work in Mac. This script was written by someone else and would work in Windows, but not in Mac. The bug is related to the implementation of automate testing the upload file feature(either by drag&drop or click "browse file" to select) in my company's website.

FYI: AutoIt is installed and only available in Windows, but I don't think that's related to this issue.

I tried to search for some solutions specifically for python selenium in Mac. I followed this but doesn't work: https://www.youtube.com/watch?v=kiYmBvv94RY&t=4s Most of what I found is to use the naive send_keys() method.

No matter what I try, it seems to me that I have to deal with the pop up window for selecting file in Mac, which I get stuck in automation test.

Summary of what I tried: I inspect the page(attatched in screenshot) and copy the Xpath of the "drag&drop" area. Then send_keys() with my absolute file path. When my cursor moves to the "drag&drop" area, my file name shows up but the file was not actually uploaded.

What I have in mind: by looking at the source code, I guess the reason why send_keys() with absolute file path won't work because the handleUploadClick function creates a new input and it's in div instead of directly input tag.

Some snippets of my code:

Online solution:

    driver = webdriver.Chrome()

    driver.find_element(By.XPATH, "//div[@class='order-modal-btn']").click()

    drag_drop_area = driver.find_element(By.XPATH, "//div[@class='order-upload-content-drag-area']/input")

    drag_drop_area.send_keys(file_to_use)

Original solution in my script:

    def typeKeys(keys):
        keyboard = Controller()
        keyboard.type(keys) # In Mac, this line will open up the "Go to Folder window" command + shift + G


    keyboard.press(Key.enter)
    #Original code for uploading file
    log_in.typeKeys(file_to_use)

Some of the source code for the feature in front end:

            <div className="order-modal-content-upload-bar">
                <div className="order-modal-file">{fileBtnContent}</div>
                <div className="order-modal-btn" onClick={handleUploadClick}>
                    Browse Files
                </div>
            </div>

            <div className="order-upload-content-drag-area">
                <input
                    className="order-upload-content-drag-area-input"
                    type="file"
                    multiple
                    onClick={handleUploadClick}
                    onDrop={handleUploadDrop}
                />
                <div>{`Drag & Drop to upload a file`}</div>
            </div>

    function handleUploadClick() {
        const pageContainer = document.getElementsByClassName('app-container')[0]
        let input = document.createElement('input')
        input.type = 'file'
        input.style = 'width: 0px; height: 0px;'
        input.multiple = false // only one file able to be selected

        input.onchange = e => {
            console.log('upload-e', e)
            let userFile = e.target.files[0]
            setFile(userFile)
            pageContainer.removeChild(input)
        }

        pageContainer.appendChild(input)
        input.click()
    }