feat: add dropzone support to attachFile (#5486)

When the target element is not an <input type="file">, attachFile now
falls back to dispatching synthetic drag-and-drop events (dragenter,
dragover, drop) with a DataTransfer containing the file. This enables
file uploads to dropzone libraries (Dropzone.js, react-dropzone, etc.).

Co-authored-by: DavertMik <davert@testomat.io>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: 3 people

lib/helper/Playwright.js

@@ -36,6 +36,7 @@ import RemoteBrowserConnectionRefused from './errors/RemoteBrowserConnectionRefu
 import Popup from './extras/Popup.js'
 import Console from './extras/Console.js'
 import { findReact, findVue, findByPlaywrightLocator } from './extras/PlaywrightReactVueLocator.js'
+import { dropFile } from './scripts/dropFile.js'
 import WebElement from '../element/WebElement.js'
 
 let playwright
@@ -2347,20 +2348,12 @@ class Playwright extends Helper {
 
     const targetEls = els.length ? els : await this._locate(locator)
     assertElementExists(targetEls, locator, 'Element')
-    const base64Content = base64EncodeFile(file)
-    const fileName = path.basename(file)
-    const mimeType = getMimeType(fileName)
-    await targetEls[0].evaluate((el, { base64Content, fileName, mimeType }) => {
-      const binaryStr = atob(base64Content)
-      const bytes = new Uint8Array(binaryStr.length)
-      for (let i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i)
-      const fileObj = new File([bytes], fileName, { type: mimeType })
-      const dataTransfer = new DataTransfer()
-      dataTransfer.items.add(fileObj)
-      el.dispatchEvent(new DragEvent('dragenter', { dataTransfer, bubbles: true }))
-      el.dispatchEvent(new DragEvent('dragover', { dataTransfer, bubbles: true }))
-      el.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true }))
-    }, { base64Content, fileName, mimeType })
+    const fileData = {
+      base64Content: base64EncodeFile(file),
+      fileName: path.basename(file),
+      mimeType: getMimeType(path.basename(file)),
+    }
+    await targetEls[0].evaluate(dropFile, fileData)
     return this._waitForAction()
   }
 

lib/helper/Puppeteer.js

@@ -38,6 +38,7 @@ import Popup from './extras/Popup.js'
 import Console from './extras/Console.js'
 import { highlightElement } from './scripts/highlightElement.js'
 import { blurElement } from './scripts/blurElement.js'
+import { dropFile } from './scripts/dropFile.js'
 import { dontSeeElementError, seeElementError, dontSeeElementInDOMError, seeElementInDOMError } from './errors/ElementAssertion.js'
 import { dontSeeTraffic, seeTraffic, grabRecordedNetworkTraffics, stopRecordingTraffic, flushNetworkTraffics } from './network/actions.js'
 import WebElement from '../element/WebElement.js'
@@ -1639,20 +1640,12 @@ class Puppeteer extends Helper {
 
     const targetEls = els.length ? els : await this._locate(locator)
     assertElementExists(targetEls, locator, 'Element')
-    const base64Content = base64EncodeFile(file)
-    const fileName = path.basename(file)
-    const mimeType = getMimeType(fileName)
-    await targetEls[0].evaluate((el, { base64Content, fileName, mimeType }) => {
-      const binaryStr = atob(base64Content)
-      const bytes = new Uint8Array(binaryStr.length)
-      for (let i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i)
-      const fileObj = new File([bytes], fileName, { type: mimeType })
-      const dataTransfer = new DataTransfer()
-      dataTransfer.items.add(fileObj)
-      el.dispatchEvent(new DragEvent('dragenter', { dataTransfer, bubbles: true }))
-      el.dispatchEvent(new DragEvent('dragover', { dataTransfer, bubbles: true }))
-      el.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true }))
-    }, { base64Content, fileName, mimeType })
+    const fileData = {
+      base64Content: base64EncodeFile(file),
+      fileName: path.basename(file),
+      mimeType: getMimeType(path.basename(file)),
+    }
+    await targetEls[0].evaluate(dropFile, fileData)
     return this._waitForAction()
   }
 

lib/helper/WebDriver.js

@@ -36,6 +36,7 @@ import { highlightElement } from './scripts/highlightElement.js'
 import { focusElement } from './scripts/focusElement.js'
 import { blurElement } from './scripts/blurElement.js'
 import { dontSeeElementError, seeElementError, seeElementInDOMError, dontSeeElementInDOMError } from './errors/ElementAssertion.js'
+import { dropFile } from './scripts/dropFile.js'
 import { dontSeeTraffic, seeTraffic, grabRecordedNetworkTraffics, stopRecordingTraffic, flushNetworkTraffics } from './network/actions.js'
 import WebElement from '../element/WebElement.js'
 
@@ -1376,20 +1377,12 @@ class WebDriver extends Helper {
     const targetRes = res.length ? res : await this._locate(locator)
     assertElementExists(targetRes, locator, 'Element')
     const targetEl = usingFirstElement(targetRes)
-    const base64Content = base64EncodeFile(file)
-    const fileName = path.basename(file)
-    const mimeType = getMimeType(fileName)
-    return this.browser.execute(function (el, data) {
-      var binaryStr = atob(data.base64Content)
-      var bytes = new Uint8Array(binaryStr.length)
-      for (var i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i)
-      var fileObj = new File([bytes], data.fileName, { type: data.mimeType })
-      var dataTransfer = new DataTransfer()
-      dataTransfer.items.add(fileObj)
-      el.dispatchEvent(new DragEvent('dragenter', { dataTransfer: dataTransfer, bubbles: true }))
-      el.dispatchEvent(new DragEvent('dragover', { dataTransfer: dataTransfer, bubbles: true }))
-      el.dispatchEvent(new DragEvent('drop', { dataTransfer: dataTransfer, bubbles: true }))
-    }, targetEl, { base64Content, fileName, mimeType })
+    const fileData = {
+      base64Content: base64EncodeFile(file),
+      fileName: path.basename(file),
+      mimeType: getMimeType(path.basename(file)),
+    }
+    return this.browser.execute(dropFile, targetEl, fileData)
   }
 
   /**

lib/helper/scripts/dropFile.js

@@ -0,0 +1,11 @@
+export const dropFile = (el, { base64Content, fileName, mimeType }) => {
+  const binaryStr = atob(base64Content)
+  const bytes = new Uint8Array(binaryStr.length)
+  for (let i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i)
+  const fileObj = new File([bytes], fileName, { type: mimeType })
+  const dataTransfer = new DataTransfer()
+  dataTransfer.items.add(fileObj)
+  el.dispatchEvent(new DragEvent('dragenter', { dataTransfer, bubbles: true }))
+  el.dispatchEvent(new DragEvent('dragover', { dataTransfer, bubbles: true }))
+  el.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true }))
+}