使用Katalon测试非Input元素的文件上传（无需打开资源管理器）

Hey there! I’ve run into this exact scenario with custom-styled upload buttons a bunch of times—they look fancy but make testing tricky when they’re not using the standard <input type="file"> element. Let’s break down the ways you can test file uploads without triggering that annoying system file picker window:

方法1：定位页面中隐藏的原生File Input #

Most custom upload components hide a native <input type="file"> element (usually with display: none or visibility: hidden styles) and use the custom button to trigger its click event. Here’s how to work around it:

• Open your browser’s DevTools (F12), head to the Elements panel, and search for input[type="file"] to find the hidden element.
• Instead of clicking the custom "Browse" button, directly set the file path on this hidden input. Examples in common testing tools:
  • Selenium (Python):

    from selenium.webdriver.common.by import By
    
    hidden_input = driver.find_element(By.CSS_SELECTOR, 'input[type="file"]')
    hidden_input.send_keys('/absolute/path/to/your/test/file.png')
    

  • Puppeteer (JavaScript):

    const fileInput = await page.$('input[type="file"]');
    await fileInput.uploadFile('/absolute/path/to/your/test/file.png');
    

This method skips the system picker entirely because you’re interacting directly with the native input that handles file uploads under the hood.

方法2：模拟触发按钮的JavaScript事件 #

If the custom button uses custom JavaScript events to initiate the upload flow (instead of proxying to a hidden input), you can trigger those events directly and inject test file content:

• Use DevTools’ Event Listeners panel to see what events are bound to the button (e.g., click, custom-upload-trigger).
• If the component accepts a Blob object for upload, create a test blob and dispatch the event. Example in Puppeteer:

  await page.evaluate(() => {
    // Create a test blob (simulating a JPG file)
    const testBlob = new Blob(['test file content'], { type: 'image/jpeg' });
    const uploadBtn = document.querySelector('.your-custom-button-selector');
    
    // Dispatch the custom event the button listens for
    uploadBtn.dispatchEvent(new CustomEvent('initiate-upload', { 
      detail: { file: testBlob, fileName: 'test-image.jpg' } 
    }));
  });
  

方法3：直接调用后端上传接口 #

If front-end DOM manipulation feels too fragile, you can skip the UI entirely and hit the backend’s upload API directly:

• Use DevTools’ Network panel to capture the actual upload request: note the API endpoint, HTTP method (usually POST), and request headers (like Content-Type: multipart/form-data).
• Construct a request with your test file and send it directly. Example with Python’s requests library:

  import requests
  
  upload_url = 'https://your-site.com/api/file-upload'
  test_file = open('/path/to/test/file.pdf', 'rb')
  response = requests.post(upload_url, files={'file': test_file})
  
  # Verify the upload succeeded
  print(response.status_code)
  

This is great for pure functional testing where you don’t need to validate front-end behavior, just that the backend accepts files correctly.

内容的提问来源于stack exchange，提问作者roinrb