2

I would like to check in my test (selenium / python) creating a new image on the site. I need to load a picture for it. How can I do this when I have the option to use the drop or file explorer field. As far as I know, I can not use the file explorer because there is no id or name. How to use the drag and drop method?

I have this code but it does not work:

element = driver.find_elements_by_id ("file_upload")
element.send_keys ( "C: \\ Users \\ Desktop \\ Robert \\ Construct_ImminentCollision-C.jpg")
target = driver.find_element_by_id ("add-new-pano")

action_chains = ActionChains (driver)
action_chains.drag_and_drop (element, target) .perform ()

"add-new-pano" is the drop field id.

0

3 Answers 3

2

While I haven't used selenium recently, if you're working in a static workspace where you can control most everything I would recommend using PyAutoGUI. It isn't a dynamic solution, but it does contain a left mouse emulation feature for drag and drop.

In the provided example, the mouse moves from the 100,100 location towards the bottom of the screen by 100 pixels:

>>> pyautogui.moveTo(100,100)    #starting mouse location of 100,100
>>> pyautogui.dragTo(100,200, button='left')     # drag mouse to X of 100, Y of 200 while holding down left mouse button

You can setup a makeshift solution to your application if it can be done in a controlled environment every time where you know the resolution, location of the file explorer, etc.

I have run into issues in a windows env. before due to unexpected update screens. Food for thought...

Sign up to request clarification or add additional context in comments.

Comments

0

The drag'n'drop of selenium is last time I checked broken.

I use the solution provided in How to simulate HTML5 Drag and Drop in Selenium Webdriver?

1 Comment

I don't think this is what the OP intended. The OP mentioned that he wants to upload a picture to a website using the drag and drop method programmatically. Not by moving a puzzle-like element from a place to another.
-1

I don't know, maybe someone will find this example useful. When I searched for this information, I couldn't find anything. Made it minimally reproducible. And you can easily adapt it to your project.

    driver.get("https://www.dragdrop.com/test/")
    driver.sleep(3)
    upload_file = "test.jpeg"
    
    with open(upload_file, "rb") as f:
        content = f.read()
        b64_file = base64.b64encode(content).decode()
    
    # Find the drop zone
    drop_target = driver.find_element(By.ID, "demo-upload")
    
    # Perform a Drag&Drop via JS
    driver.execute_script("""
        const b64 = arguments[0];
        const target = arguments[1];
    
        function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
            const byteCharacters = atob(b64Data);
            const byteArrays = [];
    
            for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                const slice = byteCharacters.slice(offset, offset + sliceSize);
                const byteNumbers = new Array(slice.length);
                for (let i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i);
                }
                byteArrays.push(new Uint8Array(byteNumbers));
            }
    
            return new Blob(byteArrays, { type: contentType });
        }
    
        const blob = b64toBlob(b64, 'image/jpeg');
        const file = new File([blob], 'test.jpg', { type: 'image/jpeg' });
        const dt = new DataTransfer();
        dt.items.add(file);
    
        const eventNames = ['dragenter', 'dragover', 'drop'];
        for (const name of eventNames) {
            const event = new DragEvent(name, {
                dataTransfer: dt,
                bubbles: true,
                cancelable: true
            });
            target.dispatchEvent(event);
        }
        """, b64_file, drop_target)
    
    driver.sleep(10)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.