How to make Playwright wait for image uploads before submitting?

Other Questions Headless Browser
1

I’m working on automating a form submission using Playwright, and I’ve hit a snag with image uploads. My script attempts to upload up to five images automatically, but it doesn’t wait long enough before clicking the submit button. I tried using page.wait_for_load_state(‘networkidle’) and time.sleep(15), yet neither provided a reliable solution.

Here’s a revised snippet of my code:

def initiate_upload(page):
    # Populate the form with required data
    page.check('#agree-terms')
    page.set_input_files('input[name="pictures[]"]', file_list[:5])
    # Insert a method here to confirm upload completion
    page.click('button[type="submit"]')

with sync_playwright() as p:
    browser = p.firefox.launch(headless=False)
    page = browser.new_page()
    initiate_upload(page)

I’d appreciate any ideas or methods to ensure that Playwright waits until all images finish uploading before continuing.

2

I’ve dealt with this exact problem before, and it can be tricky. What worked for me was using a combination of waiting for network idle and checking for specific elements that appear after uploads complete. Here’s what I did:

  1. Set up a listener for network requests at the start of your test.
  2. After initiating the upload, wait for network idle.
  3. Then, check for elements that indicate successful upload (like preview thumbnails or a ‘ready to submit’ message).
  4. Finally, verify that the number of successful upload indicators matches the number of files you tried to upload.

This approach has been pretty bulletproof for me across different sites and file sizes. Just remember to add appropriate timeouts, as very large files might take a while to upload depending on connection speed.

3

I’ve encountered similar issues with image uploads in Playwright. One effective approach is to utilize the Network API to monitor the upload requests. You can track the number of pending requests and wait until they’re all completed. Here’s a potential solution:

def wait_for_uploads(page):
    page.wait_for_load_state('networkidle')
    page.wait_for_function('''() => {
        return document.querySelectorAll('input[type=file]').length === 
               document.querySelectorAll('input[type=file]:not([value=\"\"])').length;
    }''')

def initiate_upload(page):
    page.check('#agree-terms')
    page.set_input_files('input[name=\"pictures[]\"]', file_list[:5])
    wait_for_uploads(page)
    page.click('button[type=\"submit\"]')

This approach should provide a more reliable way to ensure all images are uploaded before submission.

4

hey there creativeartist88, here’s a tip: try using page.wait_for_selector() to check for an element that appears when uploads are done. like maybe a preview thumbnail or success message. you could also use page.wait_for_function() to check if a javascript variable changes when uploads finish. hope that helps!